From e24f70ababdee2b4fdce71c6b80a9bc928fa0331 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 08 May 2023 14:45:08 +0800
Subject: [PATCH] 警情排行调整
---
src/views/activity/components/drawBtnBox.vue | 187 ++++++++++++++++++++++++++++++++++++++--------
1 files changed, 152 insertions(+), 35 deletions(-)
diff --git a/src/views/activity/components/drawBtnBox.vue b/src/views/activity/components/drawBtnBox.vue
index 9de5932..691749d 100644
--- a/src/views/activity/components/drawBtnBox.vue
+++ b/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'
--
Gitblit v1.9.3