huzhengkao
/
tcctyn-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.修复有地形情况下，绘制多边形边缘线无法贴地的情况；2.修改水源地（面）显示水面动态纹理；

This commit is contained in:
zhangquan 2025-07-14 17:46:09 +08:00
parent ec4ca333b2
commit 8e6a168c37
10 changed files with 129 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/CesiumMap/FeatureGroundPrimitive.js Normal file
View File

@ -0,0 +1,16 @@
import * as Cesium from "cesium";
export default class FeatureGroundPrimitive extends Cesium.GroundPrimitive {
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)) {
this.properties.addProperty(key, properties[key]);
}
}
}
}
}

2
src/components/CesiumMap/mixins/useDrawTool/drawAttackArrow.js
View File

@ -67,7 +67,7 @@ export const drawAttackArrow = (deps) => {
const pts = createAttackArrowPositions(positions)
return [...pts, pts[0]]
}, false),
// clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
clampToGround: true,
width: 2,
material: CesiumColor.fromCssColorString('#ff0000'),
},

2
src/components/CesiumMap/mixins/useDrawTool/drawCurvePolygon.js
View File

@ -62,7 +62,7 @@ export const drawCurvePolygon = (deps) => {
}
return createCurvePolygonPositions(positions)
}, false),
// clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
clampToGround: true,
width: 2,
material: CesiumColor.fromCssColorString('#ff0000'),
},

2
src/components/CesiumMap/mixins/useDrawTool/drawDoubleArrow.js
View File

@ -67,7 +67,7 @@ export const drawDoubleArrow = (deps) => {
const pts = createDoubleArrowPositions(positions)
return [...pts, pts[0]]
}, false),
// clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
clampToGround: true,
width: 2,
material: CesiumColor.fromCssColorString('#ff0000'),
},

1
src/components/CesiumMap/mixins/useDrawTool/drawPolygon.js
View File

@ -64,6 +64,7 @@ export const drawPolygon = (deps) => {
// clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
width: 2,
material: CesiumColor.fromCssColorString('#ff0000'),
clampToGround: true,
},
})

2
src/components/CesiumMap/mixins/useDrawTool/drawStraightArrow.js
View File

@ -63,7 +63,7 @@ export const drawStraightArrow = (deps) => {
const pts = createStraightArrowPositions(positions)
return [...pts, pts[0]]
}, false),
// clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
clampToGround: true,
width: 2,
material: CesiumColor.fromCssColorString('#ff0000'),
},

2
src/components/CesiumMap/mixins/useDrawTool/drawWideArrow.js
View File

@ -64,7 +64,7 @@ export const drawWideArrow = (deps) => {
return [...pts, pts[0]]
// return [...pts]
}, false),
// clampToGround: true, // 多边形边界线通常不需要 clampToGround，因为多边形本身已经处理了高度
clampToGround: true,
width: 2,
material: CesiumColor.fromCssColorString('#ff0000'),
},

4
src/components/CesiumMap/mixins/useDrawTool/index.js
View File

@ -6,6 +6,7 @@ import {
Entity,
CallbackPositionProperty,
Color as CesiumColor,
HeightReference,
} from 'cesium'
import { useEventBus } from '../useEventBus'
import { useHoverPosition } from '../useHoverPosition'
@ -69,9 +70,8 @@ export const useDrawTool = (viewer) => {
color: CesiumColor.BLUE,
outlineColor: CesiumColor.WHITE,
outlineWidth: 1,
heightReference: HeightReference.CLAMP_TO_GROUND,
},
// 可以考虑是否需要 HeightReference.CLAMP_TO_GROUND
// heightReference: HeightReference.CLAMP_TO_GROUND,
})
viewer.entities.add(assistPoint)

117
src/views/systemTemplate/forestFire/Toolbar.vue
View File

@ -29,6 +29,7 @@ import {
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
import { useMeasureTool, getArea, getBoundingCenterCoordinate } from '@/components/CesiumMap/mixins/useMeasureTool';
import { setPropertyData } from './DialogPropertyGrid/property';
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
import toolbarLocationIcon from '@/assets/icons/toolbar_location.png';
import toolbarPolylineIcon from '@/assets/icons/toolbar_polyline.png';
@ -59,6 +60,7 @@ let drawTool = null
let measureTool = null
let bus = null
let toolbarLayer = null
let primitiveList = []
const isOpen = ref(false)
const options = ref([{
name: 'location',
@ -128,7 +130,8 @@ const drawLocation = (params) => {
position,
billboard: {
image: params?.icon || drawLocationIcon,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
}
});
});
@ -148,6 +151,7 @@ const drawPolyline = () => {
positions,
width: 2,
material: Cesium.Color.YELLOW,
clampToGround: true,
},
})
});
@ -167,10 +171,12 @@ const drawPolygon = () => {
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,
},
});
});
@ -193,10 +199,12 @@ const drawCurvePolygon = () => {
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,
},
});
});
@ -219,10 +227,12 @@ const drawStraightArrow = () => {
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,
},
})
});
@ -245,10 +255,12 @@ const drawWideArrow = () => {
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,
},
})
});
@ -271,10 +283,12 @@ const drawAttackArrow = () => {
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,
},
})
});
@ -297,10 +311,12 @@ const drawDoubleArrow = () => {
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,
},
})
});
@ -342,31 +358,82 @@ const drawWatersource = () => {
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: 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 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(entity, (data) => {
DialogPropertyGrid.show(waterPrimitive, (data) => {
// console.log('确定按钮被点击，最新表单数据:', formData);
// 更新实体属性
setPropertyData(data, entity);
setPropertyData(data, waterPrimitive);
// 调用接口
});
});
@ -414,6 +481,14 @@ const toolbarClear = () => {
// 清除所有绘制的实体
toolbarLayer.entities.removeAll();
// 清除所有绘制的图元
for (let index = primitiveList.length - 1; index >= 0; index--) {
const p = primitiveList[index];
if(viewer.scene.primitives.contains(p)) {
viewer.scene.primitives.remove(p);
primitiveList.splice(index, 1);
}
}
measureTool?.clear();
// 清除当前测量

49
src/views/systemTemplate/forestFire/index.vue
View File

@ -14,6 +14,7 @@ import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
import Toolbar from './Toolbar.vue';
import DialogPropertyGrid from './DialogPropertyGrid';
import { setPropertyData } from './DialogPropertyGrid/property';
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
const viewerRef = shallowRef(null)
const options = ref({
@ -27,6 +28,7 @@ const options = ref({
roll: 0 // 翻滚角
},
ditu: 'tianditu', // 底图选择
isTerrainProvider: true, // 启用地形
})
const showProperty = ref(false); // 控制属性面板的显示与隐藏
const propertyData = ref([])
@ -48,7 +50,7 @@ const initMap = (v) => {
// 遍历拾取实体，获取第一个非辅助实体
for (let index = 0; index < pickedObjectList.length; index++) {
const obj = pickedObjectList[index];
if (Cesium.defined(obj) && obj.id && obj.id instanceof Cesium.Entity) {
if (obj && obj.id && obj.id instanceof Cesium.Entity) {
// 辅助实体的name都以'__'开头，不识别
if(obj.id.name?.indexOf('__') === 0) {
continue
@ -60,51 +62,18 @@ const initMap = (v) => {
// 调用接口
})
return
} else if(obj.primitive && obj.primitive instanceof FeatureGroundPrimitive) {
DialogPropertyGrid.show(obj.primitive, (data) => {
// 更新实体属性
setPropertyData(data, obj.primitive);
// 调用接口
})
}
}
}
})
};
// 示例属性数据
// propertyData.value = [
// { key: 'id', name: 'ID', value: '12345', type: 'text', disabled: true },
// { key: 'title', name: '标题', value: '这是一个标题', type: 'text', checkMethod: (val) => val.length > 0 || (ElMessage.error('标题不能为空'), false) },
// { key: 'fontSize', name: '字体大小', value: 16, type: 'number', checkMethod: (val) => val >= 12 && val <= 72 || (ElMessage.error('字体大小必须在12-72之间'), false) },
// {
// key: 'align',
// name: '对齐方式',
// value: 'left',
// type: 'select',
// options: [
// { label: '左对齐', value: 'left' },
// { label: '居中', value: 'center' },
// { label: '右对齐', value: 'right' },
// ],
// checkMethod: (val) => ['left', 'center', 'right'].includes(val) || (ElMessage.error('请选择有效的对齐方式'), false)
// },
// { key: 'color', name: '文字颜色', value: '#409EFF', type: 'color' },
// { key: 'visible', name: '是否可见', value: true, type: 'select', options: [{ label: '是', value: true }, { label: '否', value: false }] },
// { key: 'description', name: '描述', value: '这是一段描述文本。', type: 'text' },
// { key: 'padding', name: '内边距', value: 10, type: 'number', checkMethod: (val) => val >= 0 || (ElMessage.error('内边距不能为负数'), false) },
// ];
// 处理属性值变化的事件
const handlePropertyChange = (key, newValue, property) => {
console.log(`属性 "${property.name}" (key: ${key}) 的值变更为:`, newValue);
// 在这里你可以根据需要处理值的变化，例如同步到后端或更新其他状态
// 因为组件内部已经更新了 internalData，如果父组件也需要响应式地使用这个数据，
// 并且不希望直接修改原始的 properties 数组，可以在这里根据 key 更新父组件的状态。
// 例如：
// const index = properties.value.findIndex(item => item.key === key);
// if (index !== -1) {
// properties.value[index].value = newValue;
// }
// 注意：上面的直接修改 properties.value[index].value 是可以的，因为 properties 是 ref 包裹的数组。
// 但如果 properties 是 props 传递下来的，则不应该直接修改。
// 在这个示例中，properties 是父组件的 ref，所以直接修改是允许的。
};
</script>
<style lang="scss" scoped>