Realization of Baidu map heat map (understand at a glance)

 

1. Initialize the map first, let the map come out

a. Introduced in index.html in the static file public

   <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script> 
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
    <script src="static/common.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/mapvgl.min.js"></script>

 b. Create a div in any .vue file and put in the id

<div id="map"></div>

 c. Initialize the map and let the map come out

this.map = new BMapGL.Map('map') // 创建地图实例
this.map.clearOverlays()
this.map.centerAndZoom(new window.BMapGL.Point(117.66080346230646, 38.957995566132666), 11)
window.BMapGL.Point(117.66080346230646, 38.957995566132666), 12)
this.map.setMinZoom(10.5)

d. Write a method to execute drawing heat map

 drawMap() {
     const view = new window.mapvgl.View({
        map: this.map
      })
      const PointAll = mapPoint
      var remap = new window.mapvgl.HeatmapLayer({
        size: 1000, // 单个点绘制大小
        max: 2, // 最大阈值
        height: 0, // 最大高度，默认为0
        unit: 'm', // 单位，m:米，px: 像素
        gradient: { // 对应比例渐变色
          0.25: 'rgba(0, 0, 255, 1)',
          0.55: 'rgba(0, 255, 0, 1)',
          0.85: 'rgba(255, 255, 0, 1)',
          1: 'rgba(255, 0, 0, 1)'
        },
        onClick: (e) => { // 点击事件
          console.log(e)
        }
      })
      const datas = PointAll(这个换成你的坐标)
      const data = datas.map(r => {
        return {
          geometry: {
            type: 'Point',
            coordinates: [r.lng, r.lat]
          },
          properties: {
            count: 1 // 这个是我自己用来判断的，你可以不写
          }
        }
      })

      this.view.addLayer(remap)

      remap.setData(data)
      // this.heatmap = heatmap //用来清除绘制的热聚合点
    },

Coordinate type of e.PointAll point

 {
    'lng': 117.53087255334319,
    'lat': 38.85467271420956,
    'type': 3
  },
  {
    'lng': 117.62055937545938,
    'lat': 38.945425330112016,
    'type': 3
  },
  {
    'lng': 117.63090785493432,
    'lat': 38.96248453373196,
    'type': 2
  },