pc端，导航逻辑梳理

shuishen

2023-12-06 919596422fd359e62a8b224d1321c13d843c2fae

pc端，导航逻辑梳理

 src/components/campusNav/index.vue

@@ -1,73 +1,79 @@
<template>
    <public-box class="campus-nav-box">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" :src="publicPath + 'img/icon/xndh.png'" alt />
                <span>校区内导航</span>
            </div>
            <img class="close deblurring" :src="publicPath + 'img/navicon/close.png'" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="tab">
                <ul v-if="twoOrThree == '真三维'">
                    <li @click="tabClick('步行')" :class="{ on: tabOneFlag }">
                        <i></i>
                        步行
                    </li>
                    <li @click="tabClick('驾车')" :class="{ on: tabTwoFlag }">
                        <i></i>
                        驾车
                    </li>
                </ul>
                <v-else>
                    <ul>
                        <li>江西科技师范大学欢迎您！</li>
    <div>
        <public-box class="campus-nav-box">
            <template slot="public-box-header">
                <div class="title">
                    <img class="icon deblurring" :src="publicPath + 'img/icon/xndh.png'" alt />
                    <span>校区内导航</span>
                </div>
                <img class="close deblurring" :src="publicPath + 'img/navicon/close.png'" alt @click="closeModel" />
            </template>
            <template slot="public-box-content">
                <div class="tab">
                    <ul v-if="twoOrThree == '真三维'">
                        <li @click="tabClick('步行')" :class="{ on: tabOneFlag }">
                            <i></i>
                            步行
                        </li>
                        <li @click="tabClick('驾车')" :class="{ on: tabTwoFlag }">
                            <i></i>
                            驾车
                        </li>
                    </ul>
                </v-else>
            </div>
            <div class="container">
                <div>
                    <div id="ToNameContainer">
                        <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
                            <template slot="prepend">
                                <i class="el-icon-location mydingwei" style="color: green"></i>
                            </template>
                        </el-input>
                        <div v-show="toNameShow" class="toname-value-box">
                            <ul>
                                <li v-for="(item, index) in toNameList" :key="index" @click="originChange(item)">{{
                                    item.mechanismname
                                }}</li>
                            </ul>
                    <v-else>
                        <ul>
                            <li>江西科技师范大学欢迎您！</li>
                        </ul>
                    </v-else>
                </div>
                <div class="container">
                    <div>
                        <div id="ToNameContainer">
                            <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
                                <template slot="prepend">
                                    <i class="el-icon-location mydingwei" style="color: green"></i>
                                </template>
                            </el-input>
                            <div v-show="toNameShow" class="toname-value-box">
                                <ul>
                                    <li v-for="(item, index) in toNameList" :key="index" @click="originChange(item)">{{
                                        item.mechanismname
                                    }}</li>
                                </ul>
                            </div>
                        </div>
                        <div id="ComeNameContainer">
                            <el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
                                <template slot="prepend">
                                    <i class="el-icon-location mydingwei" style="color: red"></i>
                                </template>
                            </el-input>
                            <div v-show="comeNameShow" class="comename-value-box">
                                <ul>
                                    <li v-for="(item, index) in comeNameList" :key="index" @click="terminusChange(item)">{{
                                        item.mechanismname
                                    }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div id="ComeNameContainer">
                        <el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
                            <template slot="prepend">
                                <i class="el-icon-location mydingwei" style="color: red"></i>
                            </template>
                        </el-input>
                        <div v-show="comeNameShow" class="comename-value-box">
                            <ul>
                                <li v-for="(item, index) in comeNameList" :key="index" @click="terminusChange(item)">{{
                                    item.mechanismname
                                }}</li>
                            </ul>
                        </div>
                    <div>
                        <el-button @click="startNavigation" type="primary">导航</el-button>
                    </div>
                </div>
                <div>
                    <el-button @click="startNavigation" type="primary">导航</el-button>
                </div>
            </div>

            <div class="path-box" v-show="pathBoxShow">
                <ul>
                    <li v-for="(item, index) in pathBoxList" :key="index">{{ item.instruction }}</li>
                </ul>
            </div>
        </template>
    </public-box>
                <div class="path-box" v-show="pathBoxShow">
                    <ul>
                        <li v-for="(item, index) in pathBoxList" :key="index">{{ item.instruction }}</li>
                    </ul>
                </div>
            </template>
        </public-box>

        <div id="overlay" v-show="toolTipShow">
            {{ toolTipText }}
        </div>
    </div>
</template>

<script>
@@ -75,7 +81,7 @@
import { getSearchList } from '@/api/pc/public/search'
import axios from 'axios'

import { Tooltip } from 'ol/control'
import OlOverlay from "ol/Overlay"

import VectorLayer from "ol/layer/Vector"
import VectorSource from "ol/source/Vector"
@@ -85,11 +91,15 @@
import Point from 'ol/geom/Point.js'
import { Icon, Style, Fill, Text, Stroke } from 'ol/style.js'

import { WGS84ToGCJ02 } from '@/utils/CoordTransform'

const CamPusNavLayer = {
    campusStartLayer: null,
    campusEndLayer: null,
    campusRouteLayer: null
}

let overlayLayer

export default {
    name: 'campusNav',
@@ -113,7 +123,11 @@
            pathBoxShow: false,
            pathBoxList: [],

            isOverRouter: false // 是否启用了导航
            isOverRouter: false, // 是否启用了导航

            toolTipShow: false,
            toolTipTitle: '',
            toolTipText: ''
        }
    },
    computed: {
@@ -171,132 +185,110 @@
        chouseDian (val) {
            const that = this

            that.clearLayer() // 清除完成的导航
            if (that.isOverRouter) {
                // 若是已经有导航，恢复未点击图标
                if (val == 'start') {
                    // 初始化图标图层
                    if (CamPusNavLayer.campusEndLayer == null) {
                        CamPusNavLayer.campusEndLayer = new global.DC.VectorLayer('campusEndLayer')
                        global.viewer.addLayer(CamPusNavLayer.campusEndLayer)
                    } else {
                        CamPusNavLayer.campusEndLayer.clear()
                    }
                    // console.log("baoliuend", "see");
            that.clearLayer('campusRouteLayer', true)

            // 添加标记
            if (val == 'start') {
                that.clearLayer('campusStartLayer')

                that.toolTipTitle = '点击选择起点'

                if (that.isOverRouter) {
                    that.$store.commit('SET_STARTINGPOINT', [])
                    const endEntity = new global.DC.Billboard(
                        new global.DC.Position(
                            Number(this.terminus[0]),
                            Number(this.terminus[1]),
                            Number(this.terminus[2])
                        ),
                        this.publicPath + 'img/navicon/end.png'
                    )
                    CamPusNavLayer.campusEndLayer.addOverlay(endEntity)
                } else if (val == 'end') {
                    // 初始化图标图层
                    if (CamPusNavLayer.campusStartLayer == null) {
                        CamPusNavLayer.campusStartLayer = new global.DC.VectorLayer('campusStartLayer')
                        global.viewer.addLayer(CamPusNavLayer.campusStartLayer)
                    } else {
                        CamPusNavLayer.campusStartLayer.clear()
                    }
                    // console.log("baoliustart", "see");

                    CamPusNavLayer.campusStartLayer.getSource().addFeature(that.getCurItemFeature({
                        lng: this.startingPoint[0],
                        lat: this.startingPoint[1],
                        url: this.publicPath + 'img/navicon/start.png',
                    }))
                }
            } else if (val == 'end') {
                that.clearLayer('campusEndLayer')

                that.toolTipTitle = '点击选择终点'

                if (that.isOverRouter) {
                    that.$store.commit('SET_TERMINUS', [])
                    const startEntity = new global.DC.Billboard(
                        new global.DC.Position(
                            Number(this.startingPoint[0]),
                            Number(this.startingPoint[1]),
                            Number(this.startingPoint[2])
                        ),
                        this.publicPath + 'img/navicon/start.png'
                    )
                    CamPusNavLayer.campusStartLayer.addOverlay(startEntity)

                    CamPusNavLayer.campusRouteLayer.getSource().addFeature(that.getCurItemFeature({
                        lng: this.terminus[0],
                        lat: this.terminus[1],
                        url: this.publicPath + 'img/navicon/end.png',
                    }))
                }
            }

            // console.log(val, "see1");
            this.butChouse = val
            // 关闭其他地图事件
            that.$store.commit('set_closeMapClick', true)
            // 添加标记

            const tooltip = new Tooltip({})
            tooltip.show([longitude, latitude], '自定义内容')

            // tooltip.enable = true
            // let title = ''
            if (val == 'start') {
                title = '点击选择起点'
                // 初始化图标图层
                if (CamPusNavLayer.campusStartLayer == null) {
                    CamPusNavLayer.campusStartLayer = new global.DC.VectorLayer('campusStartLayer')
                    global.viewer.addLayer(CamPusNavLayer.campusStartLayer)
                } else {
                    CamPusNavLayer.campusStartLayer.clear()
                }
            } else if (val == 'end') {
                title = '点击选择终点'
                // 初始化图标图层
                if (CamPusNavLayer.campusEndLayer == null) {
                    CamPusNavLayer.campusEndLayer = new global.DC.VectorLayer('campusEndLayer')
                    global.viewer.addLayer(CamPusNavLayer.campusEndLayer)
                } else {
                    CamPusNavLayer.campusEndLayer.clear()
                }
            }
            that.overChouse = false // 开启事件
            // 地图选点
            that.clicks = global.viewer.on(global.DC.MouseEventType.CLICK, (e) => {
                if (that.overChouse) {
                    return
                }
                const lnglat = [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat]
                // console.log(lnglat, "see11");
                // console.log(that.butChouse, "see11");
                // 应用数据
                if (that.butChouse == 'start') {
                    that.toNameText = '自定义起点'
                    // 传输坐标数据
                    that.$store.commit('SET_STARTINGPOINT', [...lnglat, 0])
                    // 起点
                    const startEntity = new global.DC.Billboard(
                        new global.DC.Position(
                            Number(lnglat[0]),
                            Number(lnglat[1]),
                            Number(0)
                        ),
                        this.publicPath + 'img/navicon/start.png'
                    )
                    CamPusNavLayer.campusStartLayer.addOverlay(startEntity)
                } else if (that.butChouse == 'end') {
                    that.comeNameText = '自定义终点'
                    // 传输坐标数据
                    that.$store.commit('SET_TERMINUS', [...lnglat, 0])
                    // 终点
                    const endEntity = new global.DC.Billboard(
                        new global.DC.Position(
                            Number(lnglat[0]),
                            Number(lnglat[1]),
                            Number(0)
                        ),
                        this.publicPath + 'img/navicon/end.png'
                    )
                    CamPusNavLayer.campusEndLayer.addOverlay(endEntity)
                }
                title = ''
                tooltip.enable = false
                that.overChouse = true // 关闭事件
                // 开启其他地图事件

            that.map2D.on('click', that.mapHandlerClick)
            that.map2D.on('pointermove', that.mapHandlerMove)
        },

        mapHandlerClick (event) {
            const that = this
            const coordinate = that.map2D.getEventCoordinate(event.originalEvent)

            if (that.butChouse == 'start') {
                that.toNameText = '自定义起点'
                // 传输坐标数据
                that.$store.commit('SET_STARTINGPOINT', [...coordinate, 0])

                CamPusNavLayer.campusStartLayer.getSource().addFeature(that.getCurItemFeature({
                    lng: Number(coordinate[0]),
                    lat: Number(coordinate[1]),
                    url: this.publicPath + 'img/navicon/start.png',
                }))
            } else if (that.butChouse == 'end') {
                that.comeNameText = '自定义终点'
                // 传输坐标数据
                that.$store.commit('SET_TERMINUS', [...coordinate, 0])

                CamPusNavLayer.campusEndLayer.getSource().addFeature(that.getCurItemFeature({
                    lng: Number(coordinate[0]),
                    lat: Number(coordinate[1]),
                    url: this.publicPath + 'img/navicon/end.png',
                }))
            }

            this.toolTipShow = false

            that.map2D.un('click', that.mapHandlerClick)
            that.map2D.un('pointermove', that.mapHandlerMove)

            setTimeout(() => {
                that.$store.commit('set_closeMapClick', false)
            }, 500)
        },

        mapHandlerMove (event) {
            const that = this
            that.moveOverlay(event.coordinate)
        },

        addOverlay (center) {
            //此处的overlayLayer要是全局变量，其他的函数内要用到
            overlayLayer = new OlOverlay({
                element: document.getElementById('overlay'),
                position: center,
                positioning: 'center-center',
                stopEvent: false
            })
            that.moves = global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, (e) => {
                if (that.overChouse) {
                    return
                }
                // let lnglat = [e.wgs84SurfacePosition.lng, e.wgs84SurfacePosition.lat];
                tooltip.showAt(e.windowPosition, title)
            })
            this.map2D.addOverlay(overlayLayer)
        },

        moveOverlay (coorC) {
            if (!overlayLayer) {
                this.addOverlay(coorC)
            }

            this.toolTipShow = true
            this.toolTipText = this.toolTipTitle

            overlayLayer.setPosition(coorC)
        },

        closeModel () {
@@ -315,23 +307,16 @@
            this.pathBoxShow = false

            if (CamPusNavLayer.campusRouteLayer != null) {
                CamPusNavLayer.campusRouteLayer.clear()
                CamPusNavLayer.campusRouteLayer.getSource().clear()
                this.isOverRouter = false
            }
            // 清除自定义位置
            if (CamPusNavLayer.campusStartLayer != null) {
                CamPusNavLayer.campusStartLayer.clear()
                // CamPusNavLayer.campusStartLayer = null;
            }
            if (CamPusNavLayer.campusEndLayer != null) {
                CamPusNavLayer.campusEndLayer.clear()
                // CamPusNavLayer.campusEndLayer = null;
            }

            this.$store.commit('SET_COMENAME', '')
            this.$store.commit('SET_TERMINUS', null)
            this.$store.commit('SET_GETTONAME', '')
            this.$store.commit('SET_STARTINGPOINT', null)
            this.$store.commit('SET_CAMPUSNAVFLAG', false)
            that.$store.commit('set_closeMapClick', false)
        },

        tabClick (param) {
@@ -342,22 +327,10 @@

        startNavigation () {
            const that = this
            // 清除自定义位置
            if (CamPusNavLayer.campusStartLayer != null) {
                CamPusNavLayer.campusStartLayer.clear()
                // CamPusNavLayer.campusStartLayer = null;
            }
            if (CamPusNavLayer.campusEndLayer != null) {
                CamPusNavLayer.campusEndLayer.clear()
                // CamPusNavLayer.campusEndLayer = null;
            }
            that.clearLayer('campusRouteLayer', true)
            that.clearLayer('campusStartLayer')
            that.clearLayer('campusEndLayer')

            if (CamPusNavLayer.campusRouteLayer == null) {
                CamPusNavLayer.campusRouteLayer = new global.DC.VectorLayer('campusRouteLayer')
                global.viewer.addLayer(CamPusNavLayer.campusRouteLayer)
            } else {
                CamPusNavLayer.campusRouteLayer.clear()
            }
            if (this.startingPoint == null) {
                this.$message('请输入起点！！！')
            }
@@ -365,26 +338,17 @@
                this.$message('请输入终点！！！')
            }

            // var start = global.DC.Transform.transformWGS84ToCartesian()
            const startEntity = new global.DC.Billboard(
                new global.DC.Position(
                    Number(this.startingPoint[0]),
                    Number(this.startingPoint[1]),
                    Number(this.startingPoint[2])
                ),
                this.publicPath + 'img/navicon/start.png'
            )
            CamPusNavLayer.campusRouteLayer.addOverlay(startEntity)
            // var end = global.DC.Transform.transformWGS84ToCartesian()
            const endEntity = new global.DC.Billboard(
                new global.DC.Position(
                    Number(this.terminus[0]),
                    Number(this.terminus[1]),
                    Number(this.terminus[2])
                ),
                this.publicPath + 'img/navicon/end.png'
            )
            CamPusNavLayer.campusRouteLayer.addOverlay(endEntity)
            CamPusNavLayer.campusStartLayer.getSource().addFeature(that.getCurItemFeature({
                lng: this.startingPoint[0],
                lat: this.startingPoint[1],
                url: this.publicPath + 'img/navicon/start.png',
            }))

            CamPusNavLayer.campusEndLayer.getSource().addFeature(that.getCurItemFeature({
                lng: this.terminus[0],
                lat: this.terminus[1],
                url: this.publicPath + 'img/navicon/end.png',
            }))

            var routes = ''

@@ -393,8 +357,9 @@
            var endLog = Number(this.terminus[0]).toFixed(6)
            var endLat = Number(this.terminus[1]).toFixed(6)

            var origin = global.DC.CoordTransform.WGS84ToGCJ02(startLog, startLat)
            var destination = global.DC.CoordTransform.WGS84ToGCJ02(endLog, endLat)
            var origin = WGS84ToGCJ02(startLog, startLat)
            var destination = WGS84ToGCJ02(endLog, endLat)

            if (this.twoOrThree == '真三维') {
                if (this.navigationWay == '步行') {
                    axios
@@ -586,12 +551,16 @@
                            }
                        })
                        .then((res) => {
                            if (res.data.info == 'OVER_DIRECTION_RANGE') {
                            if (res.data.info == 'OVER_DIRECTION_RANGE' || 'error' in res.data) {
                                this.$message({
                                    message: '超出步行范围！',
                                    type: 'warning',
                                    duration: 3000
                                    duration: 3000,
                                    onClose () {
                                        that.clearLayer('campusRouteLayer', true)
                                    }
                                })

                            }

                            this.pathBoxList = []
@@ -605,14 +574,8 @@
                            routes =
                                startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat

                            const polyline = new global.DC.Polyline(routes)
                            polyline.setStyle({
                                width: 6,
                                material: global.DC.Color.RED,
                                clampToGround: true
                            })
                            CamPusNavLayer.campusRouteLayer.getSource().addFeature(that.drawPolyline(routes))

                            CamPusNavLayer.campusRouteLayer.addOverlay(polyline)
                            if (this.twoOrThree == '真三维') {
                                global.viewer.flyTo(CamPusNavLayer.campusRouteLayer)
                            } else {
@@ -633,22 +596,8 @@
                                    latitude = (endLat - startLat) / 2 + startLat
                                }
                                that.isOverRouter = true
                                global.viewer.camera.setView({
                                    // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                                    // fromDegrees()方法，将经纬度和高程转换为世界坐标
                                    destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
                                        longitude,
                                        latitude,
                                        600
                                    ),
                                    orientation: {
                                        // 指向
                                        heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                                        // 视角
                                        pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                                        roll: 0.0
                                    }
                                })

                                this.map2D.getView().setCenter([longitude, latitude])
                            }
                        })
                } else {
@@ -721,11 +670,62 @@
            }
        },

        clearLayer () {
            if (CamPusNavLayer.campusRouteLayer != null) {
                CamPusNavLayer.campusRouteLayer.clear()
        getCurItemFeature (params) {
            const iconFeature = new Feature({
                geometry: new Point([Number(params.lng), Number(params.lat)]),
                type: 'navigationPoint'
            })

            iconFeature.setStyle(new Style({
                image: new Icon({
                    scale: 1,
                    imgSize: [48, 48],
                    src: params.url,
                    // 设置图标偏移
                    anchor: [24, 44],
                    // X方向单位：分数
                    anchorXUnits: 'pixels',
                    // Y方向单位：像素
                    anchorYUnits: 'pixels',
                })
            }))

            return iconFeature
        },

        drawPolyline (item) {
            let lineFeature = new Feature({
                geometry: new LineString(item)
            })

            let style = new Style({
                stroke: new Stroke({
                    color: 'red', // 线条颜色，根据需要设置  
                    width: 6 // 线条宽度，根据需要设置  
                })
            })

            // 设置线要素的样式  
            lineFeature.setStyle(style)

            return lineFeature
        },

        clearLayer (layerName, flag = false) {
            if (flag) {
                this.pathBoxList = []
                this.pathBoxShow = false
            }

            if (CamPusNavLayer[layerName] == null) {
                CamPusNavLayer[layerName] = new VectorLayer({
                    // 图标图层
                    zIndex: 33,
                    source: new VectorSource(),
                })
                this.map2D.addLayer(CamPusNavLayer[layerName])
            } else {
                CamPusNavLayer[layerName].getSource().clear()
            }
        },

@@ -838,4 +838,27 @@
}
</script>

<style lang="scss" scope></style>
<style lang="scss" scope>
#overlay {
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    transform: translate(calc(50% + 16px), 0);
    color: #fff;
    background: #000;
    border-radius: 8px;

    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 0;
        height: 0;
        border: 8px solid #000;
        //可以通过改变边框的颜色来控制三角形的方向
        border-color: transparent #000 transparent transparent;
        transform: translate(-100%, -50%);
    }
}
</style>

 src/components/map/index.vue

@@ -61,6 +61,7 @@
        ],
        polygonUrl: 'https://fkxt.jxstnu.edu.cn/changjing/lkarcgisapp'
    },

    {
        key: 2,
        tileUrl: "https://dev.jxpskj.com:8023/arcgis156/rest/services/cc/MapServer/tile/{z}/{y}/{x}",
@@ -203,7 +204,8 @@
            'orgNavBarFlag',
            'arcNavBarFlag',
            'searchPopupFlag',
            'calenderShow'
            'calenderShow',
            'closeMapClick'
        ])
    },

@@ -214,14 +216,17 @@
            that.map2D.on('pointermove', that.mouseMoveEvent)

            this.map2D.on("singleclick", function (event) {
                if (that.closeMapClick) return

                let flag = true

                that.map2D.forEachFeatureAtPixel(
                    event.pixel,
                    (feature) => {
                        if (flag == false) {
                            return
                        }
                        if (feature.values_.type == 'point') {
                        if (feature.values_.type == 'point' || feature.values_.type == 'navigationPoint') {
                            flag = false
                        }

@@ -279,6 +284,8 @@
            let flag = true
            var that = this

            if (that.closeMapClick) return

            if (select != null && select.values_.type == 'polygon') {
                select.setStyle(new Style({

@@ -298,13 +305,13 @@
                        return
                    }

                    if (feature.values_.type == 'point') {
                    if (feature.values_.type == 'point' || feature.values_.type == 'navigationPoint') {
                        flag = false
                        return
                    }

                    if (select != null) {
                        if (feature != select) {
                    if (feature.values_.type == 'polygon') {
                        if (select != null && feature != select) {
                            select.setStyle(new Style({

                                fill: new Fill({
@@ -315,26 +322,27 @@

                            select = null
                        }

                        if (select == null) {
                            select = feature

                            select.setStyle(
                                new Style({

                                    fill: new Fill({
                                        color: 'rgba(108, 245, 113, 0.6)'
                                    }),

                                    stroke: new Stroke({
                                        color: 'rgba(3, 255, 13, 1)',
                                        width: 1,
                                    }),

                                })
                            )
                        }
                    }

                    if (select == null) {
                        select = feature

                        select.setStyle(
                            new Style({

                                fill: new Fill({
                                    color: 'rgba(108, 245, 113, 0.6)'
                                }),

                                stroke: new Stroke({
                                    color: 'rgba(3, 255, 13, 1)',
                                    width: 1,
                                }),

                            })
                        )
                    }
                }
            )
        },

 src/store/modules/popupParams.js

@@ -16,6 +16,16 @@
window.divIcon = null;
window.divIcononces = null;

function updateUrl(url) {
  if (url.indexOf("http://172.18.4.135:9000/zhxy") != -1) {
    url = url.replace(
      "http://172.18.4.135:9000/zhxy",
      "https://fkxt.jxstnu.edu.cn/changjing/gminio/zhxy"
    );
  }
  return url;
}

const popupParams = {
  state: {
    ...leftNavsData.state,
@@ -191,6 +201,9 @@
      if (value.item.tpurl) {
        imgArr = value.item.tpurl.split(",");
      }

      imgArr = imgArr.map((item) => updateUrl(item));

      commit("SET_POPUPBGURL", imgArr[0]);
      commit("SET_POPUPIMGATLAS", imgArr);
      commit("SET_POPUPQRURL", value.item.codeurl);
@@ -204,6 +217,7 @@
      ]);
      commit("SET_DETAILSPOPUP", true);
    },

    pcMoveView({ state, commit, dispatch }, val) {
      openlayerData.state.openlayers.map2D
        .getView()
@@ -212,6 +226,7 @@
        .getView()
        .setResolution(0.00009517844023321122);
    },

    pcFlyView({ state, commit, dispatch }, val) {
      openlayerData.state.openlayers.map2D
        .getView()

 src/utils/CoordTransform.js

@@ -87,7 +87,7 @@
  return ret;
}

export function GCJ02ToWGS84(lng, lat) {
function GCJ02ToWGS84(lng, lat) {
  lat = +lat;
  lng = +lng;
  if (out_of_china(lng, lat)) {
@@ -107,3 +107,5 @@
    return out;
  }
}

export { GCJ02ToWGS84, WGS84ToGCJ02 };