天地图专题七:行政区域标记,热力图(以广西为例)

Posted 疯子加天才

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了天地图专题七:行政区域标记,热力图(以广西为例)相关的知识,希望对你有一定的参考价值。

天地图方面的文章已很久不写。 主要是因为上一个项目结束,基本就不用天地图了。用百度地图的可能更大一些。

 

最近上个项目甲方想搞一个类似热力图,热点图的东西。在天地图API上没有找到类似的直接画热力图的接口,只好用了一些替代的方法。

天地图行政区域,行政区划直接接口也没找到,用边界点自己画。

 琢磨了一阵。 记下来。有需要的可以参考 。

 

比如绘制广西省的热力图,实现思路很简单:给广西省每个城市行政区域涂上颜色。 根据热度不同,给每个城市涂的颜色加上不同的透明度。

 

先上效果图:

 

在天地图上根据坐标点绘制区域 有接口TPolygon。 可以调节颜色,透明度,边线什么的。

然后就是如何得到的这些行政区域边界点。说来惭愧,我是用很笨的方法:

到天地图代码示例那里:http://api.tianditu.com/api-new/examples.html,用他们的搜索接口去搜索一个省,城市,然后就可以用 浏览器工具 得到这个区域的边界坐标了。

核心代码:

 

[javascript] view plain copy
 
  1. //绘制边界,来自天地图demo.  
  2. function drawArea(json,opacity){  
  3.   
  4.     var area = json.area;   
  5.     var points = area.points;   
  6.     //如果有区域坐标信息,画出此行政区的多边形。   
  7.     if(points && points.length != 0){   
  8.         //面的线的样式   
  9.         var style = {   
  10.             strokeColor : "#0027eb",   
  11.             fillColor : "red",   
  12.             strokeWeight : 1,   
  13.             strokeOpacity : 0.000001,   
  14.             fillOpacity : opacity, //透明度,随机生成。   
  15.             strokeStyle : "dashed" //虚线   
  16.         }   
  17.         for(var i = 0;i < points.length;i++){   
  18.             var region = points[i].region;//单个面   
  19.             var pointArr = region.split(",");   
  20.             var pointsz = [];   
  21.             for(var j = 0;j < pointArr.length - 1;j++){   
  22.                 var p = pointArr[j];   
  23.                 var pArr = p.split(" ");   
  24.                 var point = new TLngLat(pArr[0],pArr[1]);   
  25.                 pointsz.push(point);                   
  26.             }   
  27.             var poly = new TPolygon(pointsz,style);   
  28.             map.addOverLay(poly);   
  29.         }   
  30.     }   
  31. }  




 

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. var areaArr = [nanningArea,liuzhouArea,gunlinArea,wuzhouArea,beihaiArea,fangchenggangArea,qinzhouArea,guigangArea,yulinArea,baiseArea,hezhouArea,hechiArea,laibinArea,chongzuoArea,guilinArea];  
  2.   
  3.   
  4. for (var i = 0,aLen = areaArr.length; i < aLen; i++) {  
  5.     drawArea(areaArr[i],getRandom(50)/100);  
  6. };  
  7.   
  8.   
  9. //生成随机正整数 1到n之间。  
  10. function getRandom(n){  
  11.     return Math.floor(Math.random()*n+1)  
  12. }  



 

演示:

http://runningls.com/demos/tianditu/index.html?to=loadgx

 

注意:1.边界值放大了看会有一些不重合的地方。补救方法是限制天地图绽放级别。     2.随机不透明度不要设太高,不然视觉效果不好。上面的图是最高不透明度0.5的效果。

有更好的建议欢迎留言交流。

转载注明出处:http://blog.csdn.net/liusaint1992/article/details/50531015

以上是关于天地图专题七:行政区域标记,热力图(以广西为例)的主要内容,如果未能解决你的问题,请参考以下文章

去哪里可以买到arcgis专题图

echarts图表——地图&热力图

PIE SDK热力图

高德地图热力图怎么开

数据可视化Python 热力图(seaborn.heatmap)

深度学习笔记19_卷积神经网络数据可视化_热力图