+弹窗图片可点击，列表展示文字区域点击是定位，图片可点击，+活动打开后隐藏右侧控制栏，+操作方式更改

liuyg

2022-02-09 0fa88f9c2e3c8ce335e7cd6dfc6c8e5641950735

 src/components/campusNav/index.vue

@@ -46,8 +46,8 @@
                            <ul>
                                <li v-for="(item, index) in toNameList"
                                    :key="index"
                                    @click="loadPopup(item)">
                                    {{item.name}}
                                    @click="originChange(item)">
                                    {{item.mechanismname}}
                                </li>
                            </ul>
                        </div>
@@ -64,8 +64,8 @@
                            <ul>
                                <li v-for="(item, index) in comeNameList"
                                    :key="index"
                                    @click="loadPopup(item)">
                                    {{item.name}}
                                    @click="terminusChange(item)">
                                    {{item.mechanismname}}
                                </li>
                            </ul>
                        </div>
@@ -114,7 +114,9 @@
            // 出发名称
            'getToName',
            // 到达名称
            'comeName'
            'comeName',
            // 点信息
            'pointPosition'
        ])
    },
    watch: {
@@ -250,6 +252,14 @@
                        output: 'json'
                    }
                }).then(res => {
                    if (res.data.info == 'OVER_DIRECTION_RANGE') {
                        this.$message({
                            message: '超出步行范围！',
                            type: 'warning',
                            duration: 3000
                        })
                    }

                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline = item.polyline.split(';')

@@ -267,9 +277,7 @@
                        routes += lineArr
                    })

                    console.log(routes, 123)

                    routes = routes.substr(0, routes.length - 1)
                    routes = startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
@@ -281,7 +289,7 @@
                        clampToGround: true
                    })
                    this.routeLayer.addOverlay(polyline)
                    if (this.twoOrThree == '3 维') {
                    if (this.twoOrThree == '真三维') {
                        this.viewer.flyTo(this.routeLayer)
                    } else {
                        var longitude = null
@@ -304,7 +312,7 @@
                        this.viewer.camera.setView({
                            // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                            // fromDegrees()方法，将经纬度和高程转换为世界坐标
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 300),
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 600),
                            orientation: {
                                // 指向
                                heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
@@ -318,8 +326,8 @@
            } else {
                axios.get('https://restapi.amap.com/v3/direction/driving', {
                    params: {
                        origin: `${startLog + ',' + startLat}`,
                        destination: `${endLog + ',' + endLat}`,
                        origin: `${origin[0].toFixed(6) + ',' + origin[1].toFixed(6)}`,
                        destination: `${destination[0].toFixed(6) + ',' + destination[1].toFixed(6)}`,
                        key: '4b3e1db3211054ce5b466407cbb9d221',
                        strategy: 2,
                        extensions: 'all',
@@ -327,11 +335,23 @@
                    }
                }).then(res => {
                    res.data.route.paths[0].steps.forEach(item => {
                        item.polyline += ';'
                        routes += item.polyline
                        item.polyline = item.polyline.split(';')

                        var lineArr = []

                        item.polyline.forEach(it => {
                            it = it.split(',')
                            lineArr.push(this.DC.CoordTransform.GCJ02ToWGS84(it[0], it[1]).join(','))
                        })

                        lineArr = lineArr.join(';')

                        lineArr += ';'

                        routes += lineArr
                    })

                    routes = routes.substr(0, routes.length - 1)
                    routes = startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat

                    const polyline = new this.DC.Polyline(routes)
                    polyline.setStyle({
@@ -344,7 +364,7 @@
                    })
                    this.routeLayer.addOverlay(polyline)

                    if (this.twoOrThree == '3 维') {
                    if (this.twoOrThree == '真三维') {
                        this.viewer.flyTo(this.routeLayer)
                    } else {
                        var longitude = null
@@ -367,7 +387,7 @@
                        this.viewer.camera.setView({
                            // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
                            // fromDegrees()方法，将经纬度和高程转换为世界坐标
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 300),
                            destination: this.DC.Namespace.Cesium.Cartesian3.fromDegrees(longitude, latitude, 600),
                            orientation: {
                                // 指向
                                heading: this.DC.Namespace.Cesium.Math.toRadians(0, 0),
@@ -431,6 +451,36 @@
                    this.comeNameShow = false
                }
            }
        },

        originChange (param) {
            this.$store.commit('SET_POINTPOSITION', [
                Number(param.jd),
                Number(param.wd),
                Number(param.gd),
                Number(param.heading),
                Number(param.pitch),
                Number(param.roll)
            ])
            this.$store.commit('SET_GETTONAME', param.mechanismname)
            this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
            this.toNameShow = false
            this.toNameList = []
        },

        terminusChange (param) {
            this.$store.commit('SET_POINTPOSITION', [
                Number(param.jd),
                Number(param.wd),
                Number(param.gd),
                Number(param.heading),
                Number(param.pitch),
                Number(param.roll)
            ])
            this.$store.commit('SET_COMENAME', param.mechanismname)
            this.$store.commit('SET_TERMINUS', this.pointPosition)
            this.comeNameShow = false
            this.comeNameList = []
        }
    }
}