空间查询点击定位功能

guanqb

2022-11-23 06d7620cedc2bd76d15db3e0187d45420961e9ab

空间查询点击定位功能

 src/components/map/index.vue

@@ -65,6 +65,7 @@
    monitoringLayer: null,
    panoramaLayer: null
}
let polygonObj = {}

let tilesetLayer = null

@@ -290,7 +291,11 @@
        })

        this.$EventBus.$on('layerPolygonAdd', (params) => {
            that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition)
            if ('polygonName' in params) {
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, params.polygonName)
            } else {
                that.layerPolygonAdd(params.layerName, params.positions, params.material, params.distanceDisplayCondition, 'polygon')
            }
        })

        this.$EventBus.$on('layerPolylineAdd', (params) => {
@@ -316,7 +321,7 @@
        })

        this.$EventBus.$on('flytoLayer', (params) => {
            that.flytoLayer(params.layerName, params.duration)
            that.flytoLayer(params.polygonName, params.duration)
        })

    },
@@ -507,22 +512,23 @@
         * @param {*} material 颜色
         * @param {*} distanceDisplayCondition 可见距离
         */
        layerPolygonAdd (layerName, positions, material, distanceDisplayCondition) {
        layerPolygonAdd (layerName, positions, material, distanceDisplayCondition, polygonName) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

                layersObjcect[layerName].allowDrillPicking = true
            }

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

            polygon.setStyle({
            // let polygon = new global.DC.Polygon(positions)
            // let polygonObj = {}//要在全局定义
            polygonObj[polygonName] = new global.DC.Polygon(positions)
            // polygon.setStyle({
            polygonObj[polygonName].setStyle({
                material: material,
                distanceDisplayCondition: distanceDisplayCondition,
                perPositionHeight: true,
            })

            layersObjcect[layerName].addOverlay(polygon)
            // layersObjcect[layerName].addOverlay(polygon)
            layersObjcect[layerName].addOverlay(polygonObj[polygonName])
        },

        /**
@@ -585,12 +591,12 @@
        // sdTilesetLayer

        /**
        * 飞到指定图层
        * @param {*} layerName 图层名称
        * 飞到指定范围
        * @param {*} polygonName 范围名称
        * @param {*} duration 时间
        */
        flytoLayer (layerName, duration = 3) {
            global.viewer.flyTo(layersObjcect[layerName], duration)
        flytoLayer (polygonName, duration = 3) {
            global.viewer.flyTo(polygonObj[polygonName], duration)
        },

        /**

 src/views/video/region.vue

@@ -49,11 +49,22 @@
                            </el-table-column>
                            <el-table-column prop="id" label="操作" min-width="50%">
                                <template slot-scope="scope">
                                    <button
                                        class="btn"
                                    <el-button
                                        @click="deleteRegionSaveList(scope.row.id)"
                                    >删除</button>
                                    <button class="btn" @click="flytoRange(scope.row)">定位</button>
                                        type="text"
                                        size="small"
                                        title="删除"
                                    >
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                    <el-button
                                        @click="flytoRange(scope.row)"
                                        type="text"
                                        size="small"
                                        title="定位"
                                    >
                                        <i class="el-icon-location"></i>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
@@ -121,7 +132,6 @@
    created () {
        this.getVideoList()
        this.getRegionSaveList()

    },

    mounted () {
@@ -144,6 +154,7 @@
        getRegionSaveList () {
            getRegionSaveList(1, 10).then(res => {
                this.saveRangeList = res.data.data.records
                this.initRangeListLayer()
            })
        },

@@ -155,8 +166,36 @@
        },

        flytoRange (data) {
            let positionStr = data.positions
            positionStr = data.positions.slice(11, positionStr.length - 1)
            this.$EventBus.$emit('flytoLayer', {
                polygonName: 'polygon' + data.id,
                duration: 3
            })

        },

        initRangeListLayer () {
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'rangeLayer',
                type: 'VectorLayer'
            })
            this.saveRangeList.forEach(item => {
                let positionStr = this.convertPositionDate(item.positions)
                let polygonName = 'polygon' + item.id
                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'rangeLayer',
                    positions: positionStr,
                    material: global.DC.Namespace.Cesium.Color.fromBytes(
                        255, 0, 0, 100
                    ),
                    polygonName: polygonName
                })
            })

        },

        convertPositionDate (data) {
            let positionStr = data
            positionStr = data.slice(11, positionStr.length - 1)
            let positionArr = positionStr.split(",")
            positionArr = positionArr.slice(0, positionArr.length - 1)
            let positionNewStr = ''
@@ -165,22 +204,7 @@
                let lat = item.split(' ')[1]
                positionNewStr += lng + ',' + lat + ';'
            })
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'rangeLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPolygonAdd', {
                layerName: 'rangeLayer',
                positions: positionNewStr,
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    255, 0, 0, 100
                ),
            })
            this.$EventBus.$emit('flytoLayer', {
                layerName: 'rangeLayer',
                duration: 3
            })

            return positionNewStr
        },

        async getDevices (id) {