百度地图离线开发demo（热力图）

oliver666666

已于 2024-09-19 14:30:28 修改

阅读量1.8k

点赞数 1

分类专栏：百度地图离线3.0+百度瓦片+vue 文章标签： javascript 前端 vue.js

于 2022-03-14 10:48:46 首次发布

本文链接：https://blog.youkuaiyun.com/oliver666666/article/details/123473391

版权

百度地图离线3.0+百度瓦片+vue 专栏收录该内容

7 篇文章 ¥9.90 ¥99.00

订阅专栏

这篇博客分享了一个百度地图离线开发的demo，涵盖了海量数据地图绘制、迁徙图、弹窗边界避让、热力图以及初始化离线地图等实践内容。热力图部分利用了bmplib插件来实现，但注意瓦片图源需要自行寻找免费资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo内容有：（海量数据地图绘制，迁徙图，弹窗边界避让的问题，热力图，初始化离线地图）。demo列的都是我有写过，并且实现的。有需求也可以说。我有时间写demo。瓦片没有找到免费的！我也没找到！可以自行找免费的瓦片！

热力图主要用了bmplib插件，

  initMap() {
      this.map = new BMap.Map('myMap');

      const point = new BMap.Point(118.138979, 24.497246);
      this.map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(); // 允许滚轮缩放
      const points = [];
      for(let i = 0; i < 600;i++){
        points.push(
          {
            lng: 118.138989 + 0.001 * Math.floor(Math.random() * 10 + 1),
            lat: 24.497246 + 0.001 * Math.floor(Math.random() * 10 + 1),
            count: Math.floor(Math.random() * 10 + 1),
          }
        );
      }
      if (!isSupportCanvas()) {
        alert(
          '热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~'
        );
      }
      //详细的参数,可以查看heatmap.js的文档 https://github.com/pa7/heatmap.js/blob/master/README.md
      //参数说明如下:
      /* visible 热力图是否显示,默认为true
       * opacity 热力的透明度,1-100
       * radius 势力图的每个点的半径大小
       * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
       * {
        .2:'rgb(0, 255, 255)',
        .5:'rgb(0, 110, 255)',
        .8:'rgb(100, 0, 255)'
      }
      其中 key 表示插值的位置, 0~1.
          value 为颜色值.
       */
      this.mapObj.heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 20 });
      this.map.addOverlay(this.mapObj.heatmapOverlay);
      this.mapObj.heatmapOverlay.setDataSet({ data: points, max: 100 });
      this.closeHeatmap();
      function setGradient() {
        /*格式如下所示:
      {
          0:'rgb(102, 255, 0)',
          .5:'rgb(255, 170, 0)',
          1:'rgb(255, 0, 0)'
      }*/
        const gradient = {};
        let colors = document.querySelectorAll('input[type=\'color\']');
        colors = [].slice.call(colors, 0);
        colors.forEach(function(ele) {
          gradient[ele.getAttribute('data-key')] = ele.value;
        });
        this.heatmapOverlay.setOptions({ gradient: gradient });
      }
      //判断浏览区是否支持canvas
      function isSupportCanvas() {
        const elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
      }
    },
    //是否显示热力图
    openHeatmap() {
      this.mapObj.heatmapOverlay.show();
    },
    closeHeatmap() {
      this.mapObj.heatmapOverlay.hide();
    },
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};