对于百度地图新推出的热力图，国内外是不是有其他类似的产品

Posted 2023-04-17

ArcGIS很早就有热力图。桌面版或者Web API都有。
同时推荐一下开源的方案,都是JS的，基于其它语言的也有，google之即可:
heatmap.js[1]，在github上有2000多star,400多fork。它能够实现地图热度，同时还能探测鼠标的点击，实现屏幕热度。
webgl-heatmap[2].在github上有500多star。它主要是能实现高性能的大量数据的热度图。我粗略测试过百万条数据大概40s，这个是我们主力使用的库。
simpleheat[3].在github上100多star.LeafLet的热图插件，性能好，实现简单。
如果说ArcGIS是闭源。第一个库2011年就存在，至于有没有人参考就不得而知了。 参考技术A 类似的有谷歌地图，靠大数据进行分析 参考技术B 谷歌当然有大数据了，只是现在谷歌在国内很难访问

vue基于百度地图实现热力图

前言

今天接到一个需求要实现在百度地图中将高排放车辆以热力图的形式展现在地图中，下面是具体的实现过程：

实现效果

1.安装baiduMap

1.1首先要安装百度map

npm install vue-baidu-map --save

1.2在main.js文件中引入并全局注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, 
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你的密钥'
)

1.3在public文件夹下面的index.html文件中添加百度地图JavaScript API的接口

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

2.组件中使用

:center 经纬度, 可以替换成其它地区的经纬度；
:zoom 缩放的值；
:scroll-wheel-zoom 设置允许鼠标滚轮缩放；
:map-types 地图类型；
:max 热力最大值；
:radius 热力图半径；
:gradient 热力图渐变区间。

代码实例

<template>
      <baidu-map :center="lng:116.4, lat: 39.9" :zoom="13" :scroll-wheel-zoom=true style="width: auto; height: 100%;">
          <!-- //是否需要全景 -->
          <bm-panorama></bm-panorama>
          <!-- //地图类型 -->
          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
          <bml-heatmap :data="mapList" :max="100" :radius="20" :gradient=".5:'rgb(0, 110, 255)',.8:'rgb(15, 255, 31)',.9:'rgb(225, 75, 0)'"></bml-heatmap>
      </baidu-map>
</template>

<script>
  import BmlHeatmap from 'vue-baidu-map'//引人
  export default 
    components: //注册
      BmlHeatmap
    ,
    data() 
      return 
        //模拟的经纬度及热力值数据；lng：经度 lat: 纬度 count：热力值
        mapList: [
          "lng":116.47,"lat":39.91,"count":50,
          "lng":116.41,"lat":39.912,"count":28,
          "lng":116.42,"lat":39.913,"count":95,
          "lng":116.43,"lat":39.914,"count":9,
          "lng":116.44,"lat":39.915,"count":85,
          "lng":116.45,"lat":39.915,"count":20,
          "lng":116.46,"lat":39.918,"count":25,
          "lng":116.47,"lat":39.9101,"count":70,
          "lng":116.48,"lat":39.941,"count":32,
          "lng":116.49,"lat":39.918,"count":50,
          "lng":116.410,"lat":39.91,"count":100,
          "lng":116.411,"lat":39.914,"count":90,
          "lng":116.412,"lat":39.915,"count":80,
          "lng":116.413,"lat":39.918,"count":20,
        ]
      
    
  
</script>

去掉百度地图logo水印

<style scoped>
 ::v-deep .BMap_cpyCtrl 
    display: none;
  
  ::v-deep .anchorBL 
    display: none;
  
</style>