shuishen
2023-05-08 e24f70ababdee2b4fdce71c6b80a9bc928fa0331
src/views/activity/components/drawBtnBox.vue
@@ -16,16 +16,10 @@
                        </button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon1')" title="普通群众">普通群众</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon2')" title="保护对象">保护对象</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon3')" title="危险人物">危险人物</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon4')" title="自定义图片标注">自定义图片标注</button>
                    </li>
                    <li>
                        <button @click="drawThreeArrow('billboard', 'icon', 'icon5')" title="其他">其他</button>
                    </li>
                </ul>
            </div>
@@ -45,7 +39,7 @@
                <ul>
                    <li>
                        <!-- <el-button
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ></el-button>-->
                        ></el-button>-->
                        <button @click="drawThreeArrow('polyline', 'policecar', 'polyline')" title="巡逻路线">
                            <img src="/img/icon/route1.png" style="height:100%" />
                        </button>
@@ -63,7 +57,7 @@
} from '@/api/activity/index.js'
import Plot from "@/utils/plot/Plot.js"
import { getLineSpeed } from '@/utils/turfPolygon'
let addPlotOverlayData = null
let currentEmitEl = null
@@ -89,9 +83,6 @@
            drawThreeTool = new Plot(global.viewer, {
                clampToModel: true,
                icon_center: "/img/draw/red.png", // 自定义的中心点图标
                icon_anchor: "/img/draw/red.png", //自定义的锚点图标
                icon_midAnchor: "/img/draw/blue.png", //自定义的中心锚点图标
            })
            // global.viewer.scene.globe.depthTestAgainstTerrain = true
@@ -145,6 +136,10 @@
                case 'icon4':
                    imgUrl = 'custom'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 255)
                    break
                case 'icon5':
                    imgUrl = 'rest'
                    material = global.DC.Namespace.Cesium.Color.fromBytes(0, 183, 238, 255)
                    break
            }
@@ -242,13 +237,51 @@
            currentEmitEl = overlayData
            global.viewer.scene.globe.depthTestAgainstTerrain = true
            if (overlayData.customType == 'polygon' || overlayData.customType == 'brokenline') {
                drawThreeTool.edit(overlayData, (e) => {
                    let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                    const altitude = e.positions.map(item => item.alt).join()
                    this.updateSecurityPlot({ id: overlayData.attrParams.id, position: polygonPosition, altitude })
                    global.viewer.scene.globe.depthTestAgainstTerrain = false
                    currentStatus = ''
                }, true)
                if (overlayData.attrParams.item.areaType != 2) {
                    drawThreeTool.edit(overlayData, (e) => {
                        let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                        const altitude = e.positions.map(item => item.alt).join()
                        this.updateSecurityPlot({ id: overlayData.attrParams.id, position: polygonPosition, altitude })
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        currentStatus = ''
                    }, true)
                } else {
                    overlayData.show = false
                    // this.$parent.removeArrowsListLayer(overlayData)
                    let altitude = overlayData.attrParams.item.altitude.split(',')
                    let position = overlayData.attrParams.item.position.slice(11, overlayData.attrParams.item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                    let positions
                    if (altitude && altitude.length) positions = position.split(';').map((item, index) => `${item},${altitude[index]}`).join(';')
                    let coverage = new global.DC.Polygon(positions)
                    let color = this.$parent.getCoverageColor(overlayData.attrParams.item.color)
                    coverage.setStyle({
                        material: color.curColor,
                        extrudedHeight: null,
                        perPositionHeight: this.$parent.currentPlotType == 3 ? true : false,
                        closeTop: false,
                        closeBottom: false,
                        // classificationType: global.DC.Namespace.Cesium.ClassificationType.TERRAIN
                        outline: true,
                        outlineColor: color.outColor,
                        outlineWidth: 4.0,
                    })
                    coverage.customType = 'polygon'
                    this.$parent.addArrowsListLayer(coverage)
                    drawThreeTool.edit(coverage, (e) => {
                        this.$parent.removeArrowsListLayer(coverage)
                        let polygonPosition = e.positions.map(item => `${item.lng} ${item.lat}`).join()
                        const altitude = e.positions.map(item => item.alt).join()
                        this.updateSecurityPlot({ id: overlayData.attrParams.id, position: polygonPosition, areaType: 2, altitude }, overlayData)
                        global.viewer.scene.globe.depthTestAgainstTerrain = false
                        currentStatus = ''
                    }, true)
                }
            } else if (overlayData.customType == 'billboard') {
                drawThreeTool.edit(overlayData, (e) => {
                    const position = `${e.position.lng} ${e.position.lat},${e.position.lng} ${e.position.lat}`
@@ -283,10 +316,27 @@
            let b = parseInt(item.color.slice(5, 7), 16)
            let a = Math.floor(Number(item.color.split(',')[1]) * 2.55) ? Math.floor(Number(item.color.split(',')[1]) * 2.55) : 255
            let color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, a)
            let position = item.position.slice(12, item.position.length - 2).replace(/,/g, ';').replace(/ /g, ',')
            let positions = position.split(';').map((item, index) => `${item},140`)
            positions.push(positions[0])
            positions = positions.join(';')
            if (item.type == 5 && item.areaType == 2) {
                this.$parent.removeArrowsListLayer(addPlotOverlayData)
                addPlotOverlayData = new global.DC.Wall(positions)
                addPlotOverlayData.customType = 'polygon'
                this.$parent.addArrowsListLayer(addPlotOverlayData)
            }
            addPlotOverlayData.attrParams = { id: item.id, color: item.color, item }
            addPlotOverlayData.on(global.DC.MouseEventType.CLICK, this.$parent.reeditArrowClick)
            addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
            addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
            if (item.type == 6 || item.type == 7 || item.type == 8 || item.type == 11) {
                const height = item.altitude.split(',')
                let position = item.position.slice(12, item.position.length - 2).split(',')[0].split(' ')
@@ -303,14 +353,30 @@
                    alt: Number(height[0]),
                }
                addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OVER, this.$parent.pointMouseOver)
                addPlotOverlayData.on(global.DC.MouseEventType.MOUSE_OUT, this.$parent.pointMouseOut)
                this.$parent.isHaveFactor = true
            } else if (item.type == 5) {
                addPlotOverlayData.setStyle({
                    material: color,
                    outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                })
                if (item.areaType != 2) {
                    addPlotOverlayData.setStyle({
                        material: color,
                        outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                    })
                } else {
                    addPlotOverlayData.setStyle({
                        material: new global.DC.WallImageTrailMaterialProperty({
                            image: '/images/jjx.png',
                            color: color,
                            repeat: {
                                x: getLineSpeed(position.split(';').map(item => {
                                    item.split(',')
                                    return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                })), y: 1
                            },
                            speed: 10
                        })
                    })
                }
                this.$parent.isHaveArrow = true
            } else {
@@ -368,8 +434,10 @@
                    layerName: 'newCarDrawLineLayers',
                    positions: positionStr,
                    material: color,
                    params: data,
                    incident: this.$parent.lineOverlayTypeClick
                    params: { ...data, item: data, data: data },
                    incident: this.$parent.lineOverlayTypeClick,
                    mouseOverIncident: this.$parent.pointMouseOver,
                    mouseOutIncident: this.$parent.pointMouseOut
                })
                this.$parent.isHaveLine = true
@@ -418,11 +486,32 @@
                let outColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
                overlay.attrParams.color = params.color
                let position = overlay.attrParams.item.position.slice(11, overlay.attrParams.item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                if (overlay.customType == 'polygon') {
                    overlay.setStyle({
                        material: color,
                        outlineColor: outColor
                    })
                    if (overlay.attrParams.item.areaType != 2) {
                        overlay.setStyle({
                            material: color,
                            outlineColor: outColor
                        })
                    } else {
                        overlay.setStyle({
                            material: new global.DC.WallImageTrailMaterialProperty({
                                image: '/images/jjx.png',
                                color: color,
                                repeat: {
                                    x: getLineSpeed(position.split(';').map(item => {
                                        item.split(',')
                                        return [Number(item.split(',')[0]), Number(item.split(',')[1])]
                                    })), y: 1
                                },
                                speed: 10
                            })
                        })
                    }
                } else if (overlay.customType == 'billboard') {
                    overlay.setStyle({
                        color: color
@@ -464,6 +553,27 @@
            if ('remark' in params && params.remark != '') {
                overlay.attrParams.item.remark = params.remark
            }
            if ('type' in params && params.type != '') {
                overlay.attrParams.item.type = params.type
            }
            if (params.areaType == 2) {
                overlay.attrParams.item.altitude = params.altitude
                overlay.attrParams.item.position = `LINESTRING(${params.position})`
                let positions = params.position.split(',').map(item => {
                    item = item.split(' ')
                    item = new global.DC.Position(item[0], item[1], 140)
                    return item
                })
                positions.push(positions[0])
                overlay.positions = positions
                overlay.show = true
            }
        },
@@ -539,13 +649,16 @@
                    overlay.attrParams.polygonPositionStr = positionStr
                    overlay.attrParams.color = params.color
                    overlay.attrParams.width = params.width
                    overlay.attrParams.remark = params.remark
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'newCarDrawLineLayers',
                        positions: positionStr,
                        material: color,
                        params: overlay.attrParams,
                        incident: this.$parent.lineOverlayTypeClick
                        params: { ...overlay.attrParams, item: overlay.attrParams, data: overlay.attrParams },
                        incident: this.$parent.lineOverlayTypeClick,
                        mouseOverIncident: this.$parent.pointMouseOver,
                        mouseOutIncident: this.$parent.pointMouseOut
                    })
                    overlay.remove()
@@ -567,6 +680,7 @@
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$EventBus.$emit('activeDeleteLineOrPoint', 'policecar')
                } else {
                    this.$message({
                        message: '保存失败',
@@ -586,6 +700,7 @@
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$EventBus.$emit('activeDeleteLineOrPoint', 'policeman')
                    this.editPoliceStyle(params, overlay)
                } else {
                    this.$message({
@@ -600,6 +715,8 @@
            updateSecurityPlot(params).then(res => {
                if (res.data.success) {
                    this.editPlotStyle(params, overlay)
                    this.$EventBus.$emit('activeDeletePolygon')
                    this.$message({
                        message: '修改成功',
                        type: 'success'