1.先初始化地图,让地图出来

a.在静态文件public里的index.html中引入

   <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/mapvgl@1.0.0-beta.168/dist/mapvgl.min.js"></script>

 b.在随便的.vue文件中创建一个div,放入id

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

 c.初始化地图,让地图出来

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.写个方法执行绘制热力图

 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 //用来清除绘制的热聚合点
    },

e.PointAll点的坐标类型

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

Logo

前往低代码交流专区

更多推荐