update AMap.vue

package-lock.json

@@ -1422,7 +1422,7 @@
         },
         "@liripeng/vue-audio-player": {
           "version": "1.5.0",
-          "resolved": "https://registry.npmmirror.com/@liripeng/vue-audio-player/-/vue-audio-player-1.5.0.tgz",
+          "resolved": "https://registry.npmjs.org/@liripeng/vue-audio-player/-/vue-audio-player-1.5.0.tgz",
           "integrity": "sha512-nt51tfMlzanb2LgiLD0nMQWGjoN1iCf2CBQPlnJvpn5SySBBDoCzNxqBPKaLGfNmFsi+yrd84cC3ZY0D/qMICg==",
           "requires": {
             "@any-touch/core": "^2.0.2",
@@ -1433,7 +1433,7 @@
           "dependencies": {
             "@liripeng/vue-audio-player": {
               "version": "1.4.1-beta1",
-              "resolved": "https://registry.npmmirror.com/@liripeng/vue-audio-player/-/vue-audio-player-1.4.1-beta1.tgz",
+              "resolved": "https://registry.npmjs.org/@liripeng/vue-audio-player/-/vue-audio-player-1.4.1-beta1.tgz",
               "integrity": "sha512-Y4aUFJk9LfdWueFkqDC2Juk17gul35L6hEtoSWyWExNVY9XJflyBsXFe6EHTaVaHLq9Ij7oKSs29JrMmnxvNcQ==",
               "requires": {
                 "@any-touch/core": "^2.0.2",
@@ -1444,7 +1444,7 @@
               "dependencies": {
                 "@liripeng/vue-audio-player": {
                   "version": "1.4.1-beta",
-                  "resolved": "https://registry.npmmirror.com/@liripeng/vue-audio-player/-/vue-audio-player-1.4.1-beta.tgz",
+                  "resolved": "https://registry.npmjs.org/@liripeng/vue-audio-player/-/vue-audio-player-1.4.1-beta.tgz",
                   "integrity": "sha512-w52+E+x+ltHfyswz+H3Jpj1Evx3tomJrPi4hwyzn3Eqvu9UsAf9xTIoNG6eFTTubbNYEu0cPD9q+Kj5eZ4pI9Q==",
                   "requires": {
                     "@any-touch/core": "^2.0.2",
@@ -1455,7 +1455,7 @@
                   "dependencies": {
                     "@liripeng/vue-audio-player": {
                       "version": "1.4.0",
-                      "resolved": "https://registry.npmmirror.com/@liripeng/vue-audio-player/-/vue-audio-player-1.4.0.tgz",
+                      "resolved": "https://registry.npmjs.org/@liripeng/vue-audio-player/-/vue-audio-player-1.4.0.tgz",
                       "integrity": "sha512-v4TlS2Vaq6TymzgTiSvU9gBU9xcFcnTDWFrnswmOfWOqU6Qd8v3KdHMRQ0/SWEgPkdqFKkDFivJEk5aGLfa4VQ==",
                       "requires": {
                         "@any-touch/core": "^2.0.2",
@@ -1466,7 +1466,7 @@
                       "dependencies": {
                         "@liripeng/vue-audio-player": {
                           "version": "1.3.0-beta5",
-                          "resolved": "https://registry.npmmirror.com/@liripeng/vue-audio-player/-/vue-audio-player-1.3.0-beta5.tgz",
+                          "resolved": "https://registry.npmjs.org/@liripeng/vue-audio-player/-/vue-audio-player-1.3.0-beta5.tgz",
                           "integrity": "sha512-00XSEiRjz5ZLcKKkaLXXhcC0092Qz+rgi2vEAsm9vR9wtK2FNP87Ot+qozBKSR/1zWQp1RAhTDcb0tQ+XcbKjw==",
                           "requires": {
                             "@any-touch/core": "^2.0.1",
@@ -1477,7 +1477,7 @@
                           "dependencies": {
                             "vue": {
                               "version": "3.3.4",
-                              "resolved": "https://registry.npmmirror.com/vue/-/vue-3.3.4.tgz",
+                              "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
                               "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
                               "requires": {
                                 "@vue/compiler-dom": "3.3.4",
@@ -1489,7 +1489,7 @@
                             },
                             "vue-router": {
                               "version": "4.2.4",
-                              "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.4.tgz",
+                              "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
                               "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==",
                               "requires": {
                                 "@vue/devtools-api": "^6.5.0"
@@ -1503,7 +1503,7 @@
                 },
                 "vue": {
                   "version": "2.7.14",
-                  "resolved": "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz",
+                  "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
                   "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
                   "requires": {
                     "@vue/compiler-sfc": "2.7.14",
@@ -1512,7 +1512,7 @@
                   "dependencies": {
                     "@vue/compiler-sfc": {
                       "version": "2.7.14",
-                      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+                      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
                       "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
                       "requires": {
                         "@babel/parser": "^7.18.4",
@@ -1524,14 +1524,14 @@
                 },
                 "vue-router": {
                   "version": "3.6.5",
-                  "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",
+                  "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
                   "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
                 }
               }
             },
             "@vue/compiler-core": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
               "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
               "requires": {
                 "@babel/parser": "^7.21.3",
@@ -1542,7 +1542,7 @@
             },
             "@vue/compiler-dom": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
               "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
               "requires": {
                 "@vue/compiler-core": "3.3.4",
@@ -1551,7 +1551,7 @@
             },
             "@vue/compiler-sfc": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
               "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
               "requires": {
                 "@babel/parser": "^7.20.15",
@@ -1568,7 +1568,7 @@
             },
             "@vue/compiler-ssr": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
               "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
               "requires": {
                 "@vue/compiler-dom": "3.3.4",
@@ -1577,7 +1577,7 @@
             },
             "@vue/reactivity": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
               "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
               "requires": {
                 "@vue/shared": "3.3.4"
@@ -1585,7 +1585,7 @@
             },
             "@vue/reactivity-transform": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
               "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
               "requires": {
                 "@babel/parser": "^7.20.15",
@@ -1597,7 +1597,7 @@
             },
             "@vue/runtime-core": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
               "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
               "requires": {
                 "@vue/reactivity": "3.3.4",
@@ -1606,7 +1606,7 @@
             },
             "@vue/runtime-dom": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
               "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
               "requires": {
                 "@vue/runtime-core": "3.3.4",
@@ -1616,7 +1616,7 @@
             },
             "@vue/server-renderer": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
               "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
               "requires": {
                 "@vue/compiler-ssr": "3.3.4",
@@ -1625,7 +1625,7 @@
             },
             "@vue/shared": {
               "version": "3.3.4",
-              "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.4.tgz",
+              "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
               "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
             }
           }

src/api/map.js

@@ -2,6 +2,7 @@ import { get, post, delete0 } from '@/utils/request'
 
 const mapAPI = {
   center: '/api/data/map/center',
+  itemTypes: '/api/data/map/types',
   markers: '/api/data/map/markers',
   markerInfoApi: '/api/data/map/marker',
   location: '/api/data/map/location'
@@ -11,6 +12,10 @@ export function getMapCenter() {
   return get(mapAPI.center)
 }
 
+export function getItemTypes() {
+  return get(mapAPI.itemTypes)
+}
+
 export function getMarkerInfo(id) {
   return get(mapAPI.markerInfoApi + '?id=' + id)
 }

src/views/home/AMap.vue

@@ -4,24 +4,28 @@
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
           <div class="text item amap-wrapper">
-            <el-select v-model="form" placeholder="选择标签" @change="onChange">
-              <el-option label="全部" value="0" />
-              <el-option label="分类1" value="1" />
-              <el-option label="分类2" value="2" />
-              <el-option label="分类3" value="3" />
+            <el-select v-model="selectedOption" placeholder="选择标签" @change="onChange">
+              <el-option
+                v-for="(item, index) in selectOptions"
+                :key="index"
+                :label="item.name"
+                :value="item.value"
+              >
+              </el-option>
             </el-select>
-
             <el-amap class="amap-box"
                      :vid="'amap-vue'"
+                     :amap-manager="amapManager"
                      :zoom="zoom"
                      :center="mapCenter"
-                     :plugin="plugins">
+                     :plugin="plugins"
+                     :events="mapEvents">
               <el-amap-marker
                 v-for="(marker, index) in markers"
                 :key="index"
                 :position="marker.position"
                 :label="marker.label"
-                :events="events"
+                :events="markerEvents"
                 :extData="marker.extData"
               ></el-amap-marker>
             </el-amap>
@@ -81,33 +85,22 @@
 </template>
 
 <script>
-import { getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
+import VueAMap from 'vue-amap'
+import { lazyAMapApiLoaderInstance } from 'vue-amap'
+const amapManager = new VueAMap.AMapManager()
+
+import { getItemTypes, getMapMarkers, getMarkerInfo, sendClickedLocation } from '@/api/map'
 
 export default {
   data () {
     return {
+      amap: null,
       plugins: ['Scale'],
       mapCenter: [114.0000, 30.0000],
       // zoom=6 的比例尺为 100km
       zoom: 6,
-      markers: [
-        {
-          position: [114.1234, 30.0000],
-          label:{content:'钦汇园0', offset:[0,0]},
-          extData: {id: 1}
-        },
-        {
-          position: [116.0000, 32.0000],
-          label:{content:'钦汇园1', offset:[0,0]},
-          extData: {id: 2}
-        },
-        {
-          position: [118.0000, 34.0000],
-          label:{content:'钦汇园2', offset:[0,0]},
-          extData: {id: 3}
-        }
-      ],
-      events: {
+      markers: [],
+      markerEvents: {
         click: (e) => {
           const id = e.target.getExtData().id
           const position = e.target.getPosition()
@@ -121,6 +114,13 @@ export default {
           this.getMarkerInfoWrapper(item)
         },
       },
+      /* 海量点 */
+      massMarks: null,
+      amapManager,
+      mapEvents: {
+        init: this.mapInit,
+        zoomchange: this.zoomchange
+      },
       /* 弹框数据 */
       showMarkerDialog: false,
       markerInfo: {
@@ -135,15 +135,90 @@ export default {
         lat: null,
         lng: null
       },
-      form: 0,
+      form: {
+        label: '全部',
+        value: 0
+      },
+      selectedOption: '0',
+      selectOptions: []
     }
   },
   created() {
     document.title = '地图'
-    const type = 0
-    this.getMapMarkersWrapper(type)
+    getItemTypes().then(res => {
+      if (res.code === 0) {
+        this.selectOptions = res.data
+      }
+    })
   },
   methods: {
+    mapInit(o) {
+      this.amap = o
+      lazyAMapApiLoaderInstance.load().then(() => {
+        var styleObject = {
+          url: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png',  // 图标地址
+          size: new AMap.Size(11,11),      // 图标大小
+          anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
+        }
+
+        const massMarks = new AMap.MassMarks([], {
+          zIndex: 5,  // 海量点图层叠加的顺序
+          zooms: [3, 10],  // 在指定地图缩放级别范围内展示海量点图层
+          style: styleObject  // 设置样式对象
+        });
+
+        //将海量标点添加至地图实例
+        massMarks.setMap(o)
+        //添加点击事件
+        massMarks.on('click', (e) => {
+          console.log('massMark 点击事件')
+        })
+        this.massMarks = massMarks
+
+        const type = 0
+        this.getMapMarkersWrapper(type)
+        //this.getMapMarkersWrapper1(type)
+        //this.getDistrict(o)
+      })
+    },
+    zoomchange(e) {
+      console.log('当前缩放级别: ' + this.amap.getZoom())
+    },
+    getDistrict(map) {
+      // 创建行政区查询对象
+      var district = new AMap.DistrictSearch({
+        // 返回行政区边界坐标等具体信息
+        extensions: 'all',
+        // 设置查询行政区级别为 区
+        level: 'country',
+        subdistrict: 3
+      })
+
+      this.zoom = 11
+      const area = '中国'
+      district.search(area, function (status, result) {
+        console.log(result)
+        var bounds = result.districtList[0].boundaries
+        var polygons = []
+        if (bounds) {
+          for (var i = 0, l = bounds.length; i < l; i++) {
+            //生成行政区划polygon
+            var polygon = new AMap.Polygon({
+              map: map,
+              strokeWeight: 1,
+              path: bounds[i],
+              fillOpacity: 0.7,
+              fillColor: '#CCF3FF',
+              strokeColor: '#CC66CC'
+            })
+            polygons.push(polygon)
+          }
+
+          // 地图自适应
+          map.setFitView()
+        }
+      })
+    },
     getMapMarkersWrapper(type) {
       this.markers = []
       getMapMarkers(type).then(res => {
@@ -157,7 +232,7 @@ export default {
           for (const item of res.data) {
             this.markers.push({
               position: [item.position.lng, item.position.lat],
-              label:{content: item.title, offset:[0,0]},
+              label: {content: item.title, offset: [0, 0]},
               extData: {id: item.id}
             })
           }
@@ -176,6 +251,40 @@ export default {
         })
       })
     },
+    getMapMarkersWrapper1(type) {
+      this.massMarks.setData([])
+      getMapMarkers(type).then(res => {
+        if (res.code === 0) {
+          this.$notify({
+            message: '加载了 ' + res.data.length + ' 条数据',
+            type: 'warning',
+            duration: 5000
+          })
+
+          const massMarkers = []
+          for (const item of res.data) {
+            massMarkers.push({
+              lnglat: [item.position.lng, item.position.lat],
+              id:item.id
+            })
+          }
+          this.massMarks.setData(massMarkers)
+          this.zoom = 5
+        } else {
+          this.$notify({
+            message: res.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
     getMarkerInfoWrapper(item) {
       this.earthPoint = item.position
       this.showMarkerDialog = true
@@ -198,6 +307,7 @@ export default {
         this.showMarkerDialog = false
       })
     },
+    /* 弹出框 */
     handleDialogClose(done) {
       this.showMarkerDialog = false
       this.earthPoint = { lat: null, lng: null }
@@ -218,8 +328,7 @@ export default {
       })
     },
     onChange() {
-      const type = this.form
-      this.getMapMarkersWrapper(type)
+      this.getMapMarkersWrapper(this.selectedOption)
     }
   }
 }