700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 天地图:描绘热力图

天地图:描绘热力图

时间:2018-05-07 05:36:36

相关推荐

天地图:描绘热力图

1.场景

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

2.解决方案

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

/api/js4.0/examples.html

2.2描绘行政区划

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

2.3描绘热力图

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

3.具体实现

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

3.2得到区域边界点

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

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

/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.完成

参考文章:/liusaint1992/article/details/50531015

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

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