百度地图 实现 热力图

最近做项目遇到地图相关的需求,然后采用百度地图来实现地图热力图、省区标注点及描边。主要是几个笔记记录下。
热力图:
在这里插入图片描述
代码如下:

// 地图
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);
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值