当前位置:网站首页>百度地图 实现 热力图
百度地图 实现 热力图
2022-07-17 05:05:00 【小青年一枚】
最近做项目遇到地图相关的需求,然后采用百度地图来实现地图热力图、省区标注点及描边。主要是几个笔记记录下。
热力图:
代码如下:
// 地图
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
},
];
var gradient = {
0.7: 'rgb(0, 110, 255, 1)',
0.8: 'rgb(241, 175, 6, 1)',
1: 'rgb(247, 46, 5, 1)'
};
heatmapOverlay = new BMapLib.HeatmapOverlay({
"radius": 30
});
map.addOverlay(heatmapOverlay);
heatmapOverlay.setDataSet({
data: points,
max: 500
});
heatmapOverlay.setOptions({
"gradient": gradient
});
省市区标注点及描边:
代码如下:
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。
});
map.addOverlay(hole);
});
// 创建点标记
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));
// 在地图上添加点标记
map.addOverlay(marker1);
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);
map.addOverlay(marker8);
map.addOverlay(marker9);
map.addOverlay(marker10);
map.addOverlay(marker11);
map.addOverlay(marker12);
map.addOverlay(marker13);
map.addOverlay(marker14);
map.addOverlay(marker15);
map.addOverlay(marker16);
map.addOverlay(marker17);
map.addOverlay(marker18);
map.addOverlay(marker19);
map.addOverlay(marker20);
map.addOverlay(marker21);
map.addOverlay(marker22);
map.addOverlay(marker23);
map.addOverlay(marker24);
边栏推荐
- C语言初学者之初识代码专项练习
- IDL MODIS 生成查找表
- Swagger's pit
- 02 Bar _ Recommandation de film (basée sur le contenu) Portrait de l'utilisateur
- Fanoutexchange switch is simple to use
- [batch] batch delete intermediate folder - personal research script
- elment-ui使用方法
- 02_ Movie recommendation (contentbased)_ User portrait
- Microservice high concurrency service governance
- 【C】 Beam calculator
猜你喜欢
随机推荐
学习C语言第8天
User - registration / login
学习C语言第7天
学习C语言第三天
Feature extraction of machine learning (digitization and discretization of category features and digitization of text features)
Infinite classification
Mysql database experiment training 6, data view (detailed)
User management - restrictions
【C语言—零基础第十课】数组王国奇遇记
Flask的使用
HarmonyOS第三次培训笔记
Message converter (JSON)
SQL语句学习
MySQL optimization
Modelarts second training notes
硬核结构体,暴力解读
获取数组中对象内部的数值最大与最小值多功能版及点名系统完整版并展示效果
SQL statement learning
小程序editor富文本编辑使用及rich-text解析富文本
学习C语言的第四天









