3d-2d高亮处理

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

@@ -80,9 +80,16 @@ export default {
         },
       });
       map.on(mars3d.EventType.click, function (e) {
-        // if (!e.id ) {
-        //   map.getLayerById("dth").clear(); //清除单体化
-        // }
+        if (!e.id) {
+          // map.getLayerById("dth").clear(); //清除单体化
+          // _this.mapLayer.network.eachGraphic((graphic) => {
+          //   graphic.closeHighlight();
+          // });
+          _this.$store.commit("CHANGE_QUERY", {
+            buildingid: undefined,
+            deptId: undefined,
+          }); //存储全局参数
+        }
       });
     },
     //图层组
@@ -114,8 +121,6 @@ export default {
       }
 
       this.addbuildingLayer();
-
-      // this.addDTH();
     },
     //商铺面
     addshop() {
@@ -313,13 +318,6 @@ export default {
           });
           this.mapLayer.plane.addGraphic(polygon);
 
-          polygon.on(mars3d.EventType.highlightClose, function (e) {
-            // _this.$store.commit("CHANGE_QUERY", {
-            // buildingid: undefined,
-            //deptId: undefined,
-            //}); //存储全局参数
-          });
-
           const point = new mars3d.graphic.BillboardEntity({
             id: item.attr["幢号"],
             position: polygon.centerPoint,
@@ -357,27 +355,23 @@ export default {
           });
           point.on(mars3d.EventType.click, async function (e) {
             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,
-            //     outline: true,
-            //     outlineColor: "#F5DC02",
-            //     outlineWidth: 2,
-            //   });
-            // }
-            buildingItem.openHighlight({
-              color: "#FFA200",
-              opacity: 0.3,
-              outline: true,
-              outlineColor: "#F5DC02",
-              outlineWidth: 2,
-            });
+            if (
+              _this.mapLayer.tiles3dLayer &&
+              _this.mapLayer.tiles3dLayer.show
+            ) {
+              const geojson = buildingItem.toGeoJSON();
+              _this.map
+                .getLayerById("dth")
+                .loadGeoJSON(geojson, { clear: true });
+            } else {
+              buildingItem.openHighlight({
+                color: "#FFA200",
+                opacity: 0.3,
+                outline: true,
+                outlineColor: "#F5DC02",
+                outlineWidth: 2,
+              });
+            }
             let deptData = await _this.getDeptId({
               xiaoquId: _this.xiaoquId,
               deptName: e.target.attr.yuanName,
@@ -428,6 +422,11 @@ export default {
       this.$nextTick(() => {
         if (show && this.mapLayer.network.length > 0) {
           this.mapLayer.network.show = true;
+
+          // this.mapLayer.network.eachGraphic((graphic) => {
+          //   graphic.closeHighlight();
+          // });
+
           let networkItem = this.mapLayer.network.getGraphicById(show);
           networkItem.openHighlight({
             type: "click",
@@ -463,28 +462,36 @@ export default {
           center: this.config.viewHome,
         });
         this.map.addLayer(this.mapLayer.tiles3dLayer);
+        this.addDTH();
       }
-      if (show && this.mapLayer.tiles3dLayer)
+      if (show && this.mapLayer.tiles3dLayer) {
+        this.handle3dPoint("3d");
         this.mapLayer.tiles3dLayer.show = true;
-      if (!show && this.mapLayer.tiles3dLayer)
+      }
+
+      if (!show && this.mapLayer.tiles3dLayer) {
+        this.handle3dPoint("2d");
         this.mapLayer.tiles3dLayer.show = false;
+      }
     },
     //2D - 3D点处理
-    handle3dPoint() {
-      this.mapLayer.tiles3dLayer.show = true;
+    handle3dPoint(type) {
       //修改二维图标成为三维
       this.mapLayer.planePoint.eachGraphic((graphic) => {
-        let attr = graphic.attr;
         var centerPoint = graphic.centerPoint;
-        centerPoint.alt = Number(attr.floorNum) * 3 + 10;
+        if (type == "3d") {
+          let attr = graphic.attr;
+          centerPoint.alt = Number(attr.floorNum) * 3 + 10;
+        }
+
         graphic.setOptions({
           position: centerPoint,
           style: {
-            width: 30,
-            height: 30,
-            clampToGround: false,
+            width: type == "3d" ? 30 : 46,
+            height: type == "3d" ? 30 : 42,
+            clampToGround: type == "3d" ? false : true,
             label: {
-              clampToGround: false, //贴地
+              clampToGround: type == "3d" ? false : true,
               height: centerPoint.alt,
             },
           },

src/views/components/xiaoqu/mapSearchBox.vue

@@ -94,6 +94,8 @@ export default {
         console.log(networkName);
       }
 
+      this.$store.commit("CHANGE_QUERY", { parentid: e });
+
       this.$store.commit("CHANGE_QUERY_MAP", { networkName: networkName });
     },
     handleMapLayer(e) {

src/views/xiaoqu.vue

@@ -78,7 +78,7 @@ export default {
       return !this.queryParamsXiaoqu.parentid &&
         !this.queryParamsXiaoqu.buildingid
         ? "小区简介"
-        : this.queryParamsXiaoqu.parentid
+        : this.queryParamsXiaoqu.parentid && !this.queryParamsXiaoqu.buildingid
         ? "网格简介"
         : "统计分析";
     },