1

shuishen

2022-11-17 e236ac88fb02fb685d2c8757cd100a9f85941905

1

 src/utils/EntityDraw.js

@@ -2,17 +2,24 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-10-18 17:17:50
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-28 16:08:49
 * @LastEditTime: 2022-11-17 16:29:06
 * @FilePath: \srs-police-affairs\src\utils\EntityDraw.js
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */

// 1m的经度
const lngOneM = 0.00001141
// 1m的纬度
const latOneM = 0.00000899

export default class EntityDraw {

    drawPolygonLayer = null
    drawPolylineLayer = null

    drawPolyLineGonLayer = null

    drawPointLayer = null

@@ -23,6 +30,24 @@
    drawCompletePosition = []

    type = ''

    emitPointLayer = null

    eventHandler = null

    EditMoveCenterEntity = null

    Cesium = null

    EditMoveCenterPositoin = null

    isEditing = false

    editVertext = null

    lastEventData = null

    cb = () => { }

    constructor() {
        // 去除双击
@@ -35,6 +60,10 @@
        this.getLeftEvent = this.getLeftEvent.bind(this)
        this.getMoveEvent = this.getMoveEvent.bind(this)
        this.getRightEvent = this.getRightEvent.bind(this)

        this.Cesium = global.DC.Namespace.Cesium

        this.eventHandler = new global.DC.Namespace.Cesium.ScreenSpaceEventHandler(global.viewer.scene.canvas)
    }

    initLayer () {
@@ -45,14 +74,21 @@
        // 添加线图层
        this.drawPolylineLayer = new global.DC.VectorLayer('drawPolylineLayer')
        global.viewer.addLayer(this.drawPolylineLayer)

        this.drawPolyLineGonLayer = new global.DC.VectorLayer('drawPolyLineGonLayer')
        global.viewer.addLayer(this.drawPolyLineGonLayer)

        // 添加点图层
        this.drawPointLayer = new global.DC.VectorLayer('drawPointLayer')
        global.viewer.addLayer(this.drawPointLayer)

        // 添加编辑点图层
        this.emitPointLayer = new global.DC.VectorLayer('emitPointLayer')
        global.viewer.addLayer(this.emitPointLayer)
    }

    activate (type) {
    // draw执行这个
    activate (type, cb) {
        this.cb = cb
        this.type = type

        this.drawCompletePosition = []
@@ -63,8 +99,13 @@
            this.clickInTheProcess()
        }

        //鼠标左键点击事件 鼠标左键点击拾取需要编辑的对象
        this.registerEvents()


        this.initLeftDownEventHandler()
        this.initLeftUpEventHandler()

        this.initMouseMoveEventHandler()
    }

    deactivate () {
@@ -76,8 +117,14 @@
    // 注册
    registerEvents () {
        global.viewer.tooltip.enable = true

        // 这个是左键单击也就是添加点
        global.viewer.on(global.DC.MouseEventType.CLICK, this.getLeftEvent)

        // 这个是鼠标移动
        global.viewer.on(global.DC.MouseEventType.MOUSE_MOVE, this.getMoveEvent)

        // 这个是鼠标右键得，就是最后绘制结束 你要控制嘛 我调下
        global.viewer.on(global.DC.MouseEventType.RIGHT_CLICK, this.getRightEvent)
    }

@@ -178,7 +225,6 @@
    }

    rightEvent (event) {

        if (this.type === "polyline") {
            if (this.activeShapePoints.length < 2) {
                global.viewer.tooltip.showAt(event.windowPosition, '不能绘制成线，请继续添加点')
@@ -190,12 +236,15 @@
                return
            }
        }


        this.lastEventData = event.windowPosition
        this.cb(this.lastEventData)
        this.terminateShape()
    }

    // 清除
    getLastEventData () {
        return this.lastEventData
    }

    terminateShape () {
        this.activeShapePoints.pop()

@@ -207,8 +256,6 @@

        })

        console.log(JSON.stringify(this.drawCompletePosition), 456)

        if (this.type === "polyline") {

            let polyline = new global.DC.Polyline(this.drawCompletePosition)
@@ -219,17 +266,15 @@
                )
            })

            let coords = global.DC.GeoTools.polylineBuffer(this.drawCompletePosition, 100)

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

            polygon.setStyle({
                material: global.DC.Color.RED.withAlpha(0.4)
            })

            this.drawPolylineLayer.addOverlay(polygon)

            this.drawPolylineLayer.addOverlay(polyline)

            this.addPolyLineGon(100)

            this.EditMoveCenterPositoin = this.Cesium.Cartesian3.fromDegrees(this.drawCompletePosition[this.drawCompletePosition.length - 1].lng + 200 * lngOneM, this.drawCompletePosition[this.drawCompletePosition.length - 1].lat + 200 * latOneM, 0)

            global.viewer.scene.globe.depthTestAgainstTerrain = true

            this.createEditMoveCenterEntity()
        } else {
            let polygon = new global.DC.Polygon(this.drawCompletePosition)

@@ -242,12 +287,9 @@
            this.drawPolygonLayer.addOverlay(polygon)
        }



        this.clickInTheProcess()
    }

    // 清空
    clickInTheProcess () {
        if (this.activeShape != null) {
            global.viewer.entities.remove(this.activeShape)
@@ -266,11 +308,17 @@
    clearLayer () {
        this.drawPolygonLayer.clear()
        this.drawPolylineLayer.clear()
        this.drawPolyLineGonLayer.clear()

        this.removeViewerEvent()

        global.viewer.entities.removeAll()
    }

    // 销毁
    destroy () {
        this.unRegisterEvents()
        this.removeViewerEvent()

        this.drawPolygonLayer.clear()
        this.drawPolygonLayer.remove()
@@ -278,11 +326,123 @@
        this.drawPolylineLayer.clear()
        this.drawPolylineLayer.remove()

        this.drawPolyLineGonLayer.clear()
        this.drawPolyLineGonLayer.remove()

        this.drawPointLayer.clear()
        this.drawPointLayer.remove()

        global.viewer.entities.removeAll()

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

    addPolyLineGon (num) {
        this.drawPolyLineGonLayer.clear()

        let coords = global.DC.GeoTools.polylineBuffer(this.drawCompletePosition, num)

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

        polygon.setStyle({
            material: global.DC.Color.RED.withAlpha(0.4)
        })

        this.drawPolyLineGonLayer.addOverlay(polygon)
    }

    //场景鼠标左键按下事件
    initLeftDownEventHandler () {
        const that = this
        that.eventHandler.setInputAction((e) => {
            let id = global.viewer.scene.pick(e.position)
            // 拾取到对象 判断拾取到的对象类型 
            if (!id || !id.id || !id.id.type) return
            //拾取到具有type 属性的entity对象  
            if (id.id.type == "EditVertex" || id.id.type == "EditMove") {
                that.isEditing = true
                //禁用场景的旋转移动功能 保留缩放功能
                global.viewer.scene.screenSpaceCameraController.enableRotate = false
                //改变鼠标状态
                global.viewer.enableCursorStyle = false
                document.body.style.cursor = "move"
                that.editVertext = id.id
            }

        }, that.Cesium.ScreenSpaceEventType.LEFT_DOWN)
    }

    //场景鼠标左键抬起事件
    initLeftUpEventHandler () {
        const that = this
        that.eventHandler.setInputAction(((e) => {
            if (!that.isEditing) return
            that.isEditing = false
            global.viewer.scene.screenSpaceCameraController.enableRotate = true
            global.viewer.enableCursorStyle = true
            document.body.style.cursor = "default"
        }), that.Cesium.ScreenSpaceEventType.LEFT_UP)
    }

    getScope (position) {
        let Scope = Math.abs(position.lng - this.drawCompletePosition[this.drawCompletePosition.length - 1].lng) / lngOneM - 200

        return Scope > 100 ? Scope : 100
    }

    //场景鼠标移动事件
    initMouseMoveEventHandler () {
        const that = this
        that.eventHandler.setInputAction(((e) => {
            // 鼠标移动的位置
            let pickPosition = global.viewer.scene.pickPosition(e.endPosition)
            if (!pickPosition) return
            if (!that.isEditing) return

            if (that.editVertext.type == "EditMove") {

                let startPosition = that.EditMoveCenterPositoin

                if (!startPosition) return

                let position = global.DC.Transform.transformCartesianToWGS84(pickPosition)

                that.addPolyLineGon(that.getScope(position))
            }

            that.isEdited = true

            that.EditMoveCenterPositoin = pickPosition
        }), that.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    }

    removeViewerEvent () {
        if (this.eventHandler && this.eventHandler != null) {
            this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.LEFT_DOWN)
            this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.LEFT_UP)
            this.eventHandler.removeInputAction(this.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        }
    }

    createEditMoveCenterEntity () {
        const that = this
        that.EditMoveCenterEntity = global.viewer.entities.add({
            position: new that.Cesium.CallbackProperty(e => {
                return that.EditMoveCenterPositoin
            }, false),

            type: "EditMove",

            point: {
                color: that.Cesium.Color.RED.withAlpha(0.8),
                pixelSize: 12,
                outlineColor: that.Cesium.Color.WHITE.withAlpha(0.6),
                outlineWidth: 4,
                disableDepthTestDistance: 2000,
                heightReference: that.Cesium.HeightReference.CLAMP_TO_GROUND
            },
        })
    }
}

 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-11-14 16:22:59
 * @LastEditTime: 2022-11-17 16:22:12
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -157,7 +157,11 @@
        },

        draw (type) {
            graphicLayer.activate(type)

            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
            })

        },

        removeDrawLayer () {