高德地图绘制圆形

src/views/map/Map1.vue

@@ -1,102 +1,17 @@
 <template>
-  <el-row class="movie-list">
-    <el-col :md="24">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <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-select>
-          </div>
-          <div class="text item amap-wrapper">
-            <el-amap
-              class="amap-box"
-              :vid="'amap-vue'"
-              :amap-manager="amapManager"
-              :zoom="zoom"
-              :center="mapCenter"
-              :plugin="plugins"
-              :events="mapEvents"
-            >
-              <el-amap-marker
-                v-for="(marker, index) in markers"
-                :key="index"
-                :position="marker.position"
-                :label="marker.label"
-                :events="markerEvents"
-                :ext-data="marker.extData"
-              />
-            </el-amap>
-          </div>
-        </el-card>
-      </el-row>
-    </el-col>
-
-    <!-- marker 内容弹窗   -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showMarkerDialog"
-      :before-close="handleDialogClose"
-      width="30%"
-      center
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <el-button
-            v-clipboard:copy="earthPoint.lat + ' ' + earthPoint.lng"
-            v-clipboard:success="onCopy"
-            v-clipboard:error="onCopyError"
-            type="text"
-          >GoogleEarth 坐标</el-button>
-        </div>
-        <div class="text item">
-          <el-image v-if="markerInfo.photoUrl !== null" :src="markerInfo.photoUrl" min-width="40" height="30" />
-          <br>
-          <label>
-            商品 <span v-text="markerInfo.itemId" />
-          </label>
-          <br>
-          <label>
-            SKU <span v-text="markerInfo.sku" />
-          </label>
-          <br>
-          <label>
-            评论 <span style="color: blue" v-text="markerInfo.replyContent" />
-          </label>
-          <br>
-          <!--          <label v-if="markerInfo.appendContent !== undefined || markerInfo.appendContent !== null">
-                      追加 <span style="color: blue" v-text="markerInfo.appendContent"/>
-                    </label>-->
-        </div>
-      </el-card>
-    </el-dialog>
-  </el-row>
+  <el-container>
+    <el-header height="60">
+      <el-button style="float: right; padding: 3px 0" type="text" @click="drawCircle">绘制圆形</el-button>
+    </el-header>
+    <el-main>
+      <div id="container" class="text item amap-wrapper" />
+    </el-main>
+  </el-container>
 </template>
 
 <script>
-import { getGeoItems, getMapMarkers, getMarkerInfo } from '@/api/map'
-
-import Vue from 'vue'
-import VueAMap from 'vue-amap'
-Vue.use(VueAMap)
-VueAMap.initAMapApiLoader({
-  key: 'your amap key',
-  plugin: [
-    'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
-    'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MassMarks', 'AMap.Size',
-    'AMap.Pixel'
-  ],
-  // 默认高德 sdk 版本为 1.4.4
-  v: '1.4.15'
-})
-
-import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
-const amapManager = new AMapManager()
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { addGeoPoint, getGeoPoint } from '@/api/map'
 
 export default {
   name: 'Map1',
@@ -104,208 +19,194 @@ export default {
     return {
       amap: null,
       plugins: ['Scale'],
-      mapCenter: [104.069045, 30.577861],
-      // zoom=10 的比例尺为 10km
-      zoom: 10,
-      markers: [],
-      markerEvents: {
-        click: (e) => {
-          const id = e.target.getExtData().id
-          const position = e.target.getPosition()
-          const item = {
-            id: id,
-            position: {
-              lng: position.lng,
-              lat: position.lat
-            }
-          }
-          this.getMarkerInfoWrapper(item)
-        }
-      },
-      /* 海量点 */
-      massMarks: null,
-      amapManager,
-      mapEvents: {
-        init: this.mapInit,
-        zoomchange: this.zoomchange
-      },
-      /* 弹框数据 */
-      showMarkerDialog: false,
-      markerInfo: {
-        itemId: null,
-        sku: null,
-        replyId: null,
-        replyContent: null,
-        appendContent: null,
-        photoUrl: null
-      },
-      earthPoint: {
-        lat: null,
-        lng: null
-      },
-      selectedOption: 1,
-      selectOptions: [
-        { name: '全部', value: 1 }
-      ],
-      value: []
+      mapCenter: [114.0000, 30.0000],
+      // zoom=6 的比例尺为 100km
+      zoom: 6,
+      province: '',
+      provinces: [],
+      city: '',
+      citys: [],
+      district: '',
+      districts: [],
+      path1: [{
+        path: [
+          [116.361904, 39.913423],
+          [116.367904, 39.913423]
+        ]
+      }],
+      path: []
     }
   },
+  mounted() {
+    this.initAMap()
+  },
+  unmounted() {
+    this.map?.destroy()
+  },
   created() {
     document.title = '地图'
-    this.getItems()
   },
   methods: {
-    getItems() {
-      getGeoItems().then(resp => {
-        if (resp.code === 0) {
-          this.selectOptions = resp.data
-        }
-      })
-    },
-    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) // 图标显示位置偏移量，基准点为图标左上角
+    initAMap() {
+      window._AMapSecurityConfig = {
+        securityJsCode: '983d6ee43bab3edf3693e91508f94aa9'
+      }
+      AMapLoader.load({
+        key: '7b75ab2839ce68b884c7a682501ea774', // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
+          'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.MassMarks', 'AMap.Size',
+          'AMap.Pixel'], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+        AMapUI: { // 重点就是这个
+          version: '1.0',
+          plugins: ['misc/PathSimplifier', 'overlay/SimpleMarker']// SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
         }
-
-        // 海量点样式
-        const massMarks = new AMap.MassMarks([], {
-          zIndex: 5, // 海量点图层叠加的顺序
-          zooms: [3, 10], // 在指定地图缩放级别范围内展示海量点图层
-          style: styleObject // 设置样式对象
+      }).then((AMap) => {
+        // 设置地图容器id
+        this.map = new AMap.Map('container', {
+          viewMode: '2D', // 是否为3D地图模式
+          zoom: 6, // 初始化地图级别
+          center: [104.065753, 30.657462] // 初始化地图中心点位置
         })
-
-        // 将海量标点添加至地图实例
-        massMarks.setMap(o)
-        // 添加点击事件
-        massMarks.on('click', (e) => {
-          console.log('massMark 点击事件')
-        })
-        this.massMarks = massMarks
-
-        // this.getMapMarkersWrapper(this.selectedOption)
-        // this.getMapMarkersWrapper1(type)
+      }).catch((e) => {
+        console.log(e)
       })
     },
     zoomchange(e) {
       console.log('当前缩放级别: ' + this.amap.getZoom())
     },
-    getMapMarkersWrapper(type) {
-      this.markers = []
-      getMapMarkers(type).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            message: '加载了 ' + res.data.length + ' 条数据',
-            type: 'warning',
-            duration: 5000
-          })
-
-          for (const item of res.data) {
-            this.markers.push({
-              position: [item.position.lng, item.position.lat],
-              label: { content: item.title, offset: [0, 0] },
-              extData: { id: item.id }
-            })
-          }
-        } else {
-          this.$notify({
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
+    // 轨迹巡航
+    loadPathSimplifier() {
+      AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
+        if (!PathSimplifier.supportCanvas) {
+          alert('当前环境不支持 Canvas！')
+          return
         }
-      }).catch(error => {
-        this.$notify({
-          message: error.message,
-          type: 'warning',
-          duration: 3000
+        // 创建组件实例
+        var pathSimplifierIns = new PathSimplifier({
+          map: this.map,
+          zIndex: 100, // 图层叠加顺序
+          data: this.path, // 巡航路径
+          // 获取巡航路径中的路径坐标数组
+          getPath: (pathData, pathIndex) => {
+            return pathData.path
+          }
+        })
+        // 创建巡航器
+        var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
+          loop: false, // 是否循环
+          speed: 2000 // 速度(km/h)
         })
+        pathNavigator.start()
       })
     },
-    // 渲染海量点
-    getMapMarkersWrapper1(type) {
-      this.massMarks.setData([])
-      getMapMarkers(type).then(res => {
-        if (res.code === 0) {
-          this.$notify({
-            message: '加载了 ' + res.data.length + ' 条数据',
-            type: 'warning',
-            duration: 5000
-          })
+    getDistrict(map) {
+      // 创建行政区查询对象
+      var district = new AMap.DistrictSearch({
+        // 返回行政区边界坐标等具体信息
+        extensions: 'all',
+        // 设置查询行政区级别为 区
+        level: 'street',
+        subdistrict: 3
+      })
 
-          const massMarkers = []
-          for (const item of res.data) {
-            massMarkers.push({
-              lnglat: [item.position.lng, item.position.lat],
-              id: item.id
+      this.zoom = 11
+      const area = '双流'
+      district.search(area, function(status, 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)
           }
-          this.massMarks.setData(massMarkers)
-          this.zoom = 5
-        } else {
-          this.$notify({
-            message: res.msg,
-            type: 'warning',
-            duration: 3000
-          })
+
+          // 地图自适应
+          map.setFitView()
         }
-      }).catch(error => {
-        this.$notify({
-          message: error.message,
-          type: 'warning',
-          duration: 3000
-        })
       })
     },
-    getMarkerInfoWrapper(item) {
-      this.earthPoint = item.position
-      this.showMarkerDialog = true
-      this.markerInfo = {
-        itemId: null,
-        sku: null,
-        replyId: null,
-        replyContent: null,
-        appendContent: null,
-        photoUrl: null
-      }
+    drawCircle1() {
+      this.$message.info('加载路径')
+      getGeoPoint().then(resp => {
+        if (resp.code === 0) {
+          const pathList = resp.data
+          if (pathList.length === 0) {
+            return
+          }
 
-      getMarkerInfo(item.id).then(res => {
-        if (res.code === 0) {
-          this.markerInfo = res.data
-        } else {
-          this.showMarkerDialog = false
+          this.path = pathList
+          AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
+            if (!PathSimplifier.supportCanvas) {
+              alert('当前环境不支持 Canvas！')
+              return
+            }
+            // 创建组件实例
+            var pathSimplifierIns = new PathSimplifier({
+              map: this.map,
+              zIndex: 100, // 图层叠加顺序
+              data: this.path, // 巡航路径
+              // 获取巡航路径中的路径坐标数组
+              getPath: (pathData, pathIndex) => {
+                return pathData.path
+              }
+            })
+            // 创建巡航器
+            var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
+              loop: false, // 是否循环
+              speed: 2000 // 速度(km/h)
+            })
+            pathNavigator.start()
+          })
         }
-      }).catch(error => {
-        this.showMarkerDialog = false
-        console.log(error)
       })
     },
-    /* 弹出框 */
-    handleDialogClose(done) {
-      this.showMarkerDialog = false
-      this.earthPoint = { lat: null, lng: null }
-      done()
-    },
-    onCopy(e) {
-      this.$notify({
-        message: 'GoogleEarth 坐标已复制, 快到 GoogleEarth 中去找这个地方吧~',
-        type: 'warning',
-        duration: 3000
+    drawCircle() {
+      // 设置圆形位置
+      var center = new AMap.LngLat(104.065753, 30.657462)
+      // 设置圆的半径大小
+      var radius = 1000
+      // 创建圆形 Circle 实例
+      var circle = new AMap.Circle({
+        center: center, // 圆心
+        radius: radius, // 半径
+        borderWeight: 3, // 描边的宽度
+        strokeColor: '#ff3333', // 轮廓线颜色
+        strokeOpacity: 1, // 轮廓线透明度
+        strokeWeight: 1, // 轮廓线宽度
+        fillOpacity: 0.4, // 圆形填充透明度
+        strokeStyle: 'line', // 轮廓线样式
+        strokeDasharray: [10, 10],
+        fillColor: '#1791fc', // 圆形填充颜色
+        zIndex: 50 // 圆形的叠加顺序
       })
-    },
-    onCopyError(e) {
-      this.$notify({
-        message: '复制 GoogleEarth 坐标失败!',
-        type: 'error',
-        duration: 3000
+
+      // 圆形 Circle 对象添加到 Map
+      this.map.add(circle)
+      // 根据覆盖物范围调整视野
+      this.map.setFitView([circle])
+
+      // 鼠标移入事件
+      circle.on('mouseover', function() {
+        console.log('鼠标移入')
+      })
+
+      var that = this.map
+      // 引入圆形编辑器插件
+      this.map.plugin(['AMap.CircleEditor'], function() {
+        // 实例化圆形编辑器，传入地图实例和要进行编辑的圆形实例
+        var circleEditor = new AMap.CircleEditor(that, circle)
+        // 开启编辑模式
+        circleEditor.open()
       })
-    },
-    onChange() {
-      this.getMapMarkersWrapper(this.selectedOption)
     }
   }
 }