首页地图标注

shuishen

2022-09-20 ce7d964021bab5a421f6e264c0bf59f4190e9efc

首页地图标注

 public/img/icon/car.png

 public/img/icon/map-panorama.png

 public/img/icon/phone.png

 public/img/icon/video.png

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-19 18:19:53
 * @LastEditTime: 2022-09-20 11:42:23
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -181,11 +181,12 @@
                }
            })

            // global.viewer.scene.globe.depthTestAgainstTerrain = false

            // 去除logo
            let primitiveArr = global.viewer.scene.primitives._primitives
            global.viewer.scene.primitives.remove(primitiveArr[0])

            // global.viewer.scene.globe.depthTestAgainstTerrain = true

            // 已声明的图层添加到地图上
            siteEntitylayers = new global.DC.VectorLayer('siteEntitylayers')
@@ -401,7 +402,7 @@
         * @param {*} url 图标地址
         */
        addSiteEntity (item, url) {
            const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lon), Number(item.lat)), url)
            const billboard = new global.DC.Billboard(new global.DC.Position(Number(item.lng), Number(item.lat)), url)
            billboard.size = [20, 28]
            billboard.attrParams = item
            siteEntitylayers.addOverlay(billboard)
@@ -419,8 +420,10 @@
        mapAddLayer (layerName, type) {
            if (type == 'VectorLayer') {
                if (!layersObjcect[layerName]) layersObjcect[layerName] = null
                layersObjcect[layerName] = new global.DC.VectorLayer('layerName')
                global.viewer.addLayer(layersObjcect[layerName])

                layersObjcect[layerName] = new global.DC.VectorLayer(layerName)

                layersObjcect[layerName].addTo(global.viewer)
            }
        },

@@ -456,15 +459,20 @@
         * @param {*} incident 添加的点位事件
         */
        layerPointAdd (layerName, type, params, incident) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

                console.log(global.viewer.imageryLayers)
            }

            let pointElement

            if (type == "billboard") {
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lon), Number(params.lat)), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(params.alt)), params.url)

                pointElement.size = [20, 28]
                pointElement.size = [32, 32]
            } else if (type == "label") {
                pointElement = new global.DC.Label(new global.DC.Position(Number(params.lon), Number(params.lat), 0), params.url)
                pointElement = new global.DC.Label(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url)

                pointElement.setStyle({
                    fillColor: global.DC.Color.CRIMSON,
@@ -475,7 +483,9 @@
                    pixelOffset: { x: 0, y: -24 }
                })
            }

            pointElement.attrParams = params

            layersObjcect[layerName].addOverlay(pointElement)
            pointElement.on(global.DC.MouseEventType.CLICK, incident)
        },
@@ -489,13 +499,14 @@
        layerPolygonAdd (layerName, positions, material) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

                layersObjcect[layerName].allowDrillPicking = true
            }

            let polygon = new global.DC.Polygon(positions)

            polygon.setStyle({
                material: material,
                extrudedHeight: 0,
                perPositionHeight: true
            })


 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-20 10:01:44
 * @LastEditTime: 2022-09-20 14:30:31
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -117,16 +117,16 @@
                <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="carLayerShow">警车</el-checkbox>
                <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="phoneLayerShow">手台</el-checkbox>
                <el-checkbox v-model="phoneLayerShow" @change="phoneChange">手台</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="videoLayerShow">监控</el-checkbox>
                <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="panoramaLayerShow">全景</el-checkbox>
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
        </div>
    </div>
@@ -140,8 +140,76 @@
            houseLayerShow: false,
            carLayerShow: false,
            phoneLayerShow: false,
            videoLayerShow: false,
            monitoringLayerShow: false,
            panoramaLayerShow: false,
            carList: [{
                name: '1号警车',
                lng: 115.998703,
                lat: 28.691435,
                alt: 100,
                url: '/img/icon/car.png'
            }, {
                name: '2号警车',
                lng: 115.984703,
                lat: 28.673435,
                alt: 100,
                url: '/img/icon/car.png'
            }, {
                name: '3号警车',
                lng: 116.009054,
                lat: 28.674692,
                alt: 100,
                url: '/img/icon/car.png'
            }],

            phoneList: [{
                name: '1号手台',
                lng: 116.007370,
                lat: 28.662075,
                alt: 100,
                url: '/img/icon/phone.png'
            }, {
                name: '2号手台',
                lng: 116.033595,
                lat: 28.702225,
                alt: 100,
                url: '/img/icon/phone.png'
            }, {
                name: '3号手台',
                lng: 115.99685299,
                lat: 28.70599572,
                alt: 100,
                url: '/img/icon/phone.png'
            }],

            monitoringList: [{
                name: '1号监控',
                lng: 116.025398,
                lat: 28.663066,
                alt: 100,
                url: '/img/icon/video.png'
            }, {
                name: '2号监控',
                lng: 116.0145001,
                lat: 28.694361,
                alt: 100,
                url: '/img/icon/video.png'
            }, {
                name: '3号监控',
                lng: 116.018293,
                lat: 28.624986,
                alt: 100,
                url: '/img/icon/video.png'
            }],

            panoramaList: [{
                name: '1号监控',
                lng: 116.027002,
                lat: 28.683302,
                alt: 100,
                url: '/img/icon/map-panorama.png'
            }],

            arr: [{ 'type': '孤寡老人', 'num': '0', 'radio': '0.00%' }, { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' }, { 'type': '上访人员', 'num': '8', 'radio': '14.00%' }, { 'type': '涉毒', 'num': '15', 'radio': '27.00%' }, { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' }, { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }]
        }
    },
@@ -554,7 +622,79 @@
                    titlesetName: 'sdTilesetLayer'
                })
            }
        }
        },

        carChange (e) {
            if (e == true) {
                this.carList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'carLayers',
                        type: "billboard",
                        params: item,
                        incident: (e) => { console.log(e) }
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'carLayers',
                    type: 'VectorLayer'
                })
            }
        },

        phoneChange (e) {
            if (e == true) {
                this.phoneList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'phoneLayers',
                        type: "billboard",
                        params: item,
                        incident: (e) => { console.log(e) }
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'phoneLayers',
                    type: 'VectorLayer'
                })
            }
        },

        monitoringChange (e) {
            if (e == true) {
                this.monitoringList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'monitoringLayers',
                        type: "billboard",
                        params: item,
                        incident: (e) => { console.log(e) }
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })
            }
        },

        panoramaChange (e) {
            if (e == true) {
                this.panoramaList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'panoramaLayers',
                        type: "billboard",
                        params: item,
                        incident: (e) => { console.log(e) }
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'panoramaLayers',
                    type: 'VectorLayer'
                })
            }
        },
    },

    destroyed () {
@@ -566,6 +706,26 @@
        this.$EventBus.$emit('removeMxTileset', {
            titlesetName: 'sdTilesetLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'phoneLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'panoramaLayers',
            type: 'VectorLayer'
        })
    },
}
</script>