vue+ts 使用高德地圖(vue-amap)實現熱力圖、動態標記及多邊形覆蓋物

前言：高德地圖心得總結。

• 在 vue-amap 中使用高德 SDK 獲取 map = new _window.AMap.Map('amap-vue', {}) （map在手,高德我有）
• 地圖相關需求 可在高德地圖開放平台找到相關示例，自行按照配置項去配置
• 再也不用去百度里找一樣的需求了

1.安裝並引入

下載包並在mian.ts中引入 vue-amap

npm install vue-amap --save

import VueAMap  from 'vue-amap'
Vue.use(VueAMap );
VueAMap .initAMapApiLoader({
  key: '**********',   //需要先去高德地圖注冊申請一個key  
  v:'1.4.4',
  plugin: ["AMap.Heatmap"],    //使用的插件
});

2.vue文件中引入

在template中

    <el-amap :center="center" :vid="'amap-vue'" :zoom="zoom" id="container" mapStyle="dark" ></el-amap>

在script中

    import {  lazyAMapApiLoaderInstance } from 'vue-amap'   
    //在定制化程度較高的項目中，開發者可能只想通過 vue-amap 引入高德地圖，
    //而部分實例化的操作直接基於高德地圖的 sdk 完成。這個時候就需要 lazyAMapApiLoaderInstance。
    data(){
      return {
             center: [116.388419, 39.9144],   //地圖中心
            zoom: 12,    //縮放比例
      }
    }

熱力圖 配置項鏈接 https://lbs.amap.com/api/javascript-api/reference/layer#m_AMap.Heatmap

       mapSpot() {
          var params = {acceptDateMin,acceptDateMax} as OrderPhraseCondition    
        this.SuqiuAllService.postSuqiuallMapSpot(params).then((res: RListMapSpotDto) => {
            //接口返回的熱力圖數據   格式為  [{lat: 39.90011837136141,lng: 116.36113770967947,value: 1},{lat: 39.901766750339455,lng: 116.45168695988188,value: 1}...]
            this.potList = res.data as any     
            //接口請求成功后 初始化地圖 
            lazyAMapApiLoaderInstance.load().then(() => {
                this.initMap()  
            })
        })
      },
   initMap() {
      var that = this
      var _window: any = window    //使用window ts 報錯
      let map = new _window.AMap.Map('amap-vue', {
        resizeEnable: false,   //調整大小啟用
        center: [116.388419, 39.9144],    //初始化成功后的中心點
        zoom: 12    //縮放比例
      })
      //在初始化成功后 vue-amap  的mapStyle="dark" 會失效 所以要使用自定義樣式
      // 在高德地圖開發者平台  個人中心可以自定義地圖   顏色 路線等  鏈接 https://lbs.amap.com/dev/mapstyle/index
      map.setMapStyle('amap://styles/284dccc7f1aad8e1d3930127a268f2f2')  
      //熱力圖
      let heatmap
      //使用插件
      map.plugin(['AMap.Heatmap'], function() {
        //初始化heatmap對象
        heatmap = new _window.AMap.Heatmap(map, {
          radius: 10, //給定半徑
          opacity: [0.2, 1.0],
          // 顏色范圍
          color: {
            0.45: 'rgb(255,0,0)',
            0.55: 'rgb(255,0,0)',
            0.65: 'rgb(255,0,0)',
            0.95: 'rgb(255,0,0)',
          }
        })
        //設置數據集
        heatmap.setDataSet({
          data: that.potList,   //坐標數據集  即之前請求到的熱力圖數據
          max: 1    //權重的最大值  max不填則取數據集count最大值 (該值影響熱力圖顏色)
        })
      })
      //氣泡
      this.getStream(map)
      //繪制矩形
      this.getPolygon(map)
    },

動態氣泡 marker 配置項鏈接 https://lbs.amap.com/api/javascript-api/reference/overlay#marker

    getStream(map: any) {
      var params = {
        acceptDateMin,
        acceptDateMax
      } as OrderPhraseCondition
      this.SuqiuAllService.postSuqiuallMapStream(params).then((res: RListMapStreamDto) => {
        
      /*
        獲取接口返回的marker數據   格式為 
        [{lat: 39.90011837136141,lng: 116.36113770967947,info: "廣安門外街道 91"},
         {lat: 39.901766750339455,lng: 116.45168695988188,info: "展覽路街道 65"}
        ...]
       */
        var arr: any = []
        var _window: any = window
        res.data.forEach((item, index) => {
           /生成
          var obj = new _window.AMap.Marker({
            id: index,
            position: [item.lng, item.lat],
            content: `   <div class="markers">${item.info}</div>` 
        /*
         重點 ---content
        顯示內容，可以是HTML要素字符串或者HTML DOM對象。content有效時，icon屬性將被覆蓋
         然后可以在style中設置 點的樣式，背景色 等等
        */
          })
          arr.push(obj)
        })
        this.markerMax = Math.ceil(arr.length / this.markerNumber)
        this.markers = arr
        setInterval(() => {
          this.showMarkers(map)
        }, 2000)
      })
    },
    //動態展示  及 定時切割數組，移除現有marker 添加新marker
    showMarkers(map: any) {
      if (this.currentArr) {
        map.remove(this.currentArr)    //移除現有marker
      }
      //下面這部分在6個一組截取數據
      if (this.markerCurrent < this.markers.length) {
        this.currentArr = this.markers.slice(this.markerCurrent, this.markerCurrent + 6)
        this.markerCurrent = this.markerCurrent + 6
      } else {
        this.markerCurrent = 0
        this.currentArr = this.markers.slice(this.markerCurrent, this.markerCurrent + 6)
      }
      map.add(this.currentArr)    //添加新marker
    },

矩形覆蓋物 marker 配置項鏈接 https://lbs.amap.com/api/javascript-api/reference/overlay#polygon

    //地圖輪廓
    getPolygon(map: any) {
    //獲取本地的json文件  格式還是  坐標點
      let dongchengJson = require('@/utils/json/dongcheng.json')   
      var path = dongchengJson.features[0].geometry.coordinates[0]
      //配置多邊形
      var _window: any = window
      var polygon = new _window.AMap.Polygon({
        path: path,                  //路徑
        strokeColor: '#1EE621',      //輪廓線顏色
        strokeWeight: 4,             //輪廓線寬度
        strokeOpacity: 0.2,           //輪廓線透明度
        fillOpacity: 0.2,              //矩形內部填充顏色透明度
        fillColor: '#fff',             //矩形 內部填充顏色透明度
        zIndex: 50                    //多邊形覆蓋物的疊加順序。地圖上存在多個多邊形覆蓋物疊加時，通過該屬性使級別較高的多邊形覆蓋物在上層顯示
      })
      map.add(polygon)  //添加到地圖上
  }

展示成果