diff --git a/src/views/systemTemplate/forestFire/DialogPropertyGrid/PropertyGrid.vue b/src/views/systemTemplate/forestFire/DialogPropertyGrid/PropertyGrid.vue index a154b10..83a5118 100644 --- a/src/views/systemTemplate/forestFire/DialogPropertyGrid/PropertyGrid.vue +++ b/src/views/systemTemplate/forestFire/DialogPropertyGrid/PropertyGrid.vue @@ -41,6 +41,7 @@ v-model="editingValue" placeholder="请选择" size="small" + style="width: 180px;" @change="handleEditorChange(row, editingValue)" @blur="handleSave(row, editingValue)" ref="editorRef" @@ -81,6 +82,7 @@ type="date" placeholder="选择日期" size="small" + style="width: 180px;" @change="handleEditorChange(row, editingValue)" @blur="handleSave(row, editingValue)" ref="editorRef" @@ -94,12 +96,14 @@ type="datetime" placeholder="选择日期时间" size="small" + style="width: 180px;" @change="handleEditorChange(row, editingValue)" @blur="handleSave(row, editingValue)" ref="editorRef" value-format="YYYY-MM-DD HH:mm:ss" /> + @@ -128,27 +144,21 @@ 保 存 + + + + \ No newline at end of file diff --git a/src/views/systemTemplate/forestFire/DialogPropertyGrid/index.js b/src/views/systemTemplate/forestFire/DialogPropertyGrid/index.js index 47b30e0..226660e 100644 --- a/src/views/systemTemplate/forestFire/DialogPropertyGrid/index.js +++ b/src/views/systemTemplate/forestFire/DialogPropertyGrid/index.js @@ -1,6 +1,9 @@ // src/utils/DialogPropertyGrid.js import { createApp, h, ref, watch } from 'vue'; import * as Cesium from 'cesium'; +import ElementPlus from 'element-plus' +import locale from 'element-plus/es/locale/lang/zh-cn' +import Cookies from 'js-cookie' // 导入修改后的 PropertyGrid 组件 (现在作为 DialogPropertyGrid 的内容) import PropertyGridContent from './PropertyGrid.vue'; // 假设文件名为 PropertyGrid.vue @@ -117,6 +120,13 @@ const show = (entity = null, onSave = null) => { // 4. 创建 Vue 应用实例并挂载 currentApp = createApp(wrapperComponent); + // 添加 ElementPlus 组件库 + currentApp.use(ElementPlus, { + locale: locale, + // 支持 large、default、small + size: Cookies.get('size') || 'default' + }) + // 5. 将应用挂载到临时容器 // 挂载后，获取根组件实例，以便后续更新数据 currentWrapperInstance = currentApp.mount(currentContainer); diff --git a/src/views/systemTemplate/forestFire/DialogPropertyGrid/property.js b/src/views/systemTemplate/forestFire/DialogPropertyGrid/property.js index cb08235..6275388 100644 --- a/src/views/systemTemplate/forestFire/DialogPropertyGrid/property.js +++ b/src/views/systemTemplate/forestFire/DialogPropertyGrid/property.js @@ -75,10 +75,28 @@ export const warning = [ { key: "discoveryTime", name: "发现时间", - type: "text", + type: "datetime", value: "", disabled: false, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ]; // 定义巡护路线的属性 @@ -143,6 +161,24 @@ export const ranger = [ value: "", disabled: false, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ]; // 定义云台的属性 @@ -189,6 +225,24 @@ export const ptz = [ value: "", disabled: false, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ] // 定义卡口的属性 @@ -235,6 +289,24 @@ export const bayonet = [ value: "", disabled: false, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ] // 定义无人机机场的属性 @@ -281,6 +353,24 @@ export const airport = [ value: "", disabled: false, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ] // 定义热点的属性 @@ -325,6 +415,24 @@ export const hot = [ ], disabled: false, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ] // 定义水源地的属性 @@ -403,6 +511,24 @@ export const warehouse = [ value: "0", disabled: true, }, + { + key: "icon", + name: "图标", + type: "icon", + value: "", + disabled: false, + }, + { + key: "changeAll", + name: "作用于该类型要素", + type: "select", + value: "false", + options: [ + { label: "是", value: "true" }, + { label: "否", value: "false" }, + ], + disabled: false, + }, ]; // 定义林区道路的属性 @@ -552,6 +678,7 @@ export const setPropertyData = (data, entity) => { return } + const oldProperties = JSON.parse(JSON.stringify(entity.properties.getValue())) const newProperties = entity.properties.getValue() data.forEach(item => { if (item.key && item.value !== undefined) { @@ -561,8 +688,5 @@ export const setPropertyData = (data, entity) => { // 替换 properties entity.properties = new Cesium.PropertyBag(newProperties) - // 这里默认name字段是标签显示的内容，如果entity有label，则更新name字段值 - if(entity.label) { - entity.label.text = new Cesium.ConstantProperty(newProperties.name); - } + return [oldProperties, newProperties] } diff --git a/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue b/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue index b1005b9..4f492f0 100644 --- a/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue +++ b/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue @@ -45,7 +45,7 @@ import * as Cesium from 'cesium'; import { useDrawTool } from '@/components/CesiumMap/mixins/useDrawTool'; -import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus'; +import { useEventBus, ScreenMode } from '@/components/CesiumMap/mixins/useEventBus'; import { useMeasureTool } from '@/components/CesiumMap/mixins/useMeasureTool'; import { useWeatherParticle } from '@/components/CesiumMap/mixins/useWeatherParticle'; import { @@ -72,7 +72,12 @@ import { drawWatersource, drawRoad, drawKeyarea, + pickFeatureProperty, } from './forestFireDraw' +// 属性弹窗相关 +import DialogPropertyGrid from './../DialogPropertyGrid'; +import { setPropertyData } from './../DialogPropertyGrid/property'; +import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive'; // 工具栏图标 import baseDrawIcon from "@/assets/icons/toolbar_base_draw.png"; @@ -413,6 +418,11 @@ watch(() => props.viewer, (v) => { bus.on('toolbar_fog', () => weatherSwitchClick('fog')) // 清空 bus.on('toolbar_clear', toolbarClear); + + // view 模式下，点击地图要素显示属性编辑弹窗 + bus.onScreen(Cesium.ScreenSpaceEventType.LEFT_CLICK, ({ position }) => { + pickFeatureProperty(position, params) + }, ScreenMode.VIEW) } }, { immediate: true }); diff --git a/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js b/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js index 4922446..60015dd 100644 --- a/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js +++ b/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js @@ -5,13 +5,130 @@ import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitiv import { getDistance, getArea, getBoundingCenterCoordinate, getBoundingCenter } from '@/components/CesiumMap/mixins/useMeasureTool'; import { parseTime } from '@/utils/ruoyi'; -import fireWarningIcon from '@/assets/icons/fire_warning.png'; -import fireRangerIcon from '@/assets/icons/fire_ranger.png'; -import firePtzIcon from '@/assets/icons/fire_ptz.png'; -import fireBayonetIcon from '@/assets/icons/fire_bayonet.png'; -import fireAirportIcon from '@/assets/icons/fire_airport.png'; -import fireHotIcon from '@/assets/icons/fire_hot.png'; -import fireWarehouseIcon from '@/assets/icons/fire_warehouse.png'; +import fireWarningDefaultIcon from '@/assets/icons/fire_warning.png'; +import fireRangerDefaultIcon from '@/assets/icons/fire_ranger.png'; +import firePtzDefaultIcon from '@/assets/icons/fire_ptz.png'; +import fireBayonetDefaultIcon from '@/assets/icons/fire_bayonet.png'; +import fireAirportDefaultIcon from '@/assets/icons/fire_airport.png'; +import fireHotDefaultIcon from '@/assets/icons/fire_hot.png'; +import fireWarehouseDefaultIcon from '@/assets/icons/fire_warehouse.png'; + +let fireWarningIcon = fireWarningDefaultIcon; +let fireRangerIcon = fireRangerDefaultIcon; +let firePtzIcon = firePtzDefaultIcon; +let fireBayonetIcon = fireBayonetDefaultIcon; +let fireAirportIcon = fireAirportDefaultIcon; +let fireHotIcon = fireHotDefaultIcon; +let fireWarehouseIcon = fireWarehouseDefaultIcon; + +const getImage = async (url) => { + return new Promise((resolve, reject) => { + const image = new Image(); + image.src = url; + image.onload = () => { + resolve(image); + }; + image.onerror = (error) => { + reject(error); + }; + }); +} + +const checkLabel = (entity, oldProperties, newProperties) => { + if(oldProperties.name !== newProperties.name) { + // 这里默认name字段是标签显示的内容，如果entity有label，则更新name字段值 + if(entity.label) { + entity.label.text = new Cesium.ConstantProperty(newProperties.name); + } + } +} + +const checkIcon = (entity, oldProperties, newProperties, layer) => { + if(oldProperties.icon !== newProperties.icon) { + // 默认icon字段是图标路径，如果entity有billboard，则更新图标 + if(entity.billboard) { + // 重新计算图标大小 + getImage(newProperties.icon).then(image => { + // 如果是同类型全局修改 + if(newProperties.changeAll === 'true') { + // 修改全局要素图标 + switch(newProperties.__type) { + case 'warning': + fireWarningIcon = newProperties.icon; + break; + case 'ranger': + fireRangerIcon = newProperties.icon; + break; + case 'ptz': + firePtzIcon = newProperties.icon; + break; + case 'bayonet': + fireBayonetIcon = newProperties.icon; + break; + case 'airport': + fireAirportIcon = newProperties.icon; + break; + case 'hot': + fireHotIcon = newProperties.icon; + break; + case 'warehouse': + fireWarehouseIcon = newProperties.icon; + } + // 修改已经生成的 + if(layer) { + layer.entities.values.forEach(e => { + if(e.properties.getValue().__type === newProperties.__type) { + e.billboard.image = new Cesium.ConstantProperty(newProperties.icon); + if(e.label) { + e.label.pixelOffset = new Cesium.Cartesian2(0, - image.height - 6) + } + } + }) + } + } + // 修改当前要素图标 + entity.billboard.image = new Cesium.ConstantProperty(newProperties.icon); + if(entity.label) { + entity.label.pixelOffset = new Cesium.Cartesian2(0, - image.height - 6) + } + }) + } + } +} + +const pickFeatureProperty = (position, params) => { + // 如果点击的是实体，则获取该实体的属性数据 + const pickedObjectList = params.viewer.scene.drillPick(position); + if (pickedObjectList.length > 0) { + // 遍历拾取实体，获取第一个非辅助实体 + for (let index = 0; index < pickedObjectList.length; index++) { + const obj = pickedObjectList[index]; + if (obj && obj.id && obj.id instanceof Cesium.Entity) { + // 辅助实体的name都以'__'开头，不识别 + if(obj.id.name?.indexOf('__') === 0) { + continue + } + // getPropertyData(obj.id); + DialogPropertyGrid.show(obj.id, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, obj.id); + checkLabel(obj.id, oldProperties, newProperties); + if(['warning', 'ranger', 'ptz', 'bayonet', 'airport', 'hot', 'warehouse'].indexOf(newProperties.__type) !== -1) { + checkIcon(obj.id, oldProperties, newProperties, params.toolbarLayer); + } + // 调用接口 + }) + return + } else if(obj.primitive && obj.primitive instanceof FeatureGroundPrimitive) { + DialogPropertyGrid.show(obj.primitive, (data) => { + // 更新实体属性 + setPropertyData(data, obj.primitive); + // 调用接口 + }) + } + } + } +} // 绘制火情点 const drawWarning = (options) => { @@ -29,36 +146,43 @@ const drawWarning = (options) => { // 获取当前时间 const time = new Date() - const entity = toolbarLayer?.entities.add({ - position, - billboard: { - image: fireWarningIcon, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.4), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - properties: { - __type: 'warning', - longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), - latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), - discoveryTime: parseTime(time), - } - }); - // 编辑属性 - DialogPropertyGrid.show(entity, (data) => { - // 更新实体属性 - setPropertyData(data, entity); - // 调用接口 - }); + // 获取icon的图片 + getImage(fireWarningIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireWarningIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.4), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'warning', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + discoveryTime: parseTime(time), + icon: fireWarningIcon, + changeAll: fireWarningIcon === fireWarningDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -103,7 +227,8 @@ const drawTrack = (options) => { // 编辑属性 DialogPropertyGrid.show(entity, (data) => { // 更新实体属性 - setPropertyData(data, entity); + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties) // 调用接口 }); }); @@ -122,36 +247,42 @@ const drawRanger = (options) => { drawTool.drawPoint().then((position) => { // 计算中心点坐标 const center = Cesium.Cartographic.fromCartesian(position); - - const entity = toolbarLayer?.entities.add({ - position, - billboard: { - image: fireRangerIcon, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(155, 206, 255).withAlpha(0.15), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - properties: { - __type: 'ranger', - longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), - latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), - } - }); - // 编辑属性 - DialogPropertyGrid.show(entity, (data) => { - // 更新实体属性 - setPropertyData(data, entity); - // 调用接口 - }); + // 获取icon的图片 + getImage(fireRangerIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireRangerIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(155, 206, 255).withAlpha(0.15), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'ranger', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + icon: fireRangerIcon, + changeAll: fireRangerIcon === fireRangerDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -169,35 +300,42 @@ const drawPtz = (options) => { // 计算中心点坐标 const center = Cesium.Cartographic.fromCartesian(position); - const entity = toolbarLayer?.entities.add({ - position, - billboard: { - image: firePtzIcon, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(35, 206, 235).withAlpha(0.45), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - properties: { - __type: 'ptz', - longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), - latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), - } - }); - // 编辑属性 - DialogPropertyGrid.show(entity, (data) => { - // 更新实体属性 - setPropertyData(data, entity); - // 调用接口 - }); + // 获取icon的图片 + getImage(firePtzIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: firePtzIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(35, 206, 235).withAlpha(0.45), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'ptz', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + icon: firePtzIcon, + changeAll: firePtzIcon === firePtzDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -215,35 +353,42 @@ const drawBayonet = (options) => { // 计算中心点坐标 const center = Cesium.Cartographic.fromCartesian(position); - const entity = toolbarLayer?.entities.add({ - position, - billboard: { - image: fireBayonetIcon, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(233, 189, 128).withAlpha(0.45), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - properties: { - __type: 'bayonet', - longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), - latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), - } - }); - // 编辑属性 - DialogPropertyGrid.show(entity, (data) => { - // 更新实体属性 - setPropertyData(data, entity); - // 调用接口 - }); + // 获取icon的图片 + getImage(fireBayonetIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireBayonetIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(233, 189, 128).withAlpha(0.45), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'bayonet', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + icon: fireBayonetIcon, + changeAll: fireBayonetIcon === fireBayonetDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -261,35 +406,42 @@ const drawHot = (options) => { // 计算中心点坐标 const center = Cesium.Cartographic.fromCartesian(position); - const entity = toolbarLayer?.entities.add({ - position, - billboard: { - image: fireHotIcon, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.4), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - properties: { - __type: 'hot', - longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), - latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), - } - }); - // 编辑属性 - DialogPropertyGrid.show(entity, (data) => { - // 更新实体属性 - setPropertyData(data, entity); - // 调用接口 - }); + // 获取icon的图片 + getImage(fireHotIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireHotIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.4), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'hot', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + icon: fireHotIcon, + changeAll: fireHotIcon === fireHotDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -307,35 +459,42 @@ const drawAirport = (options) => { // 计算中心点坐标 const center = Cesium.Cartographic.fromCartesian(position); - const entity = toolbarLayer?.entities.add({ - position, - billboard: { - image: fireAirportIcon, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(164, 255, 147).withAlpha(0.4), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - properties: { - __type: 'airport', - longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), - latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), - } - }); - // 编辑属性 - DialogPropertyGrid.show(entity, (data) => { - // 更新实体属性 - setPropertyData(data, entity); - // 调用接口 - }); + // 获取icon的图片 + getImage(fireAirportIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireAirportIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(164, 255, 147).withAlpha(0.4), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'airport', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + icon: fireAirportIcon, + changeAll: fireAirportIcon === fireAirportDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -446,36 +605,43 @@ const drawWarehouse = (options) => { // 计算中心点坐标 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), // 可选偏移 - }, - label: { - text: '', - font: '14px sans-serif', - pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6), - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - showBackground: true, - backgroundColor : Cesium.Color.fromBytes(155, 206, 255).withAlpha(0.4), - backgroundPadding: new Cesium.Cartesian2(8, 4), - }, - 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); - // 调用接口 - }); + // 获取icon的图片 + getImage(fireWarehouseIcon).then(image => { + const entity = toolbarLayer?.entities.add({ + position, + billboard: { + image: fireWarehouseIcon, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + // pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移 + }, + label: { + text: '', + font: '14px sans-serif', + pixelOffset: new Cesium.Cartesian2(0, - image.height - 6), + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + showBackground: true, + backgroundColor : Cesium.Color.fromBytes(155, 206, 255).withAlpha(0.4), + backgroundPadding: new Cesium.Cartesian2(8, 4), + }, + properties: { + __type: 'warehouse', + name: '', + longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6), + latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6), + icon: fireWarehouseIcon, + changeAll: fireWarehouseIcon === fireWarehouseDefaultIcon ? 'true' : 'false', + } + }); + // 编辑属性 + DialogPropertyGrid.show(entity, (data) => { + // 更新实体属性 + const [oldProperties, newProperties] = setPropertyData(data, entity); + checkLabel(entity, oldProperties, newProperties); + checkIcon(entity, oldProperties, newProperties, toolbarLayer); + // 调用接口 + }); + }) }); }; @@ -598,4 +764,5 @@ export { drawWatersource, drawRoad, drawKeyarea, + pickFeatureProperty, } diff --git a/src/views/systemTemplate/forestFire/index.vue b/src/views/systemTemplate/forestFire/index.vue index 9817da1..fdc5c10 100644 --- a/src/views/systemTemplate/forestFire/index.vue +++ b/src/views/systemTemplate/forestFire/index.vue @@ -10,11 +10,7 @@ import { shallowRef } from 'vue'; import * as Cesium from 'cesium'; import CesiumMap from '@/components/CesiumMap/index.vue'; -import { useEventBus, ScreenMode } from '@/components/CesiumMap/mixins/useEventBus'; import Toolbar from './Toolbar'; -import DialogPropertyGrid from './DialogPropertyGrid'; -import { setPropertyData } from './DialogPropertyGrid/property'; -import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive'; const viewerRef = shallowRef(null) const options = ref({ @@ -36,38 +32,6 @@ const propertyData = ref([]) const initMap = (v) => { viewerRef.value = v; console.log('地图已初始化', v); - - const bus = useEventBus(viewerRef.value) - // view 模式下，点击地图要素显示属性编辑弹窗 - bus.onScreen(Cesium.ScreenSpaceEventType.LEFT_CLICK, ({ position }) => { - // 如果点击的是实体，则获取该实体的属性数据 - const pickedObjectList = viewerRef.value.scene.drillPick(position); - if (pickedObjectList.length > 0) { - // 遍历拾取实体，获取第一个非辅助实体 - for (let index = 0; index < pickedObjectList.length; index++) { - const obj = pickedObjectList[index]; - if (obj && obj.id && obj.id instanceof Cesium.Entity) { - // 辅助实体的name都以'__'开头，不识别 - if(obj.id.name?.indexOf('__') === 0) { - continue - } - // getPropertyData(obj.id); - DialogPropertyGrid.show(obj.id, (data) => { - // 更新实体属性 - setPropertyData(data, obj.id); - // 调用接口 - }) - return - } else if(obj.primitive && obj.primitive instanceof FeatureGroundPrimitive) { - DialogPropertyGrid.show(obj.primitive, (data) => { - // 更新实体属性 - setPropertyData(data, obj.primitive); - // 调用接口 - }) - } - } - } - }, ScreenMode.VIEW) };