百度地图jsAPI使用总结（二）热力地图

这篇主要记录一下热力地图的实现，附带区域描边功能实现

准备

引用百度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});