绘制

shuishen

2022-10-25 d0ec0255ea2af46275ccf68e667fbb3f8248866a

绘制

 src/utils/EntityDraw.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-18 17:17:50
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-20 10:10:26
 * @LastEditTime: 2022-10-25 15:41:19
 * @FilePath: \srs-police-affairs\src\utils\EntityDraw.js
 * @Description: 
 * 
@@ -20,6 +20,8 @@
    activeShape = null

    drawCompletePosition = []

    type = ''

    constructor() {
        // 去除双击
@@ -44,7 +46,9 @@
        global.viewer.addLayer(this.drawPointLayer)
    }

    activate () {
    activate (type) {
        this.type = type

        this.drawCompletePosition = []

        this.clearLayer()
@@ -201,4 +205,17 @@
    clearLayer () {
        this.drawPolygonLayer.clear()
    }

    // 销毁
    destroy () {
        this.unRegisterEvents()
        this.drawPolygonLayer.clear()
        this.drawPolygonLayer.remove()
        this.drawPointLayer.clear()
        this.drawPointLayer.remove()

        this.activeShape = null
        this.activeShapePoints = []
        this.drawCompletePosition = []
    }
}

 src/views/video/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-10-19 15:22:24
 * @LastEditTime: 2022-10-25 15:40:54
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -17,7 +17,8 @@
        </div>

        <div class="draw-btn">
            <button @click="draw">绘制</button>
            <button @click="draw('polygon')">绘制面</button>
            <button @click="draw('polyline')">绘制线</button>
            <button @click="removeDrawLayer">清除</button>
        </div>

@@ -190,8 +191,8 @@
            this.monitoringList = [item]
        },

        draw () {
            graphicLayer.activate()
        draw (type) {
            graphicLayer.activate(type)
        },

        removeDrawLayer () {
@@ -205,6 +206,8 @@
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })

        graphicLayer.destroy()
    }
}
</script>