网格管理

src/apps/AppBuilding/components/searchMap.vue

@@ -331,7 +331,7 @@ export default {
     addMakert(points) {
       this.$nextTick(() =>{
         let {lib: TMap, map} = this
-       var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
+        var center = new TMap.LatLng(this.latLngCenter.lat, this.latLngCenter.lng)
         map.setCenter(center)
         var marker = null;
         map.setZoom(18)

src/apps/AppGridManagement/components/detail.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="detail">
-    <div class="grid-select" @click="show=true">
+    <div class="grid-select">
       <span class="label">网格选择</span>
       <div class="value">
         <!-- <span>新里程社区居委会</span> -->
-          <ai-tree-picker :ops="treeList" v-model="form.postFunctionId" @select="handerSelect">
-            <div :style="{ color: form.postFunction ? '' : '#c0c4cc' }" v-text="form.postFunction || '请选择社区居委会'" />
-          </ai-tree-picker>
-        <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          <AiTreePicker :ops="treeList" v-model="form.id" @select="handerSelect">
+            <div class="grid-name" :style="{ color: form.gridName ? '' : '#c0c4cc' }">{{form.gridName || '请选择社区居委会'}} <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon></div>
+          </AiTreePicker>
       </div>
     </div>
     <div class="map-content">
@@ -33,6 +32,8 @@
         </div>
       </div>
     </u-popup>
+
+    <u-select v-model="showSelect" mode="mutil-column-auto" :list="treeList" child-name="girdList" label-name="girdName" value-name="id" @confirm="confirm"></u-select>
   </div>
 </template>
 
@@ -47,80 +48,80 @@ export default {
       lib: '',
       map: null,
       show: false,
-      form: {},
-      treeList: []
+      form: {gridName: '', id: ''},
+      treeList: [],
+      showSelect: false,
+      editor: null,
     }
   },
   computed: { ...mapState(['user']) },
   mounted() {
     this.areaId = this.user.areaId
     this.initMap()
+    this.getTreeList()
   },
 
   methods: {
-    handerSelect() {
-
+    handerSelect(e) {
+      console.log(e)
+      this.form.gridName = e.girdName
+      this.form.id = e.id
+      this.initMap(e.points)
     },
-    initMap() {
+    initMap(points) {
       //初始化地图
-      
       this.$nextTick(() =>{
         let {lib: TMap, map} = this
-        var center = new TMap.LatLng(40.040422, 116.273521)
-        var marker = null;
-        var points = []
+        var center = new TMap.LatLng(points[0].lat, points[0].lng)
         map.setCenter(center)
-        map.setZoom(18)
+        map.setZoom(15)
 
-        marker = new TMap.MultiMarker({
-          id: 'marker-layer', // 图层id
-          map: map,
-          styles: {
-            // 点标注的相关样式
-            marker: new TMap.MarkerStyle({
-              width: 25,
-              height: 35,
-              anchor: { x: 16, y: 32 },
-              src:'',
-            }),
-          },
-          geometries: [
+        console.log(points)
+        var simplePath = []
+
+        points.map((item) => {
+          var info = new TMap.LatLng(item.lat, item.lng)
+          simplePath.push(info)
+        })
+			
+        // 初始化几何图形及编辑器
+        this.editor = new TMap.tools.GeometryEditor({
+          map, // 编辑器绑定的地图对象
+          overlayList: [ // 可编辑图层
             {
-              // 点标注数据数组
-              id: 'demo',
-              styleId: 'marker',
-              position: new TMap.LatLng(40.040422, 116.273521),
-            },
+              overlay: new TMap.MultiPolygon({
+                map,
+                styles: {
+                  highlight: new TMap.PolygonStyle({
+                    color: 'rgba(255, 255, 0, 0.6)'
+                  })
+                },
+                geometries: [
+                  {
+                    paths: simplePath
+                  },
+                ]
+              }),
+              id: 'polygon',
+              selectedStyleId: 'highlight'
+            }
           ],
+          actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
+          activeOverlayId: 'polygon', // 激活图层
+          selectable: true, // 开启点选功能
+          snappable: true // 开启吸附
         });
 
-        var infoWindow = null;
-        var infoWindow2 = null
-        var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
-          +`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
-        
-        infoWindow = new TMap.InfoWindow(
-          {
-          map: map,
-          enableCustom: true,
-          position: new TMap.LatLng(40.040422, 116.273521),
-          offset: { y: -70, x: -5 },
-          content: html
-          },
-        );
-
-        infoWindow2 = new TMap.InfoWindow(
-          {
-          map: map,
-          enableCustom: true,
-          position: new TMap.LatLng(40.03592, 116.27058),
-          offset: { y: -70, x: -5 },
-          content: html
-          },
-        );
       })
       
     },
+    getTreeList() {
+      this.$http.post(`/app/appgirdinfo/listAll`).then((res) => {
+        if (res.code == 0) {
+          this.treeList = res.data
+        }
+      })
+    }
     
   }
 }
@@ -202,4 +203,7 @@ ai-tree-picker{
     }
   }
 }
+.grid-name{
+  display: inline-block;
+}
 </style>