这篇主要记录一下热力地图的实现,附带区域描边功能实现
准备
引用百度API资源和热力图效果API资源
<!--百度API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourKey"></script>
<!--热力图效果API-->
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<!--百度地图区域描边API-->
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
百度地图容器
<div id="container" style="position:absolute;top:40px;left:10px;">
<!--地图-->
</div>
创建百度地图实例
var map = new BMap.Map("container");
区域描边
rs.boundaries是以数组形式存在的,正常一个行政区域只有一组边界,所以一般取某一行政区域边界用rs.boundaries[0]即可,rs.boundaries[i]值的形式"111.91,29.36;111.92,29.37;…",所以如果有自定义的描边的需求的话,可以自己根据区域的形状用百度的经纬度以上述形式 拼字符串调用BMap.Polygon方法即可,map.addOverlay()是百度地图添加覆盖物的方法,画出来的区域本质上也是覆盖物
//获取行政区域边界
var bdary = new BMap.Boundary();
bdary.get('湖南省常德市', function (rs) {
/*rs.boundaries是以数组形式存在的,正常一个行政区域只有一组边界,所以一般取某一
行政区域边界用rs.boundaries[0]即可*/
var count = rs.boundaries.length;
for (var i = 0; i < count; i++) {
/*创建边界覆盖物,rs.boundaries[i]值的形式是"111.91,29.36;111.92,29.37;...",
所以如果有自定义的描边的需求的话,可以自己根据区域的形状用百度的经纬度以上述形式
拼字符串调用下面的方法即可*/
var ply = new BMap.Polygon(rs.boundaries[i], {
strokeWeight: 2,
strokeOpacity: 0.8,
StrokeStyle: "solid",
strokeColor: "#1abc9c",
fillColor: "#16a085",
fillOpacity: 0.2
});
map.addOverlay(ply); //添加覆盖物
}
});
热力图效果
{“radius”:20}设置热力点半径大小,{0.2:‘rgb(0, 255, 255)’,0.5:‘rgb(0, 110, 255)’}设置热力颜色渐变效果,0.2、0.5是数据权重比例。
points的格式为[{“lng”: 111.91, “lat” : 29.68, “count” : 100},[{“lng”: 111.90, “lat” : 29.67, “count” : 50}],其中lng是经度,lat是纬度,count是数据权重,count数值越大,热力点的颜色越深。
//创建热力图覆盖物层
var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20},{0.2:'rgb(0, 255, 255)',0.5:'rgb(0, 110, 255)'});
//将覆盖物添加到百度地图上
map.addOverlay(heatmapOverlay);
//为热力图添加数据,min和max是数据权重的最大最小值
heatmapOverlay.setDataSet({data:points,min:0,max:100});