26826

packages/2.0.5/AppGridMap/components/list.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="gridMap">
-    <ai-t-map :map.sync="map" :lib.sync="mapLib"/>
+    <ai-t-map :map.sync="map" :lib.sync="mapLib" :libraries="['geometry','service', 'tools']"/>
     <div class="drawer" ref="drawer">
       <div v-if="show" class="drawer-content">
         <b>网格地图</b>
@@ -72,10 +72,12 @@ export default {
       member: {
         memberList: [],
       },
+      currInfo: {},
       infoWindowHtml: "",
       marker: {},
       location: {},
       activeId: null,
+      labels: []
     };
   },
   computed: {
@@ -127,6 +129,8 @@ export default {
     },
     handleNodeClick(val) {
       let path = [];
+      console.log(val)
+      this.currInfo = val
       if (val?.points?.length > 0) {
         path = val.points.map(e => [e.lng, e.lat])
         this.renderGridMap([path])
@@ -140,6 +144,12 @@ export default {
         setTimeout(() => {
           flag && map.setCenter(new TMap.LatLng(this.location.lat, this.location.lng))
         }, 400)
+        if (this.labels.length > 0) {
+          this.labels.forEach(e => {
+            e.destroy(e.id)
+          })
+          this.labels = []
+        }
         const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
         const fitBounds = (latLngList) => {
           // 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
@@ -182,6 +192,35 @@ export default {
           })
           this.polygons.push(polygon)
           bounds.push(fitBounds(path.map(e => new TMap.LatLng(e[1], e[0]))))
+          
+          const points = path.map(e => new TMap.LatLng(e[1], e[0]))
+          var position = TMap.geometry.computeCentroid(points)
+
+          let label = new TMap.MultiLabel({
+            id: `label~${this.currInfo.id}`,
+            data: this.currInfo.id,
+            map: map,
+            styles: {
+              building:  new TMap.LabelStyle({
+                color: '#3777FF',
+                size: 30,
+                alignment: 'center',
+                verticalAlignment: 'middle'
+              })
+            },
+            geometries: [
+              {
+                id: `label-class-${i}`,
+                styleId: 'building',
+                position: position,
+                content: this.currInfo.girdName,
+              }
+            ]
+          })
+          this.labels.push(label)
+          label.on('click', e => {
+            this.getGridInfo(e.target.id.split('~')[1])
+          });
         })
         bounds = bounds.reduce((a, b) => {
           return fitBounds([