单体化高亮

src/views/components/xiaoqu/map/index.vue

@@ -63,6 +63,11 @@ export default {
           _this.addMapLayer();
         },
       });
+      map.on(mars3d.EventType.click, function (e) {
+        if (!e.id) {
+          map.getLayerById("dth").clear(); //清除单体化
+        }
+      });
     },
     //图层组
     mapGraphicLayer() {
@@ -92,16 +97,16 @@ export default {
         this.addGardenLayer();
       }
 
-      this.addNetworkLayer();
+      // this.addNetworkLayer();
       this.addbuildingLayer();
-
       this.add3DXiaoqu();
+
+      this.addDTH();
     },
     //商铺面
     addshop() {
       this.mapLayer.shopLayer = new mars3d.layer.GraphicLayer();
       this.map.addLayer(this.mapLayer.shopLayer);
-
       mars3d.Util.fetchJson({
         url: this.configUrl + `lib/geoJson/xiaoqu/shop${this.xiaoquId}.json`,
       }).then((res) => {
@@ -227,14 +232,21 @@ export default {
         this.mapLayer.garden.addGraphic(graphic);
       });
     },
+    extractNumbersAndDashes(str) {
+      // 正则表达式匹配数字和可能的 - 号
+      const regex = /(?:\d+-?)+/g;
+      // 查找所有匹配的子字符串
+      const matches = str.match(regex);
+      // 如果有匹配的结果，将其合并为一个字符串并返回
+      return matches ? matches.join("") : "";
+    },
     pointFilter(attr) {
       let data = garden[this.xiaoquId];
       let yuanName = "";
-      let buildingNumber = "";
+      let buildingNumber = this.extractNumbersAndDashes(attr["幢号"]);
       let image = "";
       let buildingColor = "";
       const match = attr["幢号"].match(/^(.*?)(\d+)/);
-      const match2 = attr["幢号"].match(/\d+/);
       if (match) {
         //  215是景瑞
         yuanName =
@@ -244,7 +256,6 @@ export default {
             ? attr["别称"]
             : match[1];
       }
-      buildingNumber = match2 ? match2[0] : "";
       if (
         this.xiaoquId == 245 ||
         this.xiaoquId == 202 ||
@@ -275,7 +286,7 @@ export default {
           const { yuanName, buildingNumber, buildingColor, image } =
             this.pointFilter(item.attr);
           const polygon = new mars3d.graphic.PolygonEntity({
-            id: `building${index}`,
+            id: buildingNumber,
             positions: item.positions,
             style: {
               color: "transparent",
@@ -287,7 +298,7 @@ export default {
           });
           this.mapLayer.plane.addGraphic(polygon);
           const point = new mars3d.graphic.BillboardEntity({
-            id: `planePoint${index}`,
+            id: buildingNumber,
             position: polygon.centerPoint,
             style: {
               image: image,
@@ -324,9 +335,13 @@ export default {
             },
           });
           point.on(mars3d.EventType.click, function (e) {
-            let buildingItem = _this.mapLayer.plane.getGraphicByAttr(
-              `building${e.target.options.attr.id}`
-            );
+            let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id);
+            if (_this.mapLayer.tiles3dLayer.show) {
+              const geojson = buildingItem.toGeoJSON();
+              _this.map
+                .getLayerById("dth")
+                .loadGeoJSON(geojson, { clear: true });
+            } else {
               buildingItem.openHighlight({
                 color: "#FFA200",
                 opacity: 0.3,
@@ -334,6 +349,7 @@ export default {
                 outlineColor: "#F5DC02",
                 outlineWidth: 2,
               });
+            }
           });
           this.mapLayer.planePoint.addGraphic(point);
         });
@@ -346,7 +362,6 @@ export default {
         url: this.configUrl + `lib/geoJson/xiaoqu/network${this.xiaoquId}.json`,
       }).then((res) => {
         const arr = mars3d.Util.geoJsonToGraphics(res);
-
         arr.map((item, index) => {
           let polygon = new mars3d.graphic.PolygonEntity({
             positions: item.positions,
@@ -417,6 +432,30 @@ export default {
         });
       });
     },
+
+    //单体化
+    addDTH() {
+      let geoJsonLayerDTH = new mars3d.layer.GeoJsonLayer({
+        id: "dth",
+        show: true,
+        name: "太仓-楼栋",
+        symbol: {
+          type: "polygonP",
+          styleOptions: {
+            color: "#FFA200",
+            opacity: 0.3,
+            outline: true,
+            outlineColor: "#F5DC02",
+            outlineWidth: 8,
+            outlineOpacity: 0.3,
+            clampToGround: true,
+            classification: true,
+            buffer: 1,
+          },
+        },
+      });
+      this.map.addLayer(geoJsonLayerDTH);
+    },
   },
 };
 </script>