From f13afcb61276061871b30bce17a7877287df0b67 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 20 Jan 2024 09:56:43 +0800
Subject: [PATCH] 1
---
src/views/activity/components/drawBtnBox.vue | 284 ++++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 240 insertions(+), 44 deletions(-)
diff --git a/src/views/activity/components/drawBtnBox.vue b/src/views/activity/components/drawBtnBox.vue
index 9de5932..841f370 100644
--- a/src/views/activity/components/drawBtnBox.vue
+++ b/src/views/activity/components/drawBtnBox.vue
@@ -1,6 +1,8 @@
<template>
<div v-show="dialogVisible && isShowActivityEditBox" class="draw-btn-box">
- <div class="left">
+ <span @click="showEmitBox = !showEmitBox" class="emit-expend">{{ showEmitBox ? '收起' : '展开' }}</span>
+
+ <div v-show="showEmitBox" class="left">
<h3>预案布置</h3>
<div>
<span>要素资源：</span>
@@ -16,16 +18,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 +41,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 +59,7 @@
} from '@/api/activity/index.js'
import Plot from "@/utils/plot/Plot.js"
-
+import { getLineSpeed } from '@/utils/turfPolygon'
let addPlotOverlayData = null
let currentEmitEl = null
@@ -80,7 +76,8 @@
data () {
return {
- startDrawFlag: false
+ startDrawFlag: false,
+ showEmitBox: true
}
},
@@ -89,9 +86,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 +139,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 +240,65 @@
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 && overlayData.attrParams.item.areaType != 3) {
+ 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(',').map(item => {
+ if (item < 0) {
+ item = 0
+ }
+
+ item = Number(item)
+
+ return item
+ })
+ let position = overlayData.attrParams.item.position.slice(11, overlayData.attrParams.item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
+
+ if (position.indexOf('(') != -1) {
+ position = position.replace("(", "")
+ position = position.replace(")", "")
+ }
+
+ let positions = position
+ 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: overlayData.attrParams.item.areaType, 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 +333,29 @@
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 maxHeight = Math.max(...item.altitude.split(',')) + 5
+
+ let positions = position.split(';').map((item, index) => `${item},${maxHeight}`)
+ positions.push(positions[0])
+ positions = positions.join(';')
+ if (item.type == 5 && (item.areaType == 2 || item.areaType == 3)) {
+ 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 +372,51 @@
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 && item.areaType != 3) {
+ addPlotOverlayData.setStyle({
+ material: color,
+ outlineColor: global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
+ })
+ } else {
+ if (item.areaType == 2) {
+ let multiple, speed
+ if (item.iconUrl.indexOf('1') != -1) {
+ multiple = 250
+ speed = 3
+ } else if (item.iconUrl.indexOf('2') != -1) {
+ multiple = 195
+ speed = 3
+ } else {
+ multiple = 50
+ speed = 10
+ }
+
+ addPlotOverlayData.setStyle({
+ material: new global.DC.WallImageTrailMaterialProperty({
+ image: item.iconUrl,
+ color: color,
+ repeat: {
+ x: getLineSpeed(position.split(';').map(item => {
+ item.split(',')
+
+ return [Number(item.split(',')[0]), Number(item.split(',')[1])]
+ }), multiple), y: 1
+ },
+ speed: speed
+ })
+ })
+ } else {
+ addPlotOverlayData.setStyle({
+ material: new global.DC.WallTrailMaterialProperty({
+ color: color,
+ speed: 10
+ })
+ })
+ }
+ }
this.$parent.isHaveArrow = true
} else {
@@ -354,8 +460,8 @@
lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
}
addPlotOverlayData.setStyle({
- material: lineColor,
- width: 3
+ material: new global.DC.PolylineArrowMaterialProperty(lineColor),
+ width: 10
})
data.linePositionStr = positionNewArr
@@ -368,8 +474,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 +526,54 @@
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.attrParams.item.areaType != 3) {
+ overlay.setStyle({
+ material: color,
+ outlineColor: outColor
+ })
+ } else {
+ if (overlay.attrParams.item.areaType == 2) {
+ let multiple, speed
+
+ if (overlay.attrParams.item.iconUrl.indexOf('1') != -1) {
+ multiple = 250
+ speed = 3
+ } else if (overlay.attrParams.item.iconUrl.indexOf('2') != -1) {
+ multiple = 195
+ speed = 3
+ } else {
+ multiple = 50
+ speed = 10
+ }
+
+ overlay.setStyle({
+ material: new global.DC.WallImageTrailMaterialProperty({
+ image: overlay.attrParams.item.iconUrl,
+ color: color,
+ repeat: {
+ x: getLineSpeed(position.split(';').map(item => {
+ item.split(',')
+
+ return [Number(item.split(',')[0]), Number(item.split(',')[1])]
+ }), multiple), y: 1
+ },
+ speed: speed
+ })
+ })
+ } else {
+ overlay.setStyle({
+ material: new global.DC.WallTrailMaterialProperty({
+ color: color,
+ speed: 10
+ })
+ })
+ }
+ }
+
} else if (overlay.customType == 'billboard') {
overlay.setStyle({
color: color
@@ -464,6 +615,31 @@
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 || params.areaType == 3) {
+ overlay.attrParams.item.altitude = params.altitude
+
+ let maxHeight = Math.max(...overlay.attrParams.item.altitude.split(',')) + 5
+
+ 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], maxHeight)
+
+ return item
+ })
+
+ positions.push(positions[0])
+
+ overlay.positions = positions
+
+ overlay.show = true
}
},
@@ -532,20 +708,23 @@
lineColor = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 255)
}
overlay.attrParams.lineObj.setStyle({
- "material": lineColor,
- 'width': 3
+ material: new global.DC.PolylineArrowMaterialProperty(lineColor),
+ width: 10
})
overlay.attrParams.linePositionStr = linePosition
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 +746,7 @@
message: '保存成功',
type: 'success'
})
+ this.$EventBus.$emit('activeDeleteLineOrPoint', 'policecar')
} else {
this.$message({
message: '保存失败',
@@ -586,6 +766,7 @@
message: '保存成功',
type: 'success'
})
+ this.$EventBus.$emit('activeDeleteLineOrPoint', 'policeman')
this.editPoliceStyle(params, overlay)
} else {
this.$message({
@@ -600,6 +781,8 @@
updateSecurityPlot(params).then(res => {
if (res.data.success) {
this.editPlotStyle(params, overlay)
+ this.$EventBus.$emit('activeDeletePolygon')
+
this.$message({
message: '修改成功',
type: 'success'
@@ -634,12 +817,25 @@
.draw-btn-box {
position: fixed;
display: flex;
- // left: 50%;
- bottom: 40px;
+ left: 50%;
+ bottom: 0px;
color: #fff;
background: $bg-one-color;
white-space: nowrap;
- // transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+
+ .emit-expend {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -100%);
+ width: 54px;
+ height: 28px;
+ line-height: 28px;
+ background: $bg-color;
+ cursor: pointer;
+ border-radius: 8px 8px 0 0;
+ }
.left,
.right {
--
Gitblit v1.9.3