From 5dccbfc0221fee15aac6bf93479f05c34eb45fd1 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 07 Nov 2025 10:28:37 +0800
Subject: [PATCH] feat:填充色
---
src/views/layerManagement/index.vue | 37 +++++++++++++++++++++++++++++++------
1 files changed, 31 insertions(+), 6 deletions(-)
diff --git a/src/views/layerManagement/index.vue b/src/views/layerManagement/index.vue
index 88e7f86..d92f0ed 100644
--- a/src/views/layerManagement/index.vue
+++ b/src/views/layerManagement/index.vue
@@ -174,8 +174,6 @@
};
// 点击显示区域
const handleCoverDataUpdate = data => {
-console.log('data',data);
-
selectDataList.value = data;
if (selectDataList.value.length > 0) {
loadDataToMap(selectDataList.value);
@@ -184,9 +182,11 @@
}
};
const loadDataToMap = dataList => {
+console.log('dataList',dataList);
+
if (!viewer) return;
viewer.entities.removeAll();
- // 存储所有有效坐标，用于后续定位
+ // 存储所有有效坐标
tbJwdList = [];
dataList.forEach(item => {
let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
@@ -194,11 +194,36 @@
console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
return;
}
+
tbJwdList.push(...positions);
let degreesArray = [];
positions.forEach(pos => {
degreesArray.push(pos.lng, pos.lat, pos.height);
});
+ const colorMap = {
+ 1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色）
+ 2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色）
+ 3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色）
+ // 边框色：去掉透明度，保持纯色
+ border1: Cesium.Color.fromCssColorString('#00ff06'),
+ border2: Cesium.Color.fromCssColorString('#ff0000'),
+ border3: Cesium.Color.fromCssColorString('#00ffea'),
+ };
+ const fillColor = item.category_id === 1
+ ? colorMap[1]
+ : item.category_id === 2
+ ? colorMap[2]
+ : item.category_id === 3
+ ? colorMap[3]
+ : Cesium.Color.YELLOW.withAlpha(0.5);
+
+ const borderColor = item.category_id === 1
+ ? colorMap.border1
+ : item.category_id === 2
+ ? colorMap.border2
+ : item.category_id === 3
+ ? colorMap.border3
+ : Cesium.Color.YELLOW;
viewer.entities.add({
id: `polygon_${item.id}`,
customType: 'fence_polygon',
@@ -207,9 +232,9 @@
hierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
),
- material: Cesium.Color.YELLOW.withAlpha(0.5), // 填充色
+ material:fillColor, // 填充色
outline: true, // 显示边框
- outlineColor: Cesium.Color.YELLOW, // 边框色
+ outlineColor: borderColor, // 边框色
outlineWidth: 2, // 边框宽度
clampToGround: true, // 贴地显示
},
@@ -217,7 +242,7 @@
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
width: 2,
- material: Cesium.Color.YELLOW,
+ material:borderColor,
clampToGround: true,
},
zIndex: 99, // 层级，确保在其他图层上方显示
--
Gitblit v1.9.3