DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於JavaScript實現高德地圖和百度地圖提取行政區邊界經緯度坐標
基於JavaScript實現高德地圖和百度地圖提取行政區邊界經緯度坐標
編輯:關於JavaScript     

前言

近來由於工作需要,需要提取某些城市的經緯度坐標,稍微搜索了一下,發現百度地圖和高德地圖都提供了相關的函數和例子.那麼剩余的工作也就比較簡單了,保存坐標,然後轉換為WGS坐標,這樣才能和現有的GPS數據以及地圖匹配.

主要問題和解決方法

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

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

function Download() {
// IE
if(/msie/i.test(navigator.userAgent)) {
var w = window.open("", "導出", "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(); 
}
}

經緯度轉換

這個話題感興趣的朋友可以自己搜索火星坐標相關轉換,精度在1m范圍的網上提供有服務可以免費使用.自寫程序經驗證精度在6m 以內.

百度地圖方法

關鍵函數是 BMap.Boundary() 生成的類,調用它的方法get就可以通過名稱獲得縣或市級以上的行政區域.

function getBoundary() {
var bdary = new BMap.Boundary();
var name = document.getElementById("districtName").value;
bdary.get(name, function (rs) { //獲取行政區域
var fileName = "";
var newFileObject = fso.CreateTextFile(folderName + "\\" + name + ".txt", true);
map.clearOverlays(); //清除地圖覆蓋物
var count = rs.boundaries.length; //行政區域的點有多少個
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()); //調整視野
}
newFileObject.write(rs.boundaries[0]);
newFileObject.Close();
});
} 

高德地圖

關鍵代碼通過閱讀示例文件可以發現在下拉列表返回裡面有邊界值的出現.

amapAdcode.search = function(adcodeLevel, keyword, selectId) {//查詢行政區劃列表並生成相應的下拉列表
var me = this;
if (adcodeLevel == 'district'||adcodeLevel == 'city') {//第三級時查詢邊界點
this._district.setExtensions('all');
} else {
this._district.setExtensions('base');
}
this._district.setLevel(adcodeLevel); //行政區級別
this._district.search(keyword, function(status, result) {//注意,api返回的格式不統一,在下面用三個條件分別處理
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 就是我們需要的.調試了一下,大膽猜測果然是實現了Tostring() 方法的一個對象.
"104.639106,26.863388,104.644771,26.861842,104.64767,26.854997,104.647748..." 很明顯的就是我們需要的gcj坐標.

總結

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved