From 816f788240f30d2d1e30c4c15c58c0dd997d7272 Mon Sep 17 00:00:00 2001 From: zhangquan <2523589960@qq.com> Date: Tue, 15 Jul 2025 10:43:02 +0800 Subject: [PATCH] =?UTF-8?q?1.=E5=AF=B9toolbar=E4=BB=A3=E7=A0=81=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E6=8B=86=E5=88=86=EF=BC=9B2.=E4=BF=AE=E5=A4=8Dbug?= =?UTF-8?q?=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CesiumMap/FeaturePrimitive.js | 16 + .../CesiumMap/mixins/useEventBus.js | 2 +- .../systemTemplate/forestFire/Toolbar.vue | 589 ------------------ .../forestFire/Toolbar/Toolbar.vue | 242 +++++++ .../forestFire/Toolbar/baseDraw.js | 262 ++++++++ .../forestFire/Toolbar/forestFireDraw.js | 142 +++++ .../forestFire/Toolbar/index.js | 3 + src/views/systemTemplate/forestFire/index.vue | 2 +- 8 files changed, 667 insertions(+), 591 deletions(-) create mode 100644 src/components/CesiumMap/FeaturePrimitive.js delete mode 100644 src/views/systemTemplate/forestFire/Toolbar.vue create mode 100644 src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue create mode 100644 src/views/systemTemplate/forestFire/Toolbar/baseDraw.js create mode 100644 src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js create mode 100644 src/views/systemTemplate/forestFire/Toolbar/index.js diff --git a/src/components/CesiumMap/FeaturePrimitive.js b/src/components/CesiumMap/FeaturePrimitive.js new file mode 100644 index 0000000..f9d6e47 --- /dev/null +++ b/src/components/CesiumMap/FeaturePrimitive.js @@ -0,0 +1,16 @@ +import * as Cesium from "cesium"; + +export default class FeaturePrimitive extends Cesium.Primitive { + + properties = new Cesium.PropertyBag() + constructor(options, properties) { + super(options); + if(properties && properties instanceof Object) { + for (const key in properties) { + if (Object.prototype.hasOwnProperty.call(properties, key)) { + properties.addProperty(key, properties[key]); + } + } + } + } +} \ No newline at end of file diff --git a/src/components/CesiumMap/mixins/useEventBus.js b/src/components/CesiumMap/mixins/useEventBus.js index 247ab7c..5eeb62e 100644 --- a/src/components/CesiumMap/mixins/useEventBus.js +++ b/src/components/CesiumMap/mixins/useEventBus.js @@ -67,7 +67,7 @@ export const useEventBus = (viewer) => { if (typeof event === 'string') { // 触发自定义事件 // mitt.emit(type, event), event 是 payload - cache.customEmitter.emit(event, args) // 将 ...args 作为单个数组 payload 传递 + cache.customEmitter.emit(event, ...args) // 将 ...args 作为单个数组 payload 传递 } else if (Object.values(ScreenSpaceEventType).includes(event)) { // 触发屏幕空间事件 (触发所有监听器，无模式检查) // 屏幕空间事件通常只有一个参数 diff --git a/src/views/systemTemplate/forestFire/Toolbar.vue b/src/views/systemTemplate/forestFire/Toolbar.vue deleted file mode 100644 index 77a6af1..0000000 --- a/src/views/systemTemplate/forestFire/Toolbar.vue +++ /dev/null @@ -1,589 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue b/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue new file mode 100644 index 0000000..7686c70 --- /dev/null +++ b/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue @@ -0,0 +1,242 @@ + + + + + \ No newline at end of file diff --git a/src/views/systemTemplate/forestFire/Toolbar/baseDraw.js b/src/views/systemTemplate/forestFire/Toolbar/baseDraw.js new file mode 100644 index 0000000..a5776ba --- /dev/null +++ b/src/views/systemTemplate/forestFire/Toolbar/baseDraw.js @@ -0,0 +1,262 @@ +import * as Cesium from 'cesium' +import { + createCurvePolygonPositions, + createStraightArrowPositions, + createWideArrowPositions, + createAttackArrowPositions, + createDoubleArrowPositions +} from '@/components/CesiumMap/mixins/useDrawTool'; +import drawLocationIcon from '@/assets/icons/draw_location.png'; + +// 绘制位置 +const drawLocation = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + + drawTool.abort(); + measureTool.abort(); + drawTool.drawPoint().then(position => { + toolbarLayer?.entities.add({ + position, + billboard: { + image: drawLocationIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + } + }); + }); +}; + +// 绘制线 +const drawPolyline = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawPolyline().then((positions) => { + toolbarLayer?.entities.add({ + polyline: { + positions, + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + }) + }); +}; + +// 绘制面 +const drawPolygon = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawPolygon().then((positions) => { + toolbarLayer?.entities.add({ + polyline: { + positions:[...positions, positions[0]], // 闭合多边形 + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + polygon: { + hierarchy: positions, + material: Cesium.Color.YELLOW.withAlpha(0.5), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + }, + }); + }); +}; + +// 绘制曲面 +const drawCurvePolygon = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawCurvePolygon().then((positions) => { + if (positions.length < 2 || !positions[0]) return + + const fullPositions = createCurvePolygonPositions(positions) + toolbarLayer?.entities.add({ + polyline: { + positions: fullPositions, + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + polygon: { + hierarchy: fullPositions, + material: Cesium.Color.YELLOW.withAlpha(0.5), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + }, + }); + }); +}; + +// 绘制直箭头 +const drawStraightArrow = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawStraightArrow().then((positions) => { + if (!positions[0] || !positions[1]) return + + const fullPositions = createStraightArrowPositions(positions) + toolbarLayer?.entities.add({ + polyline: { + positions: [...fullPositions, fullPositions[0]], + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + polygon: { + hierarchy: fullPositions, + material: Cesium.Color.YELLOW.withAlpha(0.5), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + }, + }) + }); +}; + +// 绘制宽箭头 +const drawWideArrow = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawWideArrow().then((positions) => { + if (positions.length < 2) return + + const fullPositions = createWideArrowPositions(positions) + toolbarLayer?.entities.add({ + polyline: { + positions: [...fullPositions, fullPositions[0]], + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + polygon: { + hierarchy: fullPositions, + material: Cesium.Color.YELLOW.withAlpha(0.5), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + }, + }) + }); +}; + +// 绘制攻击箭头 +const drawAttackArrow = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawAttackArrow().then((positions) => { + if (positions.length < 3) return + + const fullPositions = createAttackArrowPositions(positions) + toolbarLayer?.entities.add({ + polyline: { + positions: [...fullPositions, fullPositions[0]], + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + polygon: { + hierarchy: fullPositions, + material: Cesium.Color.YELLOW.withAlpha(0.5), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + }, + }) + }); +}; + +// 绘制双箭头 +const drawDoubleArrow = (options) => { + const { toolbarLayer, drawTool, measureTool } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + drawTool.abort(); + measureTool.abort(); + drawTool.drawDoubleArrow().then((positions) => { + if (positions.length < 3) return + + const fullPositions = createDoubleArrowPositions(positions) + toolbarLayer?.entities.add({ + polyline: { + positions: [...fullPositions, fullPositions[0]], + width: 2, + material: Cesium.Color.YELLOW, + clampToGround: true, + }, + polygon: { + hierarchy: fullPositions, + material: Cesium.Color.YELLOW.withAlpha(0.5), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + }, + }) + }); +}; + +// 平面距离测量的绘制 +const drawMeasureDistance = (options) => { + const { drawTool, measureTool } = options; + if(!measureTool) { + console.error('绘制工具未初始化'); + return; + } + + drawTool.abort(); + measureTool.abort(); + measureTool.distance(); +}; + +// 平面面积测量的绘制 +const drawMeasureArea = (options) => { + const { drawTool, measureTool } = options; + if(!measureTool) { + console.error('绘制工具未初始化'); + return; + } + + drawTool.abort(); + measureTool.abort(); + measureTool.area(); +}; + +export { + drawLocation, + drawPolyline, + drawPolygon, + drawCurvePolygon, + drawStraightArrow, + drawWideArrow, + drawAttackArrow, + drawDoubleArrow, + drawMeasureDistance, + drawMeasureArea +} diff --git a/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js b/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js new file mode 100644 index 0000000..ec1e5d7 --- /dev/null +++ b/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js @@ -0,0 +1,142 @@ +import * as Cesium from 'cesium' +import DialogPropertyGrid from '../DialogPropertyGrid'; +import { setPropertyData } from '../DialogPropertyGrid/property'; +import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive'; +import { getArea, getBoundingCenterCoordinate } from '@/components/CesiumMap/mixins/useMeasureTool'; + +import fireWarehouseIcon from '@/assets/icons/fire_warehouse.png'; + +// 绘制水源地（面） +const drawWatersource = (options) => { + const { drawTool, measureTool, viewer, primitiveList } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + + drawTool.abort(); + measureTool.abort(); + drawTool.drawPolygon().then((positions) => { + // 计算中心点坐标 + const center = getBoundingCenterCoordinate(positions); + + // // 添加水源地实体 + // const entity = toolbarLayer?.entities.add({ + // // polyline: { + // // positions:[...positions, positions[0]], // 闭合多边形 + // // width: 2, + // // material: Cesium.Color.BLUE, + // // }, + // polygon: { + // hierarchy: positions, + // material: riverMaterial, + // // material: Cesium.Color.BLUE.withAlpha(0.5), + // }, + // properties: { + // __type: 'watersource', + // name: '', + // area: getArea(positions).toFixed(2), // 面积 + // longitude: center[0].toFixed(6), + // latitude: center[1].toFixed(6), + // volume: 0 // 储水量，默认0 + // } + // }); + + const waterMaterial = new Cesium.Material({ + fabric: { + type: 'Water', + uniforms: { + normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'), + baseWaterColor: new Cesium.Color( + 64 / 255.0, + 157 / 255.0, + 253 / 255.0, + 0.6 + ), + // blendColor: new Cesium.Color(0.0, 0.5, 1.0, 1.0), + // frequency: 10.0, + // animationSpeed: 0.05, + // amplitude: 10, + // specularIntensity: 0.5, + // alpha: 0.1 + frequency: 1000.0, + animationSpeed: 0.1, + amplitude: 10, + specularIntensity: 1.5, + } + } + }); + + const waterPrimitive = new FeatureGroundPrimitive({ + geometryInstances: new Cesium.GeometryInstance({ + geometry: new Cesium.PolygonGeometry({ + polygonHierarchy: new Cesium.PolygonHierarchy(positions), + vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT, + }) + }), + appearance: new Cesium.EllipsoidSurfaceAppearance({ + material: waterMaterial, + }) + }, { + __type: 'watersource', + name: '', + area: getArea(positions).toFixed(2), // 面积 + longitude: center[0].toFixed(6), + latitude: center[1].toFixed(6), + volume: 0 // 储水量，默认0 + }); + + // 将 Primitive 添加到场景中 + viewer.scene.primitives.add(waterPrimitive); + primitiveList.push(waterPrimitive); + + // 编辑属性 + DialogPropertyGrid.show(waterPrimitive, (data) => { + // 更新实体属性 + setPropertyData(data, waterPrimitive); + // 调用接口 + }); + }); +}; + +// 绘制仓库（点） +const drawWarehouse = (options) => { + const { drawTool, measureTool, toolbarLayer } = options; + if(!drawTool) { + console.error('绘制工具未初始化'); + return; + } + + drawTool.abort(); + measureTool.abort(); + drawTool.drawPoint().then((position) => { + // 计算中心点坐标 + const center = Cesium.Cartographic.fromCartesian(position); + + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireWarehouseIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + properties: { + __type: 'warehouse', + name: '', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + setPropertyData(data, entity); + // 调用接口 + }); + }); +}; + +export { + drawWatersource, + drawWarehouse +} diff --git a/src/views/systemTemplate/forestFire/Toolbar/index.js b/src/views/systemTemplate/forestFire/Toolbar/index.js new file mode 100644 index 0000000..309543a --- /dev/null +++ b/src/views/systemTemplate/forestFire/Toolbar/index.js @@ -0,0 +1,3 @@ +import Toolbar from './Toolbar' + +export default Toolbar \ No newline at end of file diff --git a/src/views/systemTemplate/forestFire/index.vue b/src/views/systemTemplate/forestFire/index.vue index e1c4ffe..653ff86 100644 --- a/src/views/systemTemplate/forestFire/index.vue +++ b/src/views/systemTemplate/forestFire/index.vue @@ -11,7 +11,7 @@ import { shallowRef } from 'vue'; import * as Cesium from 'cesium'; import CesiumMap from '@/components/CesiumMap/index.vue'; import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus'; -import Toolbar from './Toolbar.vue'; +import Toolbar from './Toolbar'; import DialogPropertyGrid from './DialogPropertyGrid'; import { setPropertyData } from './DialogPropertyGrid/property'; import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';