更新腾讯地图

packages/2.0.5/AppGridMap/components/list.vue

@@ -1,18 +1,13 @@
 <template>
   <div class="gridMap">
-    <ai-map :map.sync="map" :lib.sync="mapLib"/>
+    <ai-t-map :map.sync="map" :lib.sync="mapLib"/>
     <div class="drawer" ref="drawer">
       <div v-if="show" class="drawer-content">
         <b>网格地图</b>
         <div class="tree">
           <div class="input">
-            <el-input
+            <el-input placeholder="请输入网格名称"
-                placeholder="请输入网格名称"
+                      v-model="filterText" size="mini" suffix-icon="el-icon-search"/>
-                v-model="filterText"
-                size="mini"
-                suffix-icon="el-icon-search"
-            >
-            </el-input>
           </div>
           <header class="header">
             <span>网格列表</span>
@@ -55,14 +50,9 @@ export default {
       mapLib: null,
       show: true,
       retryMapCount: 0,
+      polygons: [],
 
-      overlays: [],
       drawer: false,
-      navList: [
-        // { id: 0, title: "网格员" },
-        {id: 1, title: "网格"},
-      ],
-      activeIndex: 1,
       filterText: "",
       treeObj: {
         treeList: [],
@@ -72,7 +62,7 @@ export default {
         },
         defaultExpandedKeys: [],
       },
-      polygon: "",
+
       path: [],
       searchObj: {
         onlineStatus: "",
@@ -127,36 +117,68 @@ export default {
     },
     handleNodeClick(val) {
       let path = [];
-      if (val?.points?.length>0) {
+      if (val?.points?.length > 0) {
         path = val.points.map(e => [e.lng, e.lat])
         this.renderGridMap([path])
-      }else{
+      } else {
         this.$message.error("所选网格没有标绘!")
       }
     },
     renderGridMap(paths) {
-      let {map, mapLib: AMap, retryMapCount} = this
+      let {map, mapLib: TMap, retryMapCount} = this
-      if (AMap) {
+      if (TMap) {
         const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
-        map.clearMap()
+        const fitBounds = (latLngList) => {
+          // 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
+          if (latLngList.length === 0) {
+            return null;
+          }
+          let boundsN = latLngList[0].getLat();
+          let boundsS = boundsN;
+          let boundsW = latLngList[0].getLng();
+          let boundsE = boundsW;
+          latLngList.forEach((point) => {
+            point.getLat() > boundsN && (boundsN = point.getLat());
+            point.getLat() < boundsS && (boundsS = point.getLat());
+            point.getLng() > boundsE && (boundsE = point.getLng());
+            point.getLng() < boundsW && (boundsW = point.getLng());
+          });
+          return new TMap.LatLngBounds(
+              new TMap.LatLng(boundsS, boundsW),
+              new TMap.LatLng(boundsN, boundsE)
+          );
+        }
+        if (this.polygons.length > 0) {
+          this.polygons.forEach(e => e.destroy())
+          this.polygons = []
+        }
+        let bounds = []
         paths.forEach((path, i) => {
           let color = colors[i % colors.length]
-          this.polygon = new AMap.Polygon({
+          let polygon = new TMap.MultiPolygon({
-            path,
+            map, styles: {
-            strokeColor: color,
+              default: new TMap.PolygonStyle({
-            strokeWeight: 2,
+                showBorder: true,
-            strokeStyle: "dashed",
+                borderColor: color,
-            strokeOpacity: 1,
+                borderWidth: 2,
-            fillColor: color,
+                color: this.$colorUtils.Hex2RGBA(color, 0.1),
-            fillOpacity: 0.1,
+                borderDashArray: [10, 10]
-            zIndex: 50,
+              })
-            lineJoin: "round",
+            },
-            lineCap: "round",
+            geometries: [{paths: path.map(e => new TMap.LatLng(e[1], e[0]))}]
-          });
+          })
-          map.add(this.polygon);
+          this.polygons.push(polygon)
+          bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0]))))
         })
-        map.setFitView();
+        bounds = bounds.reduce((a, b) => {
-        this.eventOn()
+          return fitBounds([
+            a.getNorthEast(),
+            a.getSouthWest(),
+            b.getNorthEast(),
+            b.getSouthWest(),
+          ]);
+        });
+        map.fitBounds(bounds, {padding: 100})
       } else {
         if (retryMapCount < 5) {
           setTimeout(() => {
@@ -166,12 +188,6 @@ export default {
         }
       }
 
-    },
-    //地图事件绑定
-    eventOn() {
-      this.map.on("mousemove", this.showInfoMove, this);
-    },
-    showInfoMove(e) {
     },
     hasClass(ele, cls) {
       return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
@@ -309,7 +325,7 @@ export default {
 
   .drawer {
     width: 280px;
-    height: 100vh;
+    height: 100%;
     position: absolute;
     z-index: 1000;
     top: 0;