在谷歌地圖上繪制行政區(qū)域輪廓【結(jié)合高德地圖的API】

這篇文章是之前我在博客園發(fā)表的一篇文章(在谷歌地圖上繪制行政區(qū)域輪廓
)斑唬，剛好最近有朋友問到類似的問題濒生，加上博客園已經(jīng)不寫博客，所以打算遷移到簡書留夜。

需求

希望在谷歌地圖上繪制一個城市的縣區(qū)級行政區(qū)輪廓褐桌。

困難點(diǎn)

谷歌地圖未提供【行政區(qū)查詢的API】衰抑，所以只能借助其他地圖的API

實(shí)現(xiàn)思路

1.先用其他地圖接口【行政區(qū)查詢的API】獲取一個城市所有的行政區(qū)
2.利用其他地圖的【行政區(qū)劃分查詢】api獲取每個區(qū)的行政區(qū)邊界坐標(biāo)點(diǎn)(百度地圖需要轉(zhuǎn)坐標(biāo)，高德地圖誤差小荧嵌，可以不需要轉(zhuǎn)換)
3.根據(jù)邊界坐標(biāo)點(diǎn)在谷歌地圖上繪制區(qū)域輪廓線

可以嘗試兩種地圖方案：
方式一：
用百度地圖的api進(jìn)行繪制呛踊，結(jié)果發(fā)現(xiàn)因?yàn)樾姓^(qū)輪廓的坐標(biāo)點(diǎn)數(shù)據(jù)不夠多，繪制出來的行政區(qū)輪廓很粗糙啦撮，精度不夠谭网，導(dǎo)致有些交界地區(qū)錯誤的劃分到其他行政區(qū)。

方式二(推薦)：
1.利用高德地圖行政區(qū)域API獲得坐標(biāo)列表
2.將坐標(biāo)列表繪制在谷歌地圖上【因?yàn)楦叩碌貓D和國內(nèi)的谷歌地圖都是采用GCJ02坐標(biāo)系赃春，所有誤差很小愉择，可以不進(jìn)行坐標(biāo)誤差轉(zhuǎn)換】

注意點(diǎn)
1.用百度地圖的API來繪制行政區(qū)域，不太準(zhǔn)確织中，很不推薦锥涕。
(1)百度地圖查詢行政區(qū)域本身不準(zhǔn)確，有的地方本來應(yīng)該屬于該區(qū)狭吼，被劃分到其他區(qū)了（
2）即使要用百度api层坠，也要注意轉(zhuǎn)換坐標(biāo)，因?yàn)榘俣鹊篌希雀枳鴺?biāo)系不同破花。貼段轉(zhuǎn)換代碼

var x_pi = Math.PI * 3000.0 / 180.0; 
//將 BD-09 坐標(biāo)轉(zhuǎn)換成 GCJ-02 坐標(biāo)(例如：百度坐標(biāo)-->谷歌坐標(biāo))
function bd_decrypt(bd_lat, bd_lon)  {  
    var x = bd_lon - 0.0065, y = bd_lat - 0.006;  
    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);  
    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);  
    var gg_lon = z * Math.cos(theta);  
    var gg_lat = z * Math.sin(theta);
    var result = {};
    result.gg_lon = gg_lon;//緯度
    result.gg_lat = gg_lat;//經(jīng)度
    return result;
}

2.高德地圖API文檔寫的很好，推薦使用高德地圖

不完美的地方
1.高德地圖API提供的坐標(biāo)疲吸，不能完整的畫出一個區(qū)的輪廓座每，比如上海崇明區(qū)的被劃分成幾個小圈，而實(shí)際上摘悴，應(yīng)該用一個大圈把崇明區(qū)包裹起來

對應(yīng)的需求峭梳，繪制出上海的所有行政區(qū)的輪廓，實(shí)現(xiàn)效果

image.png

核心代碼

showBoundarys();
//顯示行政區(qū)域
function showBoundarys() {
    //利用高德地圖的【行政區(qū)劃查詢】api獲取上海包含的所有區(qū)
    AMap.service('AMap.DistrictSearch', function() {
        var opts = {
            subdistrict: 2,   ////返回下一級行政區(qū)蹂喻。取值2葱椭，可以獲取到上海的所有區(qū)
            extensions: 'all',  //返回行政區(qū)邊界坐標(biāo)組等具體信息
            level: 'city'  //查詢行政級別為 市
        };
        //實(shí)例化DistrictSearch
        var district = new AMap.DistrictSearch(opts);
        //行政區(qū)查詢
        district.search("上海市", function(status, result) {
            var cityArr = result.districtList[0].districtList[0].districtList;
            for(var i=0;i<cityArr.length;i++){
                showBoundary(cityArr[i].adcode);
            }
        })
    });
}

/**
 * 用adcode(區(qū)域編碼)查詢，可以唯一定位到具體的地址叉橱。
 * 用name(行政區(qū)名稱)可能查出多個地址，不精確
 */
function showBoundary(adcode) {
    //利用高德地圖的【行政區(qū)劃查詢】api獲取每個區(qū)的行政區(qū)邊界坐標(biāo)點(diǎn)者蠕，再根據(jù)這些坐標(biāo)點(diǎn)在谷歌地圖上繪制區(qū)域輪廓線
    //加載行政區(qū)劃插件
    AMap.service('AMap.DistrictSearch', function() {
        var opts = {
                subdistrict: 0,   //返回下一級行政區(qū)
                extensions: 'all',  //返回行政區(qū)邊界坐標(biāo)組等具體信息
                level: 'district'  //查詢行政級別為 市
        };
        //實(shí)例化DistrictSearch
        var district = new AMap.DistrictSearch(opts);
        district.setLevel('district');
        //行政區(qū)查詢
        district.search(adcode, function(status, result) {
            var bounds = result.districtList[0].boundaries;

            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {//每個區(qū)域可能有分能幾個小塊窃祝，比如金山區(qū)除了有一塊陸地圈，還有海上獨(dú)立的三個小島
                    var boundsItem = bounds[i];
                    var triangleCoords = [];
                    for(var j = 0; j < boundsItem.length; j++){
                        triangleCoords.push(new google.maps.LatLng(boundsItem[j].lat, boundsItem[j].lng));
                    }
                    var bermudaTriangle = new google.maps.Polygon({
                        paths : triangleCoords,
                        strokeColor : "#1c49ff",
                        strokeOpacity : 0.8,
                        strokeWeight : 1,
                        // fillColor : "#FF0000",
                        fillOpacity : 0,
                        text:"xxxxx"
                    });
                    bermudaTriangle.setMap(map);
                    map.setZoom(9);    
                }

            }
        });
    });
}

參考網(wǎng)址
1.高德踱侣，百度粪小，Google地圖定位偏移以及坐標(biāo)系轉(zhuǎn)換：http://www.reibang.com/p/8975586a820e
2.坐標(biāo)拾取工具（GCJ-02坐標(biāo)） http://zhaoziang.com/amap/picpoint.html
[[圖片上傳失敗...(image-b5744a-1598598023705)]](file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/%E9%85%B8%E5%A5%B6%E5%B0%8F%E5%A6%B9%E7%9A%84%E7%81%AB%E6%98%9F%E5%9D%90%E6%A0%87.html)
3.WGS84大磺、GCJ02、BD09地圖坐標(biāo)系間的坐標(biāo)轉(zhuǎn)換及坐標(biāo)距離計(jì)算 http://nightfarmer.github.io/2016/12/01/GPSUtil/
4.高德地圖的API比百度探膊、谷歌的好用杠愧，比如行政區(qū)域的坐標(biāo)比百度的精確，接口文檔詳細(xì)逞壁，而谷歌的文檔還是英文的流济，例子也不夠全。以后選擇地圖腌闯，首選高德地圖
5.高德地圖官方demo http://lbs.amap.com/api/javascript-api/example/district-search/draw-district-boundaries
6.地球坐標(biāo)系 (WGS-84)到火星坐標(biāo)系 (GCJ-02) Javascript版 https://github.com/hiwanz/wgs2mars.js