基于JavaScript實現(xiàn)高德地圖和百度地圖提取行政區(qū)邊界經(jīng)緯度坐標(biāo)
前言
近來由于工作需要,需要提取某些城市的經(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顯示和處理,下次會寫一篇筆記.
相關(guān)文章
JS實現(xiàn)消息來時讓網(wǎng)頁標(biāo)題閃動效果的方法
這篇文章主要介紹了JS實現(xiàn)消息來時讓網(wǎng)頁標(biāo)題閃動效果的方法,實例分析了JavaScript基于時間函數(shù)動態(tài)操作頁面元素的技巧,并附帶了開心網(wǎng)的標(biāo)題閃動解決方案,需要的朋友可以參考下2016-04-04用document.documentElement取代document.body的原因分析
ll建議用document.documentElement代替document.body2009-11-11JS表格組件神器bootstrap table詳解(強(qiáng)化版)
這篇文章主要以實例的方式為大家再次介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風(fēng)格,用戶體驗比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2016-05-05你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用
本篇文章小編為大家介紹,你必須知道的Javascript知識點之"單線程事件驅(qū)動"的使用。需要的朋友參考下2013-04-04常見效果實現(xiàn)之返回頂部(結(jié)合淡入、淡出、減速滾動)
返回頂部是經(jīng)常會見到的效果,代碼比較簡單,使用2個對象和一個主函數(shù)。職責(zé)明確方便復(fù)用2012-01-01JS實現(xiàn)很實用的對聯(lián)廣告代碼(可自適應(yīng)高度)
這篇文章主要介紹了JS實現(xiàn)很實用的對聯(lián)廣告代碼,可實現(xiàn)固定相對位置懸浮展示及跟隨屏幕上下滑動等功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09javascript實現(xiàn)十六進(jìn)制顏色值(HEX)和RGB格式相互轉(zhuǎn)換
這篇文章主要介紹了javascript實現(xiàn)十六進(jìn)制顏色值(HEX)和RGB格式之間的轉(zhuǎn)換,使用正則的方法實現(xiàn)RGB顏色轉(zhuǎn)換為16進(jìn)制,需要的朋友可以參考下2014-06-06webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程
這篇文章主要介紹了webpack學(xué)習(xí)--webpack經(jīng)典7分鐘入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06