| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | } from '@/api/activity/index.js' |
| | | |
| | | import Plot from "@/utils/plot/Plot.js" |
| | | |
| | | import { getLineSpeed } from '@/utils/turfPolygon' |
| | | let addPlotOverlayData = null |
| | | |
| | | let currentEmitEl = null |
| | |
| | | |
| | | 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 |
| | |
| | | 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 |
| | | } |
| | | |
| | |
| | | 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}` |
| | |
| | | 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(' ') |
| | |
| | | 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 { |
| | |
| | | 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 |
| | |
| | | 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 |
| | |
| | | |
| | | 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 |
| | | } |
| | | }, |
| | | |
| | |
| | | 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() |
| | |
| | | message: '保存成功', |
| | | type: 'success' |
| | | }) |
| | | this.$EventBus.$emit('activeDeleteLineOrPoint', 'policecar') |
| | | } else { |
| | | this.$message({ |
| | | message: '保存失败', |
| | |
| | | message: '保存成功', |
| | | type: 'success' |
| | | }) |
| | | this.$EventBus.$emit('activeDeleteLineOrPoint', 'policeman') |
| | | this.editPoliceStyle(params, overlay) |
| | | } else { |
| | | this.$message({ |
| | |
| | | updateSecurityPlot(params).then(res => { |
| | | if (res.data.success) { |
| | | this.editPlotStyle(params, overlay) |
| | | this.$EventBus.$emit('activeDeletePolygon') |
| | | |
| | | this.$message({ |
| | | message: '修改成功', |
| | | type: 'success' |