四个is筛选后楼顶对应出现图标功能同步

src/assets/styles/map.scss

@@ -366,3 +366,50 @@
     text-align: center;
   }
 }
+
+.building-top {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .row-cell {
+    padding: 3px;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid;
+  }
+  .buildingType-icon {
+    position: relative;
+    display: inline-block;
+    height: 14px;
+    width: 14px;
+    margin-right: 3px;
+  }
+  .isd-count {
+    // position: absolute;
+    // right: vw(-2);
+    // bottom: 0;
+    font-size: vw(12);
+    color: #fff;
+  }
+  .img-icon-build {
+    position: relative;
+    height: 33px;
+    width: 38px;
+  }
+  .building-num {
+    display: block;
+    height: 33px;
+    width: 38px;
+  }
+  .building-num-data {
+    position: absolute;
+    top: 0;
+    display: inline-block;
+    height: 33px;
+    width: 38px;
+    text-align: center;
+    line-height: 28px;
+    font-size: 14px;
+  }
+}

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

@@ -9,7 +9,7 @@ import configJson from "./map-config.json";
 import { mapGetters } from "vuex";
 import garden from "./garden.json";
 import MarsMap from "@/components/mars-map";
-
+import { getMapCount } from "@/api/other.js";
 export default {
   props: {
     xiaoquId: {
@@ -18,7 +18,7 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(["mapParmas", "resetBtn"]),
+    ...mapGetters(["mapParmas", "resetBtn", "queryParamsXiaoqu"]),
   },
 
   data() {
@@ -73,11 +73,109 @@ export default {
       },
       deep: true, // Deeply watch all nested properties
     },
+    queryParamsXiaoqu: {
+      handler(newValue, oldValue) {
+        if (this.xiaoquId == 267) return; // 森茂
+        this.addResultMarker(newValue);
+      },
+      deep: true, // Deeply watch all nested properties
+    },
   },
   created() {
     this.config = configJson[JSON.parse(this.xiaoquId)];
   },
   methods: {
+    extractCharacters(input) {
+      // 使用正则表达式匹配数字、大小写字母和 -
+      const regex = /[0-9a-zA-Z-]+/g;
+      // 用于存储匹配的结果
+      const matches = input.match(regex);
+      // 如果匹配到结果，返回连接后的字符串，否则返回空字符串
+      return matches ? matches.join("") : "";
+    },
+    // 四个is楼顶图标
+    async addResultMarker(data) {
+      if (data.isd || data.isk || data.isx || data.isj) {
+        this.mapLayer.planePoint.show = false;
+        this.mapLayer.buildingTypeMarker.clear();
+        let res = await getMapCount({
+          xiaoquId: data.xiaoquId,
+          isd: data.isd ? data.isd : 0,
+          isk: data.isk ? data.isk : 0,
+          isx: data.isx ? data.isx : 0,
+          isj: data.isj ? data.isj : 0,
+          parentid: data.parentid,
+        });
+        res.data.map((item) => {
+          let suffix = this.xiaoquId == 202 ? "" : "幢";
+          if (this.xiaoquId == 215) {
+            item.deptName = item.deptName.replace(/北侧|南侧|东侧|西侧/g, "");
+          }
+          let buildId =
+            item.deptName + this.extractCharacters(item.buildingName);
+          let buildidItem = this.mapLayer.planePoint.getGraphicById(
+            buildId + suffix
+          );
+          const centerPoint = buildidItem.centerPoint;
+          let html = "";
+          if (item.totalIsdCount) {
+            html += `<img class="buildingType-icon"  src="${require("@/assets/images/ui/isd.png")}">
+                <span class="isd-count">${item.totalIsdCount}</span>
+                </img>`;
+          }
+          if (item.totalIsxCount) {
+            html += ` <img class="buildingType-icon" src="${require("@/assets/images/ui/isx.png")}">
+                <span class="isd-count">${item.totalIsxCount}</span>
+                </img>`;
+          }
+          if (item.totalIskCount) {
+            html += `<img class="buildingType-icon" src="${require("@/assets/images/ui/isk.png")}">
+                <span class="isd-count">${item.totalIskCount}</span>
+                </img>`;
+          }
+          if (item.totalIsjCount) {
+            html += `<img class="buildingType-icon" src="${require("@/assets/images/ui/isj.png")}">
+                <span class="isd-count"> ${item.totalIsjCount}</span>
+               </img>`;
+          }
+
+          let buildingTypeMarker = new mars3d.graphic.DivGraphic({
+            position: {
+              lat: centerPoint._lat,
+              lng: centerPoint._lng,
+              alt: centerPoint._alt,
+            },
+
+            style: {
+              html: `<div class="building-top">
+                  <div class="row-cell" style="border-color:#19FA63;">
+                    ${html}
+                    </div>
+                      <div class="img-icon-build">
+                       <img class="building-num" src="${require("@/assets/images/ui/6.png")}"/>
+                        <div class="building-num-data" style="color:#19FA63">${this.extractCharacters(
+                          item.buildingName
+                        )}</div>
+
+                    </div>
+                  </div>`,
+              scale: 1,
+              clampToGround: true,
+              visibleDepth: false,
+
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              // pixelOffsetY: -22,
+            },
+          });
+          this.mapLayer.buildingTypeMarker.addGraphic(buildingTypeMarker);
+        });
+      } else {
+        this.mapLayer.buildingTypeMarker.clear();
+        this.mapLayer.planePoint.show = true;
+      }
+    },
+
     mapLoad(map) {
       let _this = this;
       this.map = map;
@@ -113,6 +211,9 @@ export default {
 
       this.mapLayer.network = new mars3d.layer.GraphicLayer({ show: true });
       this.map.addLayer(this.mapLayer.network);
+
+      this.mapLayer.buildingTypeMarker = new mars3d.layer.GraphicLayer();
+      this.map.addLayer(this.mapLayer.buildingTypeMarker);
     },
     addMapLayer() {
       this.mapGraphicLayer();
@@ -215,6 +316,7 @@ export default {
       arr.map((item, index) => {
         const { yuanName, buildingNumber, buildingColor, image } =
           this.pointFilter(item.attr);
+        // console.log(item.attr["幢号"]);
         const polygon = new mars3d.graphic.PolygonEntity({
           id: item.attr["幢号"],
           positions: item.positions,