图片更换等，逻辑修改

shuishen

2022-04-13 75c50fbce61fcd54295ea4347ebf516990b583ee

 src/components/mobilemap/index.vue

@@ -42,7 +42,7 @@

let baseLayer = []

let viewerHeight = 240
let viewerHeight = 500

// baselayer
window.baselayer = null
@@ -114,25 +114,25 @@
            ],
            // areaLayer: null,
            // mapCenter: [115.871863, 28.743861, 160.0],
            mapCenter: [114.03928009, 27.63018386, 160.0],
            mapCenter: [114.03948009, 27.63018386, 500.0],
            //   mapCenter: [116.35381525 - 0.00035, 27.95839468 + 0.0025, 160.0],
            // 控制4层缩放
            // onelayerNum: 80,
            // towlayerNum: 120,
            // threelayerNum: 160,
            // forlayerNum: null,
            // fourlayerNum: null,
            // intervallayerNum: 20,
            // frislayertHeight: 120, // 默认高度
            onelayerNum: 60,
            towlayerNum: 120,
            threelayerNum: 180,
            forlayerNum: 240,
            onelayerNum: 100,
            towlayerNum: 200,
            threelayerNum: 300,
            fourlayerNum: 400,

            fivelayerNum: null,
            fivelayerNum: 500,
            sixlayerNum: null,

            intervallayerNum: 18,
            frislayertHeight: 240, // 默认高度
            intervallayerNum: 36,
            frislayertHeight: 500, // 默认高度
            useZoom: false, // 是否缩放 true 去掉了缩放， 抚州 false
            addOthers: false // 加入了活动底图以及抚州底图  抚州 true
        }
@@ -178,7 +178,7 @@
            this.onelayerNum = 100
            this.towlayerNum = 300
            this.threelayerNum = 500
            this.forlayerNum = 700
            this.fourlayerNum = 700
            this.fivelayerNum = null
            this.sixlayerNum = null

@@ -313,12 +313,12 @@
                // if (height > 200 && isSet) {
                //   conBack(200);
                // }
                // const usMun = that.forlayerNum ? that.forlayerNum : that.threelayerNum;
                // const usMun = that.fourlayerNum ? that.fourlayerNum : that.threelayerNum;
                const usMun = that.sixlayerNum
                    ? that.sixlayerNum
                    : that.fivelayerNum
                        ? that.fivelayerNum
                        : that.forlayerNum
                        : that.fourlayerNum
                if (window.height1s > usMun && isSet) {
                    if (that.useZoom) {
                        return
@@ -770,12 +770,12 @@
                that.$store.commit('set_frislayertHeight', that.frislayertHeight) // 送入默认弹窗高度
                that.$store.commit('set_zoomRange', [
                    that.onelayerNum,
                    // that.forlayerNum ? that.forlayerNum : that.threelayerNum,
                    // that.fourlayerNum ? that.fourlayerNum : that.threelayerNum,
                    that.sixlayerNum
                        ? that.sixlayerNum
                        : that.fivelayerNum
                            ? that.fivelayerNum
                            : that.forlayerNum,
                            : that.fourlayerNum,
                    that.useZoom,
                    that.addOthers
                ]) // 送入移动端缩放范围
@@ -893,6 +893,60 @@
        })
    },
    methods: {
        getViewExtend () {
            const params = {}
            const extend = global.viewer.camera.computeViewRectangle()
            if (typeof extend === 'undefined') {
                // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
                const canvas = global.viewer.scene.canvas
                const upperLeft = new global.DC.Namespace.Cesium.Cartesian2(0, 0)// canvas左上角坐标转2d坐标
                const lowerRight = new global.DC.Namespace.Cesium.Cartesian2(
                    canvas.clientWidth,
                    canvas.clientHeight
                )// canvas右下角坐标转2d坐标

                const ellipsoid = global.viewer.scene.globe.ellipsoid
                const upperLeft3 = global.viewer.camera.pickEllipsoid(
                    upperLeft,
                    ellipsoid
                )// 2D转3D世界坐标

                const lowerRight3 = global.viewer.camera.pickEllipsoid(
                    lowerRight,
                    ellipsoid
                )// 2D转3D世界坐标

                const upperLeftCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    upperLeft3
                )// 3D世界坐标转弧度
                const lowerRightCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    lowerRight3
                )// 3D世界坐标转弧度

                const minx = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.longitude)// 弧度转经纬度
                const maxx = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.longitude)// 弧度转经纬度

                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)

                params.minx = minx
                params.maxx = maxx
                params.miny = miny
                params.maxy = maxy
            } else {
                // 3D获取方式
                params.maxx = global.DC.Namespace.Cesium.Math.toDegrees(extend.east)
                params.maxy = global.DC.Namespace.Cesium.Math.toDegrees(extend.north)

                params.minx = global.DC.Namespace.Cesium.Math.toDegrees(extend.west)
                params.miny = global.DC.Namespace.Cesium.Math.toDegrees(extend.south)
            }
            return params // 返回屏幕所在经纬度范围
        },

        openPopupS (position, lntLat, query) {
            const that = this
            // 定制化窗体
@@ -905,6 +959,7 @@
            console.log(d)
            that.$store.dispatch('setMobileWindows', d)
        },

        flytos (jd, wd) {
            const height = this.frislayertHeight
            this.$store.dispatch('mapFlyTo', {
@@ -915,30 +970,104 @@
                noOpen: true
            })
        },

        addBaseLayer () {
            if (baseLayer.length > 0) {
                baseLayer.forEach(item => {
                    global.viewer.imageryLayers.remove(
                        item
                        item.layer
                    )
                })
            }

            baseLayer = []

            this.updateBaseLayer(false)
        },

        updateBaseLayer (flag) {
            const extent = this.getViewExtend()
            baseLayerImgUrl.forEach(item => {
                if (item[viewerHeight]) {
                    item[viewerHeight].forEach(sm => {
                        let startFlag = true

                        if (flag == true) {
                            baseLayer.forEach(dt => {
                                if (dt.id == sm.id) startFlag = false
                            })
                        }

                        if (startFlag == false) return

                        if (
                            (
                                sm.rectangle[0] > extent.minx &&
                                sm.rectangle[1] > extent.miny &&
                                sm.rectangle[2] < extent.maxx &&
                                sm.rectangle[3] < extent.maxy
                            ) ||
                            (
                                sm.rectangle[0] < extent.minx &&
                                sm.rectangle[1] < extent.maxy &&
                                sm.rectangle[2] > extent.minx &&
                                sm.rectangle[3] > extent.maxy
                            ) ||
                            (
                                sm.rectangle[0] < extent.maxx &&
                                sm.rectangle[1] < extent.maxy &&
                                sm.rectangle[2] > extent.maxx &&
                                sm.rectangle[3] > extent.maxy
                            ) ||
                            (
                                sm.rectangle[0] < extent.maxx &&
                                sm.rectangle[1] < extent.miny &&
                                sm.rectangle[2] > extent.maxx &&
                                sm.rectangle[3] > extent.miny
                            ) ||
                            (
                                sm.rectangle[0] < extent.minx &&
                                sm.rectangle[1] < extent.miny &&
                                sm.rectangle[2] > extent.minx &&
                                sm.rectangle[3] > extent.miny
                            ) ||
                            (
                                sm.rectangle[0] > extent.minx &&
                                sm.rectangle[1] < extent.maxy &&
                                sm.rectangle[2] < extent.maxx &&
                                sm.rectangle[3] > extent.maxy
                            ) ||
                            (
                                sm.rectangle[0] > extent.minx &&
                                sm.rectangle[1] > extent.miny &&
                                sm.rectangle[2] > extent.maxx &&
                                sm.rectangle[3] < extent.maxy
                            ) ||
                            (
                                sm.rectangle[0] > extent.minx &&
                                sm.rectangle[1] < extent.miny &&
                                sm.rectangle[2] < extent.maxx &&
                                sm.rectangle[3] > extent.miny
                            ) ||
                            (
                                sm.rectangle[0] < extent.minx &&
                                sm.rectangle[1] > extent.miny &&
                                sm.rectangle[2] > extent.minx &&
                                sm.rectangle[3] < extent.maxy
                            )
                        ) {
                        var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
                            url: `${sm.url}?m=${Math.random()}`,
                                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)
                            baseLayer.push({ layer, id: sm.id })
                        }
                    })
                }
            })
        },

        // 按钮控制视图改变得事件
        controlButton () {
            const that = this
@@ -948,7 +1077,12 @@
                        return
                    }
                    if (that.dimension == '2.5D') {
                        if (viewerHeight == that.forlayerNum) {
                        if (viewerHeight == that.fivelayerNum) {
                            that.butSetViews(that.fourlayerNum)
                            return
                        }

                        if (viewerHeight == that.fourlayerNum) {
                            that.butSetViews(that.threelayerNum)
                            return
                        }
@@ -982,11 +1116,17 @@
                        }

                        if (viewerHeight == that.threelayerNum) {
                            that.butSetViews(that.forlayerNum)
                            that.butSetViews(that.fourlayerNum)
                            return
                        }

                        if (viewerHeight == that.fourlayerNum) {
                            that.butSetViews(that.fivelayerNum)
                        }
                    }
                }
        },

        // 位置更改并且重新加载视图
        butSetViews (num) {
            viewerHeight = num
@@ -1008,6 +1148,7 @@

            this.addBaseLayer()
        },

        // 手动控制地图缩放得
        mapMouseMove () {
            const that = this
@@ -1016,11 +1157,19 @@
                if (that.useZoom) {
                    return
                }

                if (that.dimension == '2.5D') {
                    var height = global.viewer.camera.positionCartographic.height
                    if (that.startWheel == true) {
                        if (height < viewerHeight - that.intervallayerNum) {
                            if (viewerHeight == that.forlayerNum) {
                            if (viewerHeight == that.fivelayerNum) {
                                that.butSetViews(that.fourlayerNum)

                                that.startWheel = false
                                return
                            }

                            if (viewerHeight == that.fourlayerNum) {
                                that.butSetViews(that.threelayerNum)

                                that.startWheel = false
@@ -1055,7 +1204,14 @@
                            }

                            if (viewerHeight == that.threelayerNum) {
                                that.butSetViews(that.forlayerNum)
                                that.butSetViews(that.fourlayerNum)

                                that.startWheel = false
                                return
                            }

                            if (viewerHeight == that.fourlayerNum) {
                                that.butSetViews(that.fivelayerNum)

                                that.startWheel = false
                            }
@@ -1079,6 +1235,8 @@
                        }
                    }

                    that.updateBaseLayer(true)

                    setTimeout(() => {
                        that.startWheel = true
                    }, 100)
@@ -1094,11 +1252,6 @@
    width: 100%;
    height: 100%;
    position: relative;
    // canvas {
    //     width: 300%;
    //     height: 300%;
    //     transform: translate(-50%, -50%);
    // }
}
.heights {
    background-color: #fff;