700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 百度地图 实现 热力图

百度地图 实现 热力图

时间:2023-07-26 05:59:40

相关推荐

百度地图 实现 热力图

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

热力图:

代码如下:

// 地图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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。