• 百度地图 实现 热力图
千次阅读
2021-06-21 10:03:51

最近做项目遇到地图相关的需求，然后采用百度地图来实现地图热力图、省区标注点及描边。主要是几个笔记记录下。
热力图：

代码如下：

// 地图
var map = new BMap.Map("mapWarp"); // 创建地图实例
var point = new BMap.Point(87.635087, 43.79934);
map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
//地图背景
changeMapStyle();
function changeMapStyle() {
var mapStyle = {
features: ["road", "building", "water", "land"], //隐藏地图上的"poi",
style: 'dark'//地图背景色
};
map.setMapStyle(mapStyle);
};
var points = [{
"lng": 87.630671,
"lat": 43.796474,
"count": 35000
},
{
"lng": 87.630581,
"lat": 43.799949,
"count": 451
},
{
"lng": 87.630401,
"lat": 43.79499,
"count": 215
},
{
"lng": 87.124242,
"lat": 44.094096,
"count": 500
},
{
"lng": 87.441596,
"lat": 43.475976,
"count": 500
},
{
"lng": 87.643391,
"lat": 44.354869,
"count": 500
},
{
"lng": 86.093994,
"lat": 44.298121,
"count": 500
},
{
"lng": 87.47839,
"lat": 43.904119,
"count": 340
},
{
"lng": 87.507136,
"lat": 43.804269,
"count": 400
},
{
"lng": 87.400777,
"lat": 43.832161,
"count": 460
},
{
"lng": 87.401926,
"lat": 43.729688,
"count": 318
},
{
"lng": 87.268546,
"lat": 43.886658,
"count": 480
},
{
"lng": 87.71813,
"lat": 43.857543,
"count": 411
},
{
"lng": 87.418599,
"lat": 43.960211,
"count": 370
},
{
"lng": 81.293201,
"lat": 43.88396,
"count": 420
},
{
"lng": 81.290182,
"lat": 43.9141,
"count": 400
},
{
"lng": 81.248645,
"lat": 43.867324,
"count": 327
},
{
"lng": 81.248645,
"lat": 43.867324,
"count": 423
},
{
"lng": 76.053702,
"lat": 39.407156,
"count": 460
},
];
0.7: 'rgb(0, 110, 255, 1)',
0.8: 'rgb(241, 175, 6, 1)',
1: 'rgb(247, 46, 5, 1)'
};
heatmapOverlay = new BMapLib.HeatmapOverlay({
});
heatmapOverlay.setDataSet({
data: points,
max: 500
});
heatmapOverlay.setOptions({
});


省市区标注点及描边：

代码如下：

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(123.471122, 41.683657), 8);
map.enableScrollWheelZoom(true);
var bd = new BMapGL.Boundary();
bd.get('辽宁省', function (rs) {
var hole = new BMapGL.Polygon(rs.boundaries, {
strokeColor: "#1E9FFF",      //边线颜色。
fillColor: "#1E9FFF",        //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3,        //边线的宽度，以像素为单位。
strokeOpacity: 0.8,     //边线透明度，取值范围0 - 1。
fillOpacity: 0.15,       //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid'    //边线的样式，solid或dashed。
});
});
// 创建点标记
var marker1 = new BMapGL.Marker(new BMapGL.Point(123.314746,41.799588));
var marker2 = new BMapGL.Marker(new BMapGL.Point(123.427139,41.795474));
var marker3 = new BMapGL.Marker(new BMapGL.Point(123.472721,41.683052));
var marker4 = new BMapGL.Marker(new BMapGL.Point(124.818002,40.764113));
var marker5 = new BMapGL.Marker(new BMapGL.Point(125.17215,41.760151));
var marker6 = new BMapGL.Marker(new BMapGL.Point(123.605124, 42.054113));
var marker7 = new BMapGL.Marker(new BMapGL.Point(123.755558, 41.497883));
var marker8 = new BMapGL.Marker(new BMapGL.Point(121.745654,42.004193));
var marker9 = new BMapGL.Marker(new BMapGL.Point(121.487135, 38.981857));
var marker10 = new BMapGL.Marker(new BMapGL.Point(122.009158, 39.633968));
var marker11 = new BMapGL.Marker(new BMapGL.Point(122.006858, 40.81675));
var marker12 = new BMapGL.Marker(new BMapGL.Point(120.863926, 40.808013));
var marker13 = new BMapGL.Marker(new BMapGL.Point(121.126088, 41.090486));
var marker14 = new BMapGL.Marker(new BMapGL.Point(120.756992, 40.791411));
var marker15 = new BMapGL.Marker(new BMapGL.Point(120.475283, 41.606914));
var marker16 = new BMapGL.Marker(new BMapGL.Point(122.140239, 41.674194));
var marker17 = new BMapGL.Marker(new BMapGL.Point(123.736204, 42.250908));
var marker18 = new BMapGL.Marker(new BMapGL.Point(123.789959, 42.223993));
var marker19 = new BMapGL.Marker(new BMapGL.Point(123.203833, 41.286799));
var marker20 = new BMapGL.Marker(new BMapGL.Point(122.934772, 41.125275));
var marker21 = new BMapGL.Marker(new BMapGL.Point(124.285824, 40.018754));
var marker22 = new BMapGL.Marker(new BMapGL.Point(122.559352, 40.690394));
var marker23 = new BMapGL.Marker(new BMapGL.Point(123.353311, 41.764222));
var marker24 = new BMapGL.Marker(new BMapGL.Point(123.308611, 41.798541));
// 在地图上添加点标记

更多相关内容
• 根据地理区域数据的可视化，除了在地图上添加散点之外，我们也可以制作地图类型的热力图，详细介绍：https://blog.csdn.net/qq_36437172/article/details/106121650
• 主要介绍了详解python 利用echarts画地图(热力图)(世界地图，省市地图，区县地图),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
• 基于ECharts & 百度地图热力图展示设计与实现
• 输入地址，自动生成百度地图标记点及热力图，可用于生成客户地图及客户分析
• 提供热力图可视化展现功能，注: 支持chrome, safari, IE9及以上的浏览器. 核心的代码主要来自于第三方heatmap.js, 主入口类是HeatmapOverlay， 基于Baidu Map API 2.0。
• #输入data生成热力图html，借助了leaflet，没网不能用 import os import folium data=[[ 39.90403 , 116.407526 , 23014.59 ] , [ 39.084158 , 117.200983 , 16538.19 ] , [ 38.042309 , 114.514862 , 5440.6 ] , [ ...
• Power BI 自定义形状地图制作中国热力地图.下载后打开就可直接食用。亲测有效，已经做完了相应的项目，现在来推荐给大家。
• 使用以百度地图为底的形式,结合echarts，在地图上显示echarts的scatter、effectScatter、custom元素
• arcgis for jsapi 4.20 三维地图下使用canvas绘制热力图
• echarts百度地图热力图踩坑后项目实践案例源文件，解决了地图固定比例展示、地图样式、适配问题
• 中国地图echarts热力图（含全国以及各省json文件），以颜色深浅来展现全国各地用户数量
• 详细的天地图的覆盖层调用，有需要的拿去，感觉还可以。
• python调用百度地图API实现经纬度换算、热力地图全流程指南
• 基于百度地图API，根据经纬度坐标在地图上添加点、标注及热力图
• 百度离线地图开发示例，供自己使用，大家请不要盲目下载！百度离线地图开发示例，供自己使用，大家请不要盲目下载！
• echarts 绘制地图 连线 时间轴 热力图等 使用echarts绘制了地图、连线、散点图、热力图、时间轴等 使用方法：在文件目录下打开控制台，开启一个python开启一个http服务，命令：python -m http.server 在浏览器中输入...
• ArcGIS JS API 4.20 二维地图下通过FeatureLayer渲染热力图
• echarts世界地图迁徙、飞线（带热力）的option配置
• 此展示效果为一个在地图上展示多个不同点的页面，用到的是静态数据，带有展示当前时间的效果，另外点击热力图开关按钮，打开热力图，展示显示范围
• 地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、瀑布图、气泡图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型、大屏设计必备组件 ...
• 百度离线地图开发示例代码，版本为1.3，可以打开demo.html直接查看效果。代码是我从网上搜寻来的，另外加上了我自己弄上去的热力图功能。对于百度地图的离线开发具有一定的参考价值。
• 提供热力图可视化展现功能，注: 支持chrome, safari, IE9及以上的浏览器. 核心的代码主要来自于第三方heatmap.js, 主入口类是HeatmapOverlay， 基于Baidu Map API 2.0。
•  }设置热力图展现的详细数据, 实现之后,即可以立刻展现 @param {Json Object } data{"<b>max</b>" : {Number} 权重的最大值, "<b>data</b>" : {Array} 坐标详细数据,格式如下 {"lng":116.421969,"lat":...
• 利用javaScript技术，根据json文件数据在地图上绘制热力图进行展示。
• 主要为大家详细介绍了Python绘制中国大陆人口热力图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
• 首先申请 百度地图的ak，注意将代码中的ak换为自己的ak，然后结合Echarts使用

...