天地圖專題七：行政區域標記，熱力圖（以廣西為例）

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

 

最近上個項目甲方想搞一個類似熱力圖，熱點圖的東西。在天地圖API上沒有找到類似的直接畫熱力圖的接口，只好用了一些替代的方法。

天地圖行政區域，行政區划直接接口也沒找到，用邊界點自己畫。

 琢磨了一陣。 記下來。有需要的可以參考 。

 

比如繪制廣西省的熱力圖，實現思路很簡單：給廣西省每個城市行政區域塗上顏色。 根據熱度不同，給每個城市塗的顏色加上不同的透明度。

 

先上效果圖：

 

在天地圖上根據坐標點繪制區域 有接口TPolygon。 可以調節顏色，透明度，邊線什么的。

然后就是如何得到的這些行政區域邊界點。說來慚愧，我是用很笨的方法：

到天地圖代碼示例那里：http://api.tianditu.com/api-new/examples.html，用他們的搜索接口去搜索一個省，城市，然后就可以用 瀏覽器工具 得到這個區域的邊界坐標了。

核心代碼：

 

//繪制邊界,來自天地圖demo.
function drawArea(json,opacity){

    var area = json.area;
    var points = area.points;
    //如果有區域坐標信息，畫出此行政區的多邊形。
    if(points && points.length != 0){
        //面的線的樣式
        var style = {
            strokeColor : "#0027eb",
            fillColor : "red",
            strokeWeight : 1,
            strokeOpacity : 0.000001,
            fillOpacity : opacity, //透明度，隨機生成。
            strokeStyle : "dashed" //虛線
        }
        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 TLngLat(pArr[0],pArr[1]);
                pointsz.push(point);
            }
            var poly = new TPolygon(pointsz,style);
            map.addOverLay(poly);
        }
    }
}

 

 

var areaArr = [nanningArea,liuzhouArea,gunlinArea,wuzhouArea,beihaiArea,fangchenggangArea,qinzhouArea,guigangArea,yulinArea,baiseArea,hezhouArea,hechiArea,laibinArea,chongzuoArea,guilinArea];


for (var i = 0,aLen = areaArr.length; i < aLen; i++) {
    drawArea(areaArr[i],getRandom(50)/100);
};


//生成隨機正整數 1到n之間。
function getRandom(n){
    return Math.floor(Math.random()*n+1)
}

 

演示：

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

 

注意：1.邊界值放大了看會有一些不重合的地方。補救方法是限制天地圖綻放級別。     2.隨機不透明度不要設太高，不然視覺效果不好。上面的圖是最高不透明度0.5的效果。

有更好的建議歡迎留言交流。

轉載注明出處：http://blog.csdn.net/liusaint1992/article/details/50531015