快捷導(dǎo)航

基于JavaScript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)

更新時間：2016年01月22日 10:55:10 作者：云是風(fēng)的夢

本文給大家介紹javascript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)的相關(guān)知識，本文實用性非常高，代碼簡單易懂，需要的朋友參考下吧

前言

近來由于工作需要,需要提取某些城市的經(jīng)緯度坐標(biāo),稍微搜索了一下,發(fā)現(xiàn)百度地圖和高德地圖都提供了相關(guān)的函數(shù)和例子.那么剩余的工作也就比較簡單了,保存坐標(biāo),然后轉(zhuǎn)換為WGS坐標(biāo),這樣才能和現(xiàn)有的GPS數(shù)據(jù)以及地圖匹配.

主要問題和解決方法

本地保存文件跨瀏覽器支持

由于安全的原因,JavaScript本地保存文件的方式通常都只有IE支持的ActiveXObject/Open方法,每次都要提示不安全和允許運行,非常麻煩.好在其他瀏覽器目前都支持<a>標(biāo)簽實現(xiàn)文件下載的方法.經(jīng)測試最新的Google Chrome, Mozilla Firefox,百度瀏覽器,360瀏覽器下都可以運行.不說廢話,直接上代碼:

function Download() {
// IE
if(/msie/i.test(navigator.userAgent)) {
var w = window.open("", "導(dǎo)出", "height=0,width=0,toolbar=no,menubar=no,scrollbars=no,resizable=on,location=no,status=no");
var filename = document.getElementById("filename").value ;
var content = document.getElementById("content").value;
w.document.charset = "UTF-8";
w.document.write(content);
w.document.execCommand("SaveAs", false, filename+'.txt');
w.close();
}
// Firefox/Chrome/Safari/Opera
else {
var filename = document.getElementById("filename").value ;
var content = document.getElementById("content").value;
str = encodeURIComponent(content); 
document.getElementById("SaveChrome").download = filename+'.txt'; 
var aLink = document.getElementById("SaveChrome") ; 
aLink.href = "data:text/csv;charset=utf-8,"+str; 
aLink.click(); 
}
}

經(jīng)緯度轉(zhuǎn)換

這個話題感興趣的朋友可以自己搜索火星坐標(biāo)相關(guān)轉(zhuǎn)換,精度在1m范圍的網(wǎng)上提供有服務(wù)可以免費使用.自寫程序經(jīng)驗證精度在6m 以內(nèi).

百度地圖方法

關(guān)鍵函數(shù)是 BMap.Boundary() 生成的類,調(diào)用它的方法get就可以通過名稱獲得縣或市級以上的行政區(qū)域.

function getBoundary() {
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function (rs) { //獲取行政區(qū)域
var fileName = "";
var newFileObject = fso.CreateTextFile(folderName + "\\" + name + ".txt", true);
map.clearOverlays(); //清除地圖覆蓋物
var count = rs.boundaries.length; //行政區(qū)域的點有多少個
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多邊形覆蓋物
map.addOverlay(ply); //添加覆蓋物
map.setViewport(ply.getPath()); //調(diào)整視野
}
newFileObject.write(rs.boundaries[0]);
newFileObject.Close();
});
}

高德地圖

關(guān)鍵代碼通過閱讀示例文件可以發(fā)現(xiàn)在下拉列表返回里面有邊界值的出現(xiàn).

amapAdcode.search = function(adcodeLevel, keyword, selectId) {//查詢行政區(qū)劃列表并生成相應(yīng)的下拉列表
var me = this;
if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三級時查詢邊界點
this._district.setExtensions('all');
} else {
this._district.setExtensions('base');
}
this._district.setLevel(adcodeLevel); //行政區(qū)級別
this._district.search(keyword, function(status, result) {//注意，api返回的格式不統(tǒng)一，在下面用三個條件分別處理
var districtData = result.districtList[0];
if (districtData.districtList) {
me.createSelectList(selectId, districtData.districtList);
} else if (districtData.districts) {
me.createSelectList(selectId, districtData.districts);
} else {
document.getElementById(selectId).innerHTML = '';
}
map.setCenter(districtData.center);
me.clearMap();
me.addPolygon(districtData.boundaries);

其中的districtData.boundaries 就是我們需要的.調(diào)試了一下,大膽猜測果然是實現(xiàn)了Tostring() 方法的一個對象.
"104.639106,26.863388,104.644771,26.861842,104.64767,26.854997,104.647748..." 很明顯的就是我們需要的gcj坐標(biāo).

總結(jié)

至此,基本也就沒有什么問題了,剩余的工作就是解析得到的文件.需要提取全國的數(shù)據(jù)也就是循環(huán)讀取全國城市列表文件了.(通常搜索cityname,電腦里面都會找到的,原因,呵呵,猜測是迅雷,QQ之類的IP定位需要吧.)

重要的一點,推薦使用高德地圖,原因就是百度地圖得到的行政規(guī)劃有問題,不包含縣級市.最典型的就是貴州省,很多地市都是分離的,是帶島或洞的復(fù)雜多邊形.百度在這里完敗.關(guān)于怎么處理這里復(fù)雜的多邊形以支持在MapWinGIS顯示和處理,下次會寫一篇筆記.

您可能感興趣的文章: