天地圖方面的文章已很久不寫。 主要是因為上一個專案結束，基本就不用天地圖了。用百度地圖的可能更大一些。

最近上個專案甲方想搞一個類似熱力圖，熱點圖的東西。在天地圖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

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