网格地图

2022-07-02 11:36:13 +08:00
parent a7c6883756
commit 72e1559fa7
2 changed files with 252 additions and 286 deletions
--- a/src/project/xicheng/AppMerchantManage/AppMerchantManage.vue
+++ b/src/project/xicheng/AppMerchantManage/AppMerchantManage.vue
@@ -68,7 +68,7 @@
            size: 10,
            current: this.current,
            businessName: this.keyword
-          },
+          }
        }).then((res) => {
          if (res.code == 0) {
            this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
--- a/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue
+++ b/src/project/xicheng/AppMerchantMap/AppMerchantMap.vue
@@ -1,44 +1,19 @@
 <template>
  <div class="AppMerchantMap">
-    <div class="grid-select">
-      <AiPagePicker type="gird" class="fill" @select="handleSelectGird">
-        <div class="gird-content">
-          <div class="label">网格选择</div>
-          <div class="grid-select__right">
-            <span>{{ form.girdName || '请选择' }}</span>
-            <u-icon name="arrow-right" color="#cccccc" size="26" style="margin-left:4px;"></u-icon>
-          </div>
-        </div>
-      </AiPagePicker>
+    <div class="search">
+      <image :src="$cdn + 'xincheng/search.png'" />
+      <input placeholder="请输入姓名、店名、电话" v-model="businessName" @confirm="getList">
    </div>
    <div class="map-content">
-      <AiTMap ref="AiTMap" :map.sync="map" :lib.sync="lib" :libraries="['geometry','service', 'tools']"/>
+      <AiTMap :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"/>
    </div>
-    <u-popup v-model="show" mode="bottom" border-radius="14">
-      <div class="popup">
-        <div class="bg"></div>
-        <div class="title">{{ form.girdName }}</div>
-        <scroll-view scroll-y="true" class="grid-info">
-          <div class="info-flex" v-for="(item) in  form.girdMemberManageList" :key="item.id" flex>
-            <div class="label">网格长</div>
-            <div class="value fill" v-text='[item.name, item.phone].join("  ")'/>
-            <AiPhone :phone="item.phone"/>
-          </div>
-          <div class="info-flex" v-for="(item) in  form.girdMemberList" :key="item.id" flex>
-            <div class="label">网格员</div>
-            <div class="value fill" v-text='[item.name, item.phone].join("  ")'/>
-            <AiPhone :phone="item.phone"/>
-          </div>
-        </scroll-view>
-      </div>
-    </u-popup>
  </div>
 </template>

 <script>
-import {mapState} from 'vuex'
+  import {mapState} from 'vuex'

-export default {
+  export default {
    name: 'AppMerchantMap',
    appName: '商户地图',
    data() {
@@ -46,276 +21,267 @@ export default {
        areaId: '',
        lib: null,
        map: null,
-      show: false,
-      form: {girdName: '', id: ''},
-      treeList: [],
-      showSelect: false,
-      editor: null,
        polygons: [],
-      labels: []
+        labels: [],
+        businessName: '',
+        markers: [],
+        ops: {},
+        markers: [],
+        MarkerCluster: null
      }
    },
    computed: {...mapState(['user', 'config'])},
-  created() {
-    this.$dict.load('girdType')
+
+    created () {
      this.areaId = this.user.areaId
+      this.getList()
    },
-  onShow() {
-    document.title = "网格管理"
+
+    mounted () {
+      this.initMap()
    },
+
    methods: {
-    getGridList(id) {
-      this.$loading()
-      this.$http.post(`/app/appgirdinfo/queryChildGirdInfoByGirdId?girdId=${id}`).then((res) => {
-        if (res?.data) {
-          const arr = res.data.map(v => {
+      getList () {
+        this.$http.post('/app/appcompany/list', null, {
+          params: {
+            size: 100000,
+            current: 1,
+            businessName: this.businessName
+          }
+        }).then((res) => {
+          if (res.code == 0) {
+            const markers = res.data.records.filter(item => item.lat).map(item => {
              return {
-              id: v.id,
-              girdName: v.girdName,
-              points: v.points ? v.points.map(p => [p.lng, p.lat]) : []
+                title: item.businessName,
+                lnglat: [item.lon, item.lat],
+                lat: item.lat,
+                lng: item.lon,
+                id: item.id,
+                name: item.businessName
              }
            })
-          this.renderGridMap(arr)
+
+            this.getMarkerCluster(markers)
          }
-      }).finally(() => {
-        this.$hideLoading()
        })
      },
-    getGridInfo(id, flag) {
-      this.$loading()
-      this.$http.post(`/app/appgirdinfo/queryDetailById?id=${id}`).then((res) => {
-        this.$hideLoading()
-        if (res?.data) {
-          this.form = res.data

-          if (res.data.points && flag) {
-            const arr = [{
-              id: res.data.id,
-              girdName: res.data.girdName,
-              points: res.data.points.map(p => [p.lng, p.lat])
-            }]
-
-            this.renderGridMap(arr)
+      getMarkerCluster(points, count = 0) {
+        let {lib: TMap, map} = this
+        if (map) {
+          if (this.markers.length) {
+            console.log(this.MarkerCluster)
+            // this.MarkerCluster.destroy()
+            // this.MarkerCluster = null
+            this.markers.forEach(v => {
+              v.setMap(null)
+            })
          }

-          this.$nextTick(() => {
-            !flag && (this.show = true)
+          class ClusterBubble extends TMap.DOMOverlay {
+            constructor(options) {
+              super(options);
+            }
+
+            onInit(options) {
+              this.content = options.content;
+              this.position = options.position;
+              this.customClass = options.customClass
+            };
+
+            onDestroy() {
+              this.dom.removeEventListener('click', this.onClick);
+              this.removeAllListeners();
+            }
+
+            createDOM() {
+              let dom = document.createElement('div');
+              dom.classList.add(this.customClass || 'marker');
+              dom.innerText = this.content;
+
+              // 监听点击事件，实现zoomOnClick
+              this.onClick = this.onClick.bind(this);
+              // pc端注册click事件，移动端注册touchend事件
+              dom.addEventListener('click', this.onClick);
+              dom.addEventListener('touchend', this.onClick);
+              return dom;
+            };
+
+            updateDOM() {
+              if (!this.map) {
+                return;
+              }
+              // 经纬度坐标转容器像素坐标
+              let pixel = this.map.projectToContainer(this.position);
+
+              // 使文本框中心点对齐经纬度坐标点
+              let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
+              let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
+              this.dom.style.transform = `translate(${left}, ${top})`;
+              this.emit('dom_updated');
+            };
+
+            onClick() {
+              this.emit('click');
+            }
+          }
+
+          this.config.latlng && map.setCenter(this.config.latlng)
+
+          this.MarkerCluster = new TMap.MarkerCluster({
+            map, gridSize: 60,
+            enableDefaultStyle: false, // 关闭默认样式
+            geometries: points.map(e => ({
+              position: new TMap.LatLng(e.lat, e.lng),
+              content: `${e.name}`,
+              properties: {...e}
+            })) || [],
+            zoomOnClick: true
+          })
+          let cls = []
+          this.MarkerCluster.on('cluster_changed', () => {
+            if (this.markers.length) {
+              this.markers.forEach(function (item) {
+                item.destroy();
              })
            }
-      }).catch(() => {
-        this.$hideLoading()
+            cls.forEach(e => e.destroy())
+            cls = []
+            let clusters = this.MarkerCluster.getClusters()
+            clusters.forEach((item) => {
+              if (item.geometries?.length > 1) {
+                //聚合样式
+                let clusterBubble = new ClusterBubble({
+                  map,
+                  position: item.center,
+                  content: item.geometries.length,
+                  customClass: 'cluster'
                })
-    },
-    renderGridMap(paths, count = 0) {
-      let {map, lib: TMap, $refs: {AiTMap: {fitBounds}}} = this
-      if (TMap) {
-        const colors = ["#A194F4", "#7CBDF3", "#F3A57D", "#62D063", "#58DBDA", "#F7D151"]
-        if (this.polygons.length > 0) {
-          this.polygons.forEach(e => e.destroy())
-          this.labels.forEach(e => {
-            e.destroy(e.id)
-          })
-          this.polygons = []
-          this.labels = []
-        }
-        if (paths?.length > 0) {
-          let bounds = []
-          paths.forEach((path, i) => {
-            if (path.points?.length > 0) {
-              let polygon = new TMap.MultiPolygon({
-                map, styles: {
-                  default: new TMap.PolygonStyle({
-                    showBorder: true,
-                    borderColor: '#5088FF',
-                    borderWidth: 2,
-                    color: this.$colorUtils.Hex2RGBA('#5088FF', 0.1)
-                  })
-                },
-                id: path.id,
-                geometries: [{paths: path.points.map(e => new TMap.LatLng(e[1], e[0]))}]
-              })
-              this.polygons.push(polygon)
-              bounds.push(fitBounds(path.points.map(e => new TMap.LatLng(e[1], e[0]))))
-              polygon.on('click', e => {
-                const id = e.target.id
-                this.getGridInfo(id)
-              })
-              const points = path.points.map(e => new TMap.LatLng(e[1], e[0]))
-              const 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,
-                    content: path.girdName,
-                  }
-                ]
-              })
-              this.labels.push(label)
-              label.on('click', e => {
-                this.getGridInfo(e.target.id.split('~')[1])
+                clusterBubble.on('click', () => {
+                  map.fitBounds(item.bounds);
                });
-            }
-          })
-          bounds = bounds.reduce((a, b) => {
-            return fitBounds([
-              a.getNorthEast(),
-              a.getSouthWest(),
-              b.getNorthEast(),
-              b.getSouthWest(),
-            ]);
-          });
-          map.fitBounds(bounds, {padding: 100})
+                cls.push(clusterBubble)
              } else {
-          map.setCenter(this.config.latlng)
+                //点标记样式
+                let {content} = item.geometries?.[0] || {},
+                    overlay = new ClusterBubble({map, position: item.center, content})
+                overlay.on('click', () => {
+                  this.buildPopup = true
+                  this.building = item.geometries?.[0]?.properties || {}
+                })
+                this.markers.push(overlay)
              }
-
+            });
+          })
+          return Promise.resolve()
        } else {
          if (count < 5) {
            setTimeout(() => {
-            this.renderGridMap(paths, ++count)
+              return this.getMarkerCluster(points, ++count)
            }, 1000)
-        }
+          } else Promise.reject("加载失败")
        }
      },
-    callPhone(phone) {
-      uni.makePhoneCall({phoneNumber: phone})
-    },
-    handleSelectGird(v) {
-      this.form = v || {}
-      this.getGridList(v?.id, true)
-    },
+
+      initMap (retryTimes = 0) {
+        this.$nextTick(() => {
+          let { map, TMap } = this
+          if (map) {
+            map.setZoom(15)
+          } else {
+            if (retryTimes < 10) {
+              setTimeout(() => {
+                this.initMap(++retryTimes)
+              }, 500)
+            }
+          }
+        })
+      }
+    }
  }
-}
 </script>

 <style lang="scss" scoped>
-uni-page-body{
-  height: 100%;
-}
-.AppMerchantMap {
+  .AppMerchantMap {
    height: 100%;

-  .grid-select {
-    width: 100%;
-    padding: 34px 32px;
+    ::v-deep.cluster {
+      color: #fff;
+      border-radius: 50%;
+      height: 120px;
+      width: 120px;
+      background: radial-gradient(circle, #5088ff 50%, rgba(#5088ff, .4) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    ::v-deep.marker {
+      color: #fff;
+      background: #558BFE;
+      padding: 0 32px;
+      width: fit-content;
+      height: 56px;
+      border-radius: 52px;
+      transform: translate(-50%, -50%);
+      display: flex;
+      align-items: center;
+
+      &:before {
+        content: " ";
+        display: block;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: 0;
+        height: 0;
+        transform: translate(-50%, 100%);
+        border: 12px solid transparent;
+        border-top-color: #558BFE;
+      }
+    }
+
+    * {
      box-sizing: border-box;
-    background: #FFF;
+    }
+
+    .search {
      display: flex;
-    justify-content: space-between;
-    line-height: 44px;
-    color: #333;
+      position: fixed;
+      align-items: center;
+      top: 24px;
+      left: 50%;
+      z-index: 11111;
+      width: 718px;
+      height: 88px;
+      padding: 0 16px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
+      border-radius: 16px;
+      transform: translateX(-50%);

-    .grid-select__right {
-      width: calc(100% - 140px);
-      text-align: right;
+      image {
+        width: 48px;
+        height: 48px;
+        margin-right: 16px;
      }

-    .gird-content {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .label {
-      flex-shrink: 0;
-      width: 140px;
-      font-size: 32px;
-    }
-
-    .value {
+      input {
+        flex: 1;
        font-size: 28px;
-
-      .u-icon {
-        margin-left: 8px;
-      }
+        color: #666666;
      }
    }

    .map-content {
      width: 100%;
-    height: calc(100% - 110px);
-  }
+      height: 100vh;

-  .popup {
-    padding: 0 32px 16px;
-
-    .bg {
-      width: 64px;
-      height: 10px;
-      background: #CCC;
-      border-radius: 6px;
-      margin: 32px auto 32px auto;
-    }
-
-    .grid-info {
-      height: 800px;
-    }
-
-    .title {
-      font-size: 36px;
-      font-family: PingFang-SC-Heavy, PingFang-SC;
-      font-weight: 800;
-      color: #333;
-      line-height: 50px;
-      margin-bottom: 24px;
-    }
-
-    .info-flex {
-      padding: 26px 0 30px 0;
+      map {
        width: 100%;
-      border-bottom: 1px solid #D8DDE6;
-      line-height: 40px;
-      font-size: 28px;
-
-      &:last-of-type {
-        border-bottom: none;
-      }
-
-      .label {
-        display: inline-block;
-        width: 160px;
-        font-weight: 800;
-        color: #333;
-      }
-
-      .value {
-        color: #666;
-        font-size: 26px;
+        height: 100vh;
      }
    }
  }
-}
-
-.footer {
-  width: 100%;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 99999;
-  display: flex;
-  font-size: 32px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  height: 112px;
-  line-height: 112px;
-  text-align: center;
-
-  .btn {
-    flex: 2;
-    background: #1365DD;
-    color: #FFF;
-  }
-}
 </style>