二维图标加载完毕

src/assets/styles/map.css

@@ -165,3 +165,15 @@
   min-width: 75px;
   float: left;
 }
+
+
+.shop-dialog {
+  & > div {
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    .shop-value {
+      margin-left: 6px;
+    }
+  }
+}

src/views/components/xiaoqu/map/garden.json

@@ -124,5 +124,23 @@
       "icon": "info",
       "height": 50
     }
+  },
+  "248": {
+    "华侨花园": {
+      "id": 5,
+      "color": "#FFD015",
+      "x": 121.131352,
+      "y": 31.450979,
+      "icon": "info",
+      "height": 50
+    },
+    "别墅区": {
+      "id": 4,
+      "color": "#FF87CE",
+      "x": 121.136321,
+      "y": 31.451435,
+      "icon": "info",
+      "height": 50
+    }
   }
 }

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

@@ -77,6 +77,10 @@ export default {
     addMapLayer() {
       this.mapGraphicLayer();
 
+      if (this.xiaoquId == 267) {
+        this.addshop();
+      }
+
       if (
         this.xiaoquId === 202 ||
         this.xiaoquId === 245 ||
@@ -88,6 +92,103 @@ export default {
 
       this.addbuildingLayer();
     },
+    //商铺面
+    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) => {
+        const arr = mars3d.Util.geoJsonToGraphics(res);
+        arr.map((item, index) => {
+          const polygon = new mars3d.graphic.PolygonEntity({
+            positions: item.positions,
+            style: {
+              color: "#062F63",
+              opacity: 0.6,
+              outline: true,
+              outlineWidth: 2,
+
+              highlight: {
+                type: "click",
+                color: "#FD873F",
+                label: {
+                  color: "black",
+                },
+              },
+              label: {
+                text: item.attr.TextString,
+                color: "#fff",
+                font_size: 12,
+                outline: false,
+                scaleByDistance: true,
+                scaleByDistance_far: 20000000,
+                scaleByDistance_farValue: 0.1,
+                scaleByDistance_near: 1000,
+                scaleByDistance_nearValue: 1,
+              },
+            },
+            attr: item.attr,
+          });
+          polygon.bindPopup(function (event) {
+            const item = event.graphic?.attr;
+            if (!item || item.TextString == " ") {
+              return false;
+            }
+            const inthtml = `
+                <div class="shop-dialog">
+                  <div class="shop-item">
+                      <div class="shop-lable">楼号:</div>
+                      <div class="shop-value">${item["楼号"]}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">门牌号:</div>
+                      <div class="shop-value">${item.TextString}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">房间号:</div>
+                      <div class="shop-value">${item["房间号"]}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">招牌名称:</div>
+                      <div class="shop-value">${item["招牌名称"]}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">商铺面积:</div>
+                      <div class="shop-value">${item["商铺面积"]}㎡</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">负责人姓名:</div>
+                      <div class="shop-value">${item["负责人姓名"]}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">电话:</div>
+                      <div class="shop-value">${item["联系电话"]}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">经营类别:</div>
+                      <div class="shop-value">${item["经营类别"]}</div>
+                    </div>
+                     <div class="shop-item">
+                      <div class="shop-lable">经营状态:</div>
+                      <div class="shop-value">${item["经营状态"]}</div>
+                    </div>
+                    <div class="shop-item">
+                      <div class="shop-lable">备注:</div>
+                      <div class="shop-value">${item["备注"]}</div>
+                    </div>
+                    <div class="shop-item">
+                      <div class="shop-lable">企业营业执照名称:</div>
+                      <div class="shop-value">${item["企业营业执"]}</div>
+                    </div>
+                </div>`;
+            return inthtml;
+          });
+          this.mapLayer.shopLayer.addGraphic(polygon);
+        });
+      });
+    },
     //苑图层
     addGardenLayer() {
       const data = garden[this.xiaoquId];
@@ -132,7 +233,12 @@ export default {
       const match2 = attr["幢号"].match(/\d+/);
       if (match) {
         //  215是景瑞
-        yuanName = this.xiaoquId == 215 ? attr["网格名"] : match[1];
+        yuanName =
+          this.xiaoquId == 215
+            ? attr["网格名"]
+            : this.xiaoquId == 248
+            ? attr["别称"]
+            : match[1];
       }
       buildingNumber = match2 ? match2[0] : "";
       if (
@@ -162,7 +268,6 @@ export default {
           this.configUrl + `lib/geoJson/xiaoqu/building${this.xiaoquId}.json`,
       }).then((res) => {
         const arr = mars3d.Util.geoJsonToGraphics(res);
-        console.log(arr);
         arr.map((item, index) => {
           const { yuanName, buildingNumber, buildingColor, image } =
             this.pointFilter(item.attr);