1
mayisheng
2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d
src/components/mobilemap/index.vue
@@ -48,8 +48,8 @@
var baseLayers = []
let viewerHeight = 500
let heightChange = 500
let viewerHeight = 800
let heightChange = 800
let tilesetLayer = null
@@ -121,7 +121,7 @@
            ],
            // areaLayer: null,
            // mapCenter: [115.871863, 28.743861, 160.0],
            mapCenter: [114.03948009, 27.63018386, 500.0],
            mapCenter: [116.02680670, 28.68340803, 800.0],
            //   mapCenter: [116.35381525 - 0.00035, 27.95839468 + 0.0025, 160.0],
            // 控制4层缩放
            // onelayerNum: 80,
@@ -131,15 +131,15 @@
            // intervallayerNum: 20,
            // frislayertHeight: 120, // 默认高度
            onelayerNum: 100,
            twolayerNum: 200,
            threelayerNum: 300,
            fourlayerNum: 400,
            fivelayerNum: 500,
            twolayerNum: 300,
            threelayerNum: 500,
            fourlayerNum: 800,
            fivelayerNum: 1000,
            sixlayerNum: null,
            intervallayerNum: 50,
            frislayertHeight: 500, // 默认高度
            frislayertHeight: 800, // 默认高度
            useZoom: false, // 是否缩放 true 去掉了缩放, 抚州 false
            addOthers: false // 加入了活动底图以及抚州底图  抚州 true
        }
@@ -157,7 +157,8 @@
            'dimensionData',
            // "areaLayer", // 绿布
            // "areaLayerSelect", // 绿布颜色控制
            'urlParameterData' // url 参数
            'urlParameterData', // url 参数
            'pinchFlag'
        ])
    },
    watch: {
@@ -178,7 +179,7 @@
                const that = this
                if (that.titlesetLayerFlag == false && newCode == true) {
                    global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                        url: '/img/bg/map.jpg'
                        url: '/img/bg/bg.png'
                    }))
                    silhouetteBlue =
@@ -215,20 +216,46 @@
                            that.dimensionData.roll
                        ),
                        () => {
                            baseLayerImgUrl.forEach((item, index) => {
                                var obj = {}
                                obj[Object.keys(item)[0]] = []
                                Object.values(item)[0].forEach(citem => {
                                    var layer = new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                                        url: citem.url,
                                        rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(citem.rectangle[0], citem.rectangle[1], citem.rectangle[2], citem.rectangle[3])
                                    })
                                    obj[Object.keys(item)[0]].push({ layer, id: citem.id + Object.keys(item)[0], rectangle: citem.rectangle })
                                })
                                baseLayers.push(obj)
                            })
                            // baseLayerImgUrl.forEach((item, index) => {
                            //     var obj = {}
                            //     obj[Object.keys(item)[0]] = []
                            //     Object.values(item)[0].forEach(citem => {
                            //         var layer = new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                            //             url: citem.url,
                            //             rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(citem.rectangle[0], citem.rectangle[1], citem.rectangle[2], citem.rectangle[3])
                            //         })
                            //         obj[Object.keys(item)[0]].push({ layer, id: citem.id + Object.keys(item)[0], rectangle: citem.rectangle })
                            //     })
                            //     baseLayers.push(obj)
                            // })
                            // global.viewer.imageryLayers.addImageryProvider(
                            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                            //         format: 'image/jpeg',
                            //         show: true,
                            //         maximumLevel: 18
                            //     })
                            // )
                            // global.viewer.imageryLayers.addImageryProvider(
                            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
                            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                            //         format: 'image/jpeg',
                            //         show: true,
                            //         maximumLevel: 18
                            //     })
                            // )
                            that.addBaseLayer()
                            // global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                            //     url: '/wp/{z}/{x}/{y}.png',
                            //     fileExtension: 'png'
                            //     // minimumLevel: 19
                            // }))
                        },
                        0
                    )
@@ -236,7 +263,7 @@
                    // 2.5D视角限制
                    global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = that.zoomRange[0]
                    // 最大
                    global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
                    // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
                    // 设置相机缩小时的速率
                    global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000
                    // 设置相机放大时的速率
@@ -382,7 +409,9 @@
                    })
                    // 地图点击事件
                    global.viewer.on(global.DC.MouseEventType.CLICK, (e) => {
                        // console.log(e);
                        if (that.pinchFlag == true) {
                            return
                        }
                        if (e.overlay != undefined && e.layer.id == 'areaLayer') {
                            if (window.select.overlay != undefined) {
                                if (e.overlay != window.select.overlay) {
@@ -473,114 +502,128 @@
                        }
                    })
                    that.$nextTick(() => {
                        document.querySelector('.dc-zoom-controller').children[0].onclick = function () {
                            const scene = global.viewer.scene
                            const camera = scene.camera
                    // 双指事件
                    var scene = global.viewer.scene
                    var handler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(scene.canvas)
                            const focus = that._getCameraFocus(scene)
                            const cameraPosition = that._getCameraPosition(camera, focus, 1 / 2)
                            camera.flyTo({
                                destination: cameraPosition,
                                orientation: {
                                    heading: camera.heading,
                                    pitch: camera.pitch,
                                    roll: camera.roll
                                },
                                duration: 0.5,
                                convert: false,
                                complete: function () {
                                    var height = global.viewer.camera.positionCartographic.height
                    // 开始
                    handler.setInputAction(function (e) {
                        that.$store.commit('SET_PINCHFLAG', true)
                    }, global.DC.Namespace.Cesium.ScreenSpaceEventType.PINCH_START)
                                    if (that.dimension == '2.5D') {
                                        if (height < 98) {
                                            global.viewer.camera.setView({
                                                destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                                                    global.viewer.camera.positionCartographic.longitude,
                                                    global.viewer.camera.positionCartographic.latitude,
                                                    100
                                                ),
                                                orientation: {
                                                    // 指向
                                                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                                                    // 视角
                                                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                                                    roll: 0.0
                                                }
                                            })
                    // 结束
                    handler.setInputAction(function (e) {
                        that.$store.commit('SET_PINCHFLAG', false)
                    }, global.DC.Namespace.Cesium.ScreenSpaceEventType.PINCH_END)
                                            return
                                        }
                    // that.$nextTick(() => {
                    //     document.querySelector('.dc-zoom-controller').children[0].onclick = function () {
                    //         const scene = global.viewer.scene
                    //         const camera = scene.camera
                                        if (height > that.fivelayerNum - that.intervallayerNum) {
                                            viewerHeight = that.fivelayerNum
                                        } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
                                            viewerHeight = that.fourlayerNum
                                        } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
                                            viewerHeight = that.threelayerNum
                                        } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
                                            viewerHeight = that.twolayerNum
                                        } else if (height <= that.onelayerNum + that.intervallayerNum) {
                                            viewerHeight = that.onelayerNum
                                        }
                                    }
                                }
                            })
                        }
                    //         const focus = that._getCameraFocus(scene)
                    //         const cameraPosition = that._getCameraPosition(camera, focus, 1 / 2)
                    //         camera.flyTo({
                    //             destination: cameraPosition,
                    //             orientation: {
                    //                 heading: camera.heading,
                    //                 pitch: camera.pitch,
                    //                 roll: camera.roll
                    //             },
                    //             duration: 0.5,
                    //             convert: false,
                    //             complete: function () {
                    //                 var height = global.viewer.camera.positionCartographic.height
                        document.querySelector('.dc-zoom-controller').children[2].onclick = function () {
                            const scene = global.viewer.scene
                            const camera = scene.camera
                    //                 if (that.dimension == '2.5D') {
                    //                     if (height < 98) {
                    //                         global.viewer.camera.setView({
                    //                             destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    //                                 global.viewer.camera.positionCartographic.longitude,
                    //                                 global.viewer.camera.positionCartographic.latitude,
                    //                                 100
                    //                             ),
                    //                             orientation: {
                    //                                 // 指向
                    //                                 heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    //                                 // 视角
                    //                                 pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    //                                 roll: 0.0
                    //                             }
                    //                         })
                            const focus = that._getCameraFocus(scene)
                            const cameraPosition = that._getCameraPosition(camera, focus, -1)
                            camera.flyTo({
                                destination: cameraPosition,
                                orientation: {
                                    heading: camera.heading,
                                    pitch: camera.pitch,
                                    roll: camera.roll
                                },
                                duration: 0.5,
                                convert: false,
                                complete: function () {
                                    var height = global.viewer.camera.positionCartographic.height
                                    if (that.dimension == '2.5D') {
                                        if (height > 702) {
                                            global.viewer.camera.setView({
                                                destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                                                    global.viewer.camera.positionCartographic.longitude,
                                                    global.viewer.camera.positionCartographic.latitude,
                                                    702
                                                ),
                                                orientation: {
                                                    // 指向
                                                    heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                                                    // 视角
                                                    pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                                                    roll: 0.0
                                                }
                                            })
                    //                         return
                    //                     }
                                            return
                                        }
                    //                     if (height > that.fivelayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.fivelayerNum
                    //                     } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.fourlayerNum
                    //                     } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.threelayerNum
                    //                     } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.twolayerNum
                    //                     } else if (height <= that.onelayerNum + that.intervallayerNum) {
                    //                         viewerHeight = that.onelayerNum
                    //                     }
                    //                 }
                    //             }
                    //         })
                    //     }
                                        if (height > that.fivelayerNum - that.intervallayerNum) {
                                            viewerHeight = that.fivelayerNum
                                        } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
                                            viewerHeight = that.fourlayerNum
                                        } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
                                            viewerHeight = that.threelayerNum
                                        } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
                                            viewerHeight = that.twolayerNum
                                        } else if (height <= that.onelayerNum + that.intervallayerNum) {
                                            viewerHeight = that.onelayerNum
                                        }
                                    }
                                }
                            })
                        }
                    })
                    //     document.querySelector('.dc-zoom-controller').children[2].onclick = function () {
                    //         const scene = global.viewer.scene
                    //         const camera = scene.camera
                    //         const focus = that._getCameraFocus(scene)
                    //         const cameraPosition = that._getCameraPosition(camera, focus, -1)
                    //         camera.flyTo({
                    //             destination: cameraPosition,
                    //             orientation: {
                    //                 heading: camera.heading,
                    //                 pitch: camera.pitch,
                    //                 roll: camera.roll
                    //             },
                    //             duration: 0.5,
                    //             convert: false,
                    //             complete: function () {
                    //                 var height = global.viewer.camera.positionCartographic.height
                    //                 if (that.dimension == '2.5D') {
                    //                     if (height > 702) {
                    //                         global.viewer.camera.setView({
                    //                             destination: global.DC.Namespace.Cesium.Cartesian3.fromRadians(
                    //                                 global.viewer.camera.positionCartographic.longitude,
                    //                                 global.viewer.camera.positionCartographic.latitude,
                    //                                 702
                    //                             ),
                    //                             orientation: {
                    //                                 // 指向
                    //                                 heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
                    //                                 // 视角
                    //                                 pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
                    //                                 roll: 0.0
                    //                             }
                    //                         })
                    //                         return
                    //                     }
                    //                     if (height > that.fivelayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.fivelayerNum
                    //                     } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.fourlayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.fourlayerNum
                    //                     } else if (height <= that.fourlayerNum + that.intervallayerNum && height > that.threelayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.threelayerNum
                    //                     } else if (height <= that.twolayerNum + that.intervallayerNum && height > that.twolayerNum - that.intervallayerNum) {
                    //                         viewerHeight = that.twolayerNum
                    //                     } else if (height <= that.onelayerNum + that.intervallayerNum) {
                    //                         viewerHeight = that.onelayerNum
                    //                     }
                    //                 }
                    //             }
                    //         })
                    //     }
                    // })
                    that.mapMouseMove()
@@ -712,8 +755,8 @@
                const miny = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.latitude)// 弧度转经纬度
                const maxy = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.latitude)// 弧度转经纬度
                console.log('经度:' + minx + '----' + maxx)
                console.log('纬度:' + miny + '----' + maxy)
                // console.log('经度:' + minx + '----' + maxx)
                // console.log('纬度:' + miny + '----' + maxy)
                params.minx = minx
                params.maxx = maxx
@@ -739,7 +782,7 @@
                query: { introduce: position, address: lntLat, ...(query || {}) },
                useJWD: true // 仅使用经纬度
            }
            console.log(d)
            // console.log(d)
            that.$store.dispatch('setMobileWindows', d)
        },
@@ -771,7 +814,7 @@
        updateBaseLayer (flag) {
            const extent = this.getViewExtend()
            const array = baseLayers.filter(item => {
            const array = baseLayerImgUrl.filter(item => {
                return item[viewerHeight]
            })
@@ -841,7 +884,10 @@
                        sm.rectangle[3] < extent.maxy
                    )
                ) {
                    var layer = global.viewer.imageryLayers.addImageryProvider(sm.layer)
                    var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                        url: sm.url,
                        rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3])
                    }))
                    baseLayer.push({ layer, id: sm.id })
                }
@@ -944,7 +990,7 @@
                // 2.5D视角限制
                global.viewer.scene.screenSpaceCameraController.minimumZoomDistance = that.zoomRange[0]
                // 最大
                global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
                // global.viewer.scene.screenSpaceCameraController.maximumZoomDistance = that.zoomRange[1]
                // 设置相机缩小时的速率
                global.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000
                // 设置相机放大时的速率