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)  //添加到地图上
  }

展示成果