地图select操作

src/components/mars-map/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="map-container">
     <mars-map :url="configUrl" :options="options" @onload="onMapload" />
+    <slot name="select"></slot>
   </div>
 </template>
 

src/views/index.vue

@@ -7,8 +7,7 @@
     <foldpanelRight>
       <IndexModelRight />
     </foldpanelRight>
-    <mars-map @mapLoad="mapLoad" :options="options"></mars-map>
-    <!-- <LeafletMap>
+    <mars-map @mapLoad="mapLoad" :options="options" ref="map">
       <template #select>
         <div class="select-search">
           <el-select
@@ -45,7 +44,7 @@
           </el-select>
         </div>
       </template>
-    </LeafletMap> -->
+    </mars-map>
   </div>
 </template>
 
@@ -59,7 +58,6 @@ import {
   foldpanelRight,
   IndexModelRight,
 } from "@/views/components/index.js";
-// import LeafletMap from "@/components/LeafletMap";
 import { getCommunitylist, getXiaoqulist } from "@/api/taicangpop/data.js";
 
 export default {
@@ -74,7 +72,6 @@ export default {
     IndexModelLeft,
     foldpanelRight,
     IndexModelRight,
-    // LeafletMap,
   },
   data() {
     const basePathUrl = window.basePathUrl || "";
@@ -146,11 +143,23 @@ export default {
       this.map = map;
 
       map.on(mars3d.EventType.wheel, function (e) {
-        _this.mapLayer.shequ.eachGraphic((graphic) => {
+        _this.zoomChange();
+      });
+
+      this.addLayer();
+      this.addstreet();
+      this.addShequ();
+      this.addXiaoqu();
+      this.addRoad();
+      this.addRiver();
+    },
+    zoomChange() {
+      let level = this.map.level;
+      this.mapLayer.shequ.eachGraphic((graphic) => {
         if (graphic.isPrivate) {
           return;
         }
-          if (e.target.level >= 14) {
+        if (level >= 14) {
           graphic.openHighlight(
             {
               label: {
@@ -163,19 +172,11 @@ export default {
           graphic.closeHighlight();
         }
       });
-        if (e.target.level >= 14) {
-          _this.mapLayer.xiaoqu.show = true;
+      if (level >= 14) {
+        this.mapLayer.xiaoqu.show = true;
       } else {
-          _this.mapLayer.xiaoqu.show = false;
+        this.mapLayer.xiaoqu.show = false;
       }
-      });
-
-      this.addLayer();
-      this.addstreet();
-      this.addShequ();
-      this.addXiaoqu();
-      this.addRoad();
-      this.addRiver();
     },
     //河 - 河名
     addRiver() {
@@ -224,37 +225,6 @@ export default {
           this.mapLayer.river.addGraphic(graphic);
         });
       });
-      // mars3d.Util.fetchJson({ url: this.riveruUrl }).then((res) => {
-      //   const arr = mars3d.Util.geoJsonToGraphics(res);
-      //   console.log(arr);
-      //   arr.map((item) => {
-      //     const graphic = new mars3d.graphic.Water({
-      //       positions: item.positions,
-      //       style: {
-      //         height: 3, // 水面高度
-      //         normalMap: require("../assets/images/ui/waterNormals.jpg"), // 水正常扰动的法线图
-      //         frequency: 8000.0, // 控制波数的数字。
-      //         animationSpeed: 0.02, // 控制水的动画速度的数字。
-      //         amplitude: 5.0, // 控制水波振幅的数字。
-      //         specularIntensity: 0.8, // 控制镜面反射强度的数字。
-      //         baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
-      //         blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
-      //         opacity: 0.7, // 透明度
-      //         clampToGround: false, // 是否贴地
-      //         textureCoordinates: {
-      //           positions: [
-      //             new Cesium.Cartesian2(0, 1),
-      //             new Cesium.Cartesian2(0, 0),
-      //             new Cesium.Cartesian2(0.5, 0),
-      //             new Cesium.Cartesian2(1, 0),
-      //             new Cesium.Cartesian2(1, 1),
-      //           ],
-      //         },
-      //       },
-      //     });
-      //     this.mapLayer.river.addGraphic(graphic);
-      //   });
-      // });
     },
     //路 - 路名
     addRoad() {
@@ -361,6 +331,7 @@ export default {
         const arr = mars3d.Util.geoJsonToGraphics(res);
         arr.map((item, index) => {
           const polygonEntity = new mars3d.graphic.PolygonEntity({
+            id: `shequ${item.id}`,
             positions: item.positions,
             style: {
               fill: true,
@@ -418,6 +389,7 @@ export default {
     addstreet() {
       mars3d.Util.fetchJson({ url: this.streetUrl }).then((res) => {
         const arr = mars3d.Util.geoJsonToGraphics(res);
+
         arr.map((item, index) => {
           const wall = new mars3d.graphic.WallPrimitive({
             positions: item.positions[0],
@@ -439,12 +411,35 @@ export default {
 
     handleChange(e) {
       if (!e) return;
+      let _this = this;
       this.$store.dispatch("GetXiaoquInfo", e);
       this.xiaoqu = "";
       this.xiaoquList = this.communityList.filter(
         (item) => item.dept_id == e
       )[0].children;
-      if (e == 100) e = undefined;
+      if (e == 100) {
+        e = undefined;
+        this.map.flyHome({
+          duration: 1,
+        });
+        setTimeout(() => {
+          this.zoomChange();
+        }, 1200);
+      } else {
+        let shequItem = this.mapLayer.shequ.getGraphicByAttr(
+          `shequ${e}`
+        ).centerPoint;
+        this.map.flyToPoint(
+          new mars3d.LngLatPoint(shequItem._lng, shequItem._lat),
+          {
+            radius: 2776.4,
+            duration: 1,
+            complete: function () {
+              _this.zoomChange();
+            },
+          }
+        );
+      }
       this.$store.dispatch("GetYjtotal", {
         shequId: e,
       });