地图

src/apps/AppGridManagement/Map.vue

@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="map-content">
-      <AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['service', 'tools']"/>
+      <AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['geometry','service', 'tools']"/>
     </div>
     <u-popup v-model="show" mode="bottom" border-radius="14">
       <div class="popup">
@@ -26,6 +26,15 @@
             <span class="label">网格层级</span>
             <span class="value">{{ $dict.getLabel('girdLevel', form.girdLevel) }}</span>
           </div>
+          <div v-if="form.girdMemberManageList && form.girdMemberManageList.length">
+            <div class="info-flex" v-for="(item, index) in  form.girdMemberManageList" :key="index">
+              <span class="label">网格长</span>
+              <span class="value">{{ item.name }}&nbsp;&nbsp;{{ item.phone }}
+                <img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone(item.phone)" class="phone-icon"
+                    v-if="item.phone">
+              </span>
+            </div>
+          </div>
           <div v-if="form.girdMemberList && form.girdMemberList.length">
             <div class="info-flex" v-for="(item, index) in  form.girdMemberList" :key="index">
               <span class="label">网格管理员</span>
@@ -74,9 +83,10 @@ export default {
         if (res?.data) {
           this.treeList = res.data
 
-          const arr = res.data.map(e => {
+          const arr = res.data.filter(v => v.points).map(e => {
             return {
               id: e.id,
+              girdName: e.girdName,
               points: e.points.map(p => [p.lng, p.lat])
             }
           })
@@ -111,8 +121,8 @@ export default {
         }
         if (paths?.length > 0) {
           let bounds = []
+
           paths.forEach((path, i) => {
-            console.log(path)
             let color = colors[i % colors.length]
             let polygon = new TMap.MultiPolygon({
               map, styles: {
@@ -135,10 +145,33 @@ export default {
             })
 
             const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
-            
-            // console.log(TMap)
 
-            // var position = TMap.geometry.computeCentroid(points)
+            var position = TMap.geometry.computeCentroid(points)
+
+            let label = new TMap.MultiLabel({
+              id: `label~${path.id}`,
+              data: path.id,
+              map: map,
+              styles: {
+                building:  new TMap.LabelStyle({
+                  color: '#3777FF',
+                  size: 20,
+                  alignment: 'center',
+                  verticalAlignment: 'middle'
+                })
+              },
+              geometries: [
+                {
+                  id: `label-class-${i}`,
+                  styleId: 'building',
+                  position: position,
+                  content: path.girdName,
+                }
+              ]
+            })
+            label.on('click', e => {
+              this.getGridInfo(e.target.id.split('~')[1])
+            });
           })
           bounds = bounds.reduce((a, b) => {
             return fitBounds([
@@ -166,9 +199,10 @@ export default {
     },
     handleSelect(e) {
       if (e?.points?.length > 0) {
-        this.form = e
+        const points = e.points.map(e => new TMap.LatLng(e.lat, e.lng))
-        let path = e.points?.map(p => [p.lng, p.lat]) || []
+        var position = TMap.geometry.computeCentroid(points)
-        this.renderGridMap([path])
+        this.map.setCenter(position)
+        this.map.setZoom(15)
       } else {
         this.$u.toast("所选网格没有标绘!")
       }

src/components/AiTMap.vue

@@ -57,7 +57,6 @@ export default {
         center: new TMap.LatLng(this.config.lat, this.config.lng),
         ...this.ops
       })
-      console.log(TMap)
       this.$emit('loaded')
       this.$emit('update:lib', TMap)
       this.$emit('update:map', this.tmap)