进度填报大屏界面基本功能

src/components/openLayersMap/index.vue

@@ -139,28 +139,37 @@ const handlePosition = (data: any, node) => {
 
   map.getView().setCenter(centerPosition.value);
 };
-const handleCheckChange = (data: any, bool) => {
-  // 处理树形结构的选中变化
-  let features = treeData.value[data.index].features;
+const handleCheckChange = (data: any, bool: boolean) => {
   if (isMenuVisible.value) isMenuVisible.value = false;
+
+  const features = treeData.value[data.index].features;
+
   if (bool) {
-    if (!layerData[features[0].properties.id]) {
-      features.forEach((item: any) => {
-        creatPoint(item.geometry.coordinates, item.geometry.type, item.geometry.id, item.properties.text);
-      });
-    } else {
-      features.forEach((item: any) => {
-        map.addLayer(layerData[item.geometry.id]);
-      });
-    }
+    features.forEach((item: any) => {
+      const fid = item.geometry.id;
+
+      // 没创建过就先创建
+      if (!featureMap[fid]) {
+        creatPoint(item.geometry.coordinates, item.geometry.type, fid, item.properties.text);
+      }
+
+      // 添加到共享 source 中（避免重复添加）
+      const feature = featureMap[fid];
+      if (!sharedSource.hasFeature(feature)) {
+        sharedSource.addFeature(feature);
+      }
+    });
   } else {
-    features.forEach((item, index) => {
-      map.removeLayer(layerData[item.geometry.id]);
+    features.forEach((item: any) => {
+      const fid = item.geometry.id;
+      const feature = featureMap[fid];
+      if (feature && sharedSource.hasFeature(feature)) {
+        sharedSource.removeFeature(feature);
+      }
     });
   }
-
-  // creatPoint(fromLonLat(data.geometry.coordinates), data.geometry.type);
 };
+
 function initOLMap() {
   // 创造地图实例
   map = new Map({
@@ -246,58 +255,57 @@ function convertStrToNum(arr) {
  * @param {*} id 唯一id
  * @param {*} name 名称
  *    */
+// 共享 source 和图层（全局一次性创建）
+const sharedSource = new VectorSource();
+const sharedLayer = new VectorLayer({
+  source: sharedSource,
+  renderMode: 'image' // 提高渲染性能
+} as any);
+
+// id => Feature 映射表
+const featureMap: Record<string, Feature> = {};
+
 const creatPoint = (pointObj: Array<any>, type: string, id: string, name?: string) => {
-  // 创建多边形的几何对象
-  let polygon;
+  let geometry;
+
   if (type === 'Point') {
-    polygon = new Point(fromLonLat(pointObj));
+    geometry = new Point(fromLonLat(pointObj));
   } else if (type === 'LineString') {
-    const lineStringData = pointObj.map((arr: any) => fromLonLat(arr));
-    polygon = new Polygon([lineStringData]);
+    const coords = pointObj.map((arr: any) => fromLonLat(arr));
+    // 注意：这里虽然是 LineString 类型，但数据实际表示的是闭合面
+    geometry = new Polygon([coords]);
   } else {
-    const polygonData = pointObj.map((arr: any) => arr.map((i: any) => fromLonLat(i)));
-    polygon = new Polygon(polygonData);
+    const coords = pointObj.map((arr: any) => arr.map((i: any) => fromLonLat(i)));
+    geometry = new Polygon(coords);
   }
-  // 创建特征（Feature）
-  let polygonFeature = new Feature({
-    geometry: polygon
-  });
+
+  const feature = new Feature({ geometry });
 
   const pointStyle = new Style({
     image: new Circle({
       radius: 2,
-      fill: new Fill({
-        color: 'red'
-      })
+      fill: new Fill({ color: 'red' })
     }),
     text: new Text({
       font: '12px Microsoft YaHei',
       text: name,
       scale: 1,
-      fill: new Fill({
-        color: '#7bdd63'
-      })
+      fill: new Fill({ color: '#7bdd63' })
     })
   });
+
   const polygonStyle = new Style({
     stroke: new Stroke({
-      color: type === 'LineString' ? 'skyblue' : 'purple', // 多边形边界线的颜色
-      width: 2 // 多边形边界线的宽度
+      color: type === 'LineString' ? 'skyblue' : 'purple',
+      width: 2
     }),
-    fill: new Fill({
-      color: 'transparent' // 多边形填充颜色，这里设置为半透明红色
-    })
+    fill: new Fill({ color: 'transparent' })
   });
-  // 设置多边形的样式（Style）
-  polygonFeature.setStyle(type === 'Point' ? pointStyle : polygonStyle);
-  // 创建和添加特征到源（Source）
-  let source = new VectorSource();
-  source.addFeature(polygonFeature);
-  // 创建图层并设置源（Layer）
-  layerData[id] = new VectorLayer();
-  layerData[id].setSource(source);
 
-  map.addLayer(layerData[id]);
+  feature.setStyle(type === 'Point' ? pointStyle : polygonStyle);
+
+  // 缓存 feature（用于后续判断）
+  featureMap[id] = feature;
 };
 
 // 控制菜单是否显示
@@ -490,6 +498,7 @@ watch(
 onMounted(() => {
   // 地图初始化
   initOLMap();
+  map.addLayer(sharedLayer);
   // creatPoint(
   //   [
   //     [