天地图：描绘热力图

痛定思痛。 2022-05-27 02:13 416阅读 0赞

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），通过天地图引擎接口工具去搜索区域（可以是省或者城市），在通过浏览器工具得到该区域边界点。见图例：

![20180409211508795][]

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

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.效果图

![20180409212957468][]

5.完成

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

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

[20180409211508795]: /images/20220527/67cd46e2765148c3b3ec16bbdf9acd4b.png
[20180409212957468]: /images/20220527/b245d920cd9f47a18c71d1da98f0c5ca.png