最近做项目遇到地图相关的需求,然后采用百度地图来实现地图热力图、省区标注点及描边。主要是几个笔记记录下。
热力图:
代码如下:
// 地图
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);