3D小区面 - 3D图标

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

@@ -8,6 +8,7 @@
 import configJson from "./map-config.json";
 import garden from "./garden.json";
 import MarsMap from "@/components/mars-map";
+import stylus from "highlight.js/lib/languages/stylus";
 export default {
   props: {
     xiaoquId: {
@@ -74,7 +75,7 @@ export default {
       this.mapLayer.planePoint = new mars3d.layer.GraphicLayer();
       this.map.addLayer(this.mapLayer.planePoint);
 
-      this.mapLayer.network = new mars3d.layer.GraphicLayer();
+      this.mapLayer.network = new mars3d.layer.GraphicLayer({ show: false });
       this.map.addLayer(this.mapLayer.network);
     },
     addMapLayer() {
@@ -90,9 +91,11 @@ export default {
       ) {
         this.addGardenLayer();
       }
-      // this.addbuildingLayer();
 
       this.addNetworkLayer();
+      this.addbuildingLayer();
+
+      this.add3DXiaoqu();
     },
     //商铺面
     addshop() {
@@ -283,7 +286,6 @@ export default {
             },
           });
           this.mapLayer.plane.addGraphic(polygon);
-
           const point = new mars3d.graphic.BillboardEntity({
             id: `planePoint${index}`,
             position: polygon.centerPoint,
@@ -313,10 +315,13 @@ export default {
               },
             },
             attr: {
+              ...item.attr,
+              ...{
                 id: index,
                 yuanName: yuanName,
                 buildingNumber: buildingNumber,
               },
+            },
           });
           point.on(mars3d.EventType.click, function (e) {
             let buildingItem = _this.mapLayer.plane.getGraphicByAttr(
@@ -354,12 +359,64 @@ export default {
               outline: true,
               outlineWidth: 3,
               outlineColor: "#32FF85",
+              highlight: {
+                type: "click",
+                color: "#FF3992",
+                opacity: 0.5,
+                outline: true,
+                outlineColor: "#FF129D",
+                outlineWidth: 5,
+              },
             },
           });
           this.mapLayer.network.addGraphic(polygon);
         });
       });
     },
+
+    //3D小区模型
+    add3DXiaoqu() {
+      //4D显存 - 集显
+      let maximumMemoryUsage =
+        process.env.NODE_ENV === "production" ? (1024 * 4) / 2 : 1024 / 2;
+      // 倾斜模型
+      this.mapLayer.tiles3dLayer = new mars3d.layer.TilesetLayer({
+        show: false,
+        name: "太仓测试",
+        url: this.config.qingxie.url,
+        maximumScreenSpaceError: 16,
+        maximumMemoryUsage: maximumMemoryUsage,
+        dynamicScreenSpaceError: false,
+        skipLevelOfDetail: true,
+        preferLeaves: true,
+        flyTo: false,
+        center: this.config.viewHome,
+      });
+      this.map.addLayer(this.mapLayer.tiles3dLayer);
+    },
+    //3D
+    handle3D() {
+      this.mapLayer.tiles3dLayer.show = true;
+
+      //修改二维图标成为三维
+      this.mapLayer.planePoint.eachGraphic((graphic) => {
+        let attr = graphic.attr;
+        var centerPoint = graphic.centerPoint;
+        centerPoint.alt = Number(attr["层数"]) * 3 + 10;
+        graphic.setOptions({
+          position: centerPoint,
+          style: {
+            width: 30,
+            height: 30,
+            clampToGround: false,
+            label: {
+              clampToGround: false, //贴地
+              height: centerPoint.alt,
+            },
+          },
+        });
+      });
+    },
   },
 };
 </script>

src/views/xiaoqu.vue

@@ -5,6 +5,10 @@
       :showStreet="false"
     ></NavigationBar>
     <mars-map ref="map" :xiaoquId="queryParamsIndex.xiaoquId"></mars-map>
+
+    <div class="buttom-group">
+      <button @click="handle3D()">三维</button>
+    </div>
   </div>
 </template>
 
@@ -33,7 +37,11 @@ export default {
       xiaoquId: id,
     });
   },
-  methods: {},
+  methods: {
+    handle3D() {
+      this.$refs.map.handle3D();
+    },
+  },
 };
 </script>
 
@@ -45,4 +53,11 @@ export default {
   background-size: 100% 100%;
   overflow: hidden;
 }
+
+.buttom-group {
+  position: absolute;
+  z-index: 20;
+  bottom: 0;
+  left: 0;
+}
 </style>