正文

vue基于百度地图实现热力图(代码片段)

水星记_  水星记_  2022-12-01  393

关键词：

前言

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

实现效果

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>

piesdk热力图(代码片段)

...图上实时描述人群分布、密度和变化趋势的一个产品，是基于百度大数据的一个便民出行服务。上图主要显示一个城市的某个地方人员比较集中甚至拥挤程度，颜色越深表示人员越多，颜色浅代表人比较少，可以提... 查看详情

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

...面版或者WebAPI都有。同时推荐一下开源的方案,都是JS的，基于其它语言的也有，google之即可:heatmap.js[1]，在github上有2000多star,400多fork。它能够实现地图热度，同时还能探测鼠标的点击，实现屏幕热度。webgl-heatmap[2].在github上有500... 查看详情

百度地图热力图

<scripttype="text/javascript"src="//api.map.baidu.com/api?ak=LGiD08FQSqYhur2nOx6oK0gUod2K1TNA&v=2.0"></script><scripttype="text/javascript"src="http://api.map.baidu.com/librar 查看详情

腾讯地图热力图使用

采用腾讯地图的热力组件库，引入腾讯地图就不多赘述了，本篇主要讲如何使用重点：热力高低只能通过相邻比较近的热力点的多少来控制，所以要想实现热力较高的区域，可以通过增加周围热力点的数量来实现<divid="topMe... 查看详情

调用高德地图api（热力图）详解(代码片段)

具体脚本语言如下：<!doctypehtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="initial-scale=1.0,user-scalable 查看详情

在arcgis地图上绘制echarts热力图(heatmap)(代码片段)

在Arcgis地图上绘制Echarts热力图(Heatmap)2018-08-30 10:18 【原创】本文地址：https://www.cnblogs.com/qiaoge0923/p/9562304.html　　现如今，Echarts在数据可视化方面早已升入化境，已经不再拘泥于简单的饼图柱状图，已然从平面直角坐标系... 查看详情

vue+echarts4.x地图下钻/散点分布以及热力图

...为工作原因用到echarts，需要实现三个功能国家到省级的地图下钻和散点分布以及热力图显示网上资料蛮少的，记录一个给后面的小伙伴一些参考，如果帮到你请点赞d=====(￣▽￣*)b中国地图下显示为热力图，显示精确分布点只是d... 查看详情

谷歌markercluster

...，热力图和聚合点的使用无疑是最好的选择。1.首先说说百度地图，只做国内的地图可以使用百度地图的海量点和热力图还是蛮好用的。a.海量点的最大好处是加载很多数据点的情况下不卡顿。b.如果是画mark在地图上，当点多的... 查看详情

谷歌地图聚合点

r语言绘图：在地图上绘制热力图

使用ggplot2在地图上绘制热力图######*****绘制热力图代码*****#######interval<-seq(0,150000,25000)[-2]#设置价格区间newpri<-cut(data1$price,interval,labels=F)#设置价格为因子类型newpri<-factor(newpri,levels=1:5,labels=c("250 查看详情

基于开源项目sharpmap的热力图(heatlayer)实现。

　　当前公司需要一个用时较少的热力图呈现方案，在避免较底层的GDI开发和比较了多家GIS产品的实际效果之后，团队决定用sharpMap的API来实现，由于之前框架采用的是另外一个开源项目GMap.net，两个项目的交互必然存在一个过... 查看详情

echarts图表——地图&热力图

参考技术A地图是依据一定的绘制法则，使用制图方法，通过制图综合在一定的载体上，表达地球（或其他天体）上各种事物的空间分布、联系及时间中的发展变化状态绘制的图形。以特殊高亮的形式显示访客热衷的页面区域和... 查看详情

vue+antd搭配百度地图实现搜索定位等功能(代码片段)

...vue项目的时候有做到选择地址功能，而原项目中又引入了百度地图，所以我就打算通过使用百度地图来实现地址搜索功能啦。本次教程可能过于啰嗦，所以这里先放上预览地址供大家预览——点我预览，也可到文末直接下载代码... 查看详情

pytorch可视化热力图(代码片段)

...的显示的重点是梯度高的地方，也是网络关注的重点基于梯度进行热力图可视化有一些工作，如grad-cam，也有一些开发好的脚本，不过这些脚本不具有通用性，因此此处基于torch的hook机制进行可视化，是一种基础并且通用性... 查看详情

vue中使用百度地图实现城市定位(代码片段)

Vue项目运行环境：Vue2.0，VueCli3.0步骤一：登录百度地图开放平台在控制台---->应用管理---->我的应用下面创建一个应用。目的是获取ak步骤二：在public文件夹的index.html文件中导入百度地图，拼上你的ak步骤... 查看详情

vue中使用百度地图实现城市定位(代码片段)

grad-camcam和热力图，基于keras的实现

http://bindog.github.io/blog/2018/02/10/model-explanation/http://www.sohu.com/a/216216094_473283https://jacobgil.github.io/deeplearning/class-activation-mapshttps://github.com/keras-team/keras/issues/ 查看详情