天地图:描绘热力图

1.场景

    在天地图上以热力图的形式展现数据,本文章以山东为例。

2.解决方案

    2.1天地图API已经有了绘制热力图的方法,可以使用。

        http://lbs.tianditu.com/api/js4.0/examples.html

    2.2描绘行政区划

        天地图也没有提供行政区划API,所以行政区划采用边界点描绘。

    2.3描绘热力图

        给所需要描绘的省(本文是山东省为例)每个城市行政区域涂上颜色。 根据热度不同,给每个城市涂的颜色加上不同的透明度。

3.具体实现

    3.1天地图可通过接口T.Polygon根据坐标点(边界点)绘制区域

    3.2得到区域边界点

        到天地图的代码示例(http://lbs.tianditu.com/api/js4.0/examples.html),通过天地图引擎接口工具去搜索区域(可以是省或者城市),在通过浏览器工具得到该区域边界点。见图例:


这里我已将山东城市区域边界点信息查出:    

https://download.csdn.net/download/qq_37725650/10337302

3.3核心代码

//绘制行政区域 ,json:传入的区域边界点信息对象,opacity:透明度
function drawArea(json,opacity){
	var area = json.area;   
	var points = area.points;   
	//如果有区域坐标信息,画出此行政区的多边形。   
	if(points && points.length != 0){   
		//面的线的样式
		var style = {
			color: "blue",
			weight: 1,
			opacity: 0, 
			strokeStyle : "dashed", //虚线   
			fillColor : "red",   					   
			fillOpacity : opacity //透明度  					
		};
		for(var i = 0;i < points.length;i++){
			var region = points[i].region;//单个面   
			var pointArr = region.split(",");   
			var pointsz = [];   
			for(var j = 0;j < pointArr.length - 1;j++){   
				var p = pointArr[j];   
				var pArr = p.split(" ");   
				var point = new T.LngLat(pArr[0],pArr[1]);   
				pointsz.push(point);                   
			}   
			var poly = new T.Polygon(pointsz,style);  
			map.addOverLay(poly);   
		}   
	}   
}
//shandongNumber:各个城市的测试数据
//shandongArea:山东省各个城市区域边界点信息数组,已在上面贴出
var shandongNumber = [40,75,37,35,84,58,62,122,58,20,91,76,100,76,35,41,18];
for (var i = 0,sdLen = shandongArea.length; i < sdLen; i++) {
	//调用方法画出相应地区热力图 
	drawArea(shandongArea[i],shandongNumber[i]/150);  
};

4.效果图


5.完成

    参考文章:https://blog.csdn.net/liusaint1992/article/details/50531015

    PS:参考文章中部分属性天地图已更新

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

低调D树苗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值