From 924d12f53617c917e2d14d6deca6f1942e22ca93 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 28 Oct 2025 17:56:58 +0800
Subject: [PATCH] feat:渲染数据
---
src/views/layerManagement/index.vue | 52 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 45 insertions(+), 7 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 0b1618b..f8c45e7 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -128,17 +128,55 @@
drawPolygonExample.removeEntities();
}
};
-const loadDataToMap = dataList => {
- // 清空之前的绘制内容
- drawPolygonExample.removeEntities();
+const loadDataToMap = (dataList) => {
+ if (!viewer) return;
+ viewer.entities.removeAll();
dataList.forEach(item => {
- // 转换坐标格式
+ // 解析 geo_data 为经纬度坐标数组（使用已有的 parseGeoDataToPositions 方法）
const positions = parseGeoDataToPositions(item.geo_data, item.altitude);
- if (positions.length < 3) return; // 少于3个点无法构成多边形
+ if (positions.length < 3) {
+ console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
+ return;
+ }
+console.log('positions',positions);
- // 调用 DrawPolygon 的 initPolygon 方法渲染多边形
- drawPolygonExample.initPolygon(viewer, positions, true);
+ // 转换为 Cesium 所需的 [lng, lat, lng, lat, ...] 扁平数组格式
+ let degreesArray = [];
+ positions.forEach(pos => {
+ degreesArray.push(pos.lng, pos.lat, pos.height);
+
+ });
+ viewer.entities.add({
+ id: `polygon_${item.id}`,
+ customType: 'fence_polygon',
+ customInfo: item,
+ polygon: {
+ hierarchy: new Cesium.PolygonHierarchy(
+ Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
+ ),
+ material: Cesium.Color.YELLOW.withAlpha(0.5), // 填充色
+ outline: true, // 显示边框
+ outlineColor: Cesium.Color.YELLOW, // 边框色
+ outlineWidth: 2, // 边框宽度
+ clampToGround: true, // 贴地显示
+
+ },
+
+ polyline: {
+ positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
+ width: 2,
+ material: Cesium.Color.YELLOW,
+ clampToGround: true,
+ },
+ zIndex: 99, // 层级，确保在其他图层上方显示
+ });
});
+
+ // 添加点击事件（参考 entitiesAddSpot 的 spotHighlighting 逻辑）
+ // 移除已有点击事件，避免重复绑定
+ // viewInstance.value?.removeLeftClickEvent('fenceHighlighting');
+ // 绑定新的点击事件，用于高亮选中的围栏
+ // viewInstance.value?.addLeftClickEvent(null, handleFenceClick, 'fenceHighlighting');
};
let publicCesiumInstance = null;
--
Gitblit v1.9.3