Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
首先介紹一下常見(jiàn)的幾種地圖的坐標(biāo)類型:
WGS-84:這是一個(gè)國(guó)際標(biāo)準(zhǔn),也就是GPS坐標(biāo)(Google Earth、或者GPS模塊采集的都是這個(gè)類型)。
GCJ-02:中國(guó)坐標(biāo)偏移標(biāo)準(zhǔn),像是Google Map、高德、騰訊地圖都是采用這種坐標(biāo)展示。
BD-09:百度坐標(biāo)偏移標(biāo)準(zhǔn),百度地圖專用的便宜標(biāo)準(zhǔn)。
所以說(shuō)這篇博文主要是實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)。
什么時(shí)候會(huì)用到需要解決坐標(biāo)轉(zhuǎn)換的問(wèn)題呢?起因是一個(gè)demo,它使用GPS模塊采集經(jīng)緯度數(shù)據(jù),然后使用高德地圖進(jìn)行轉(zhuǎn)換,是的,高德地圖官方提供了API,實(shí)現(xiàn)了GPS坐標(biāo)轉(zhuǎn)換到高德坐標(biāo)進(jìn)行展示,也就是WGS-84轉(zhuǎn)GCJ-02高德官方已經(jīng)支持了,看下面。
高德坐標(biāo)轉(zhuǎn)換地址(點(diǎn)這里)
通過(guò)高德官方提供的兩個(gè)案例可以實(shí)現(xiàn)GPS坐標(biāo)轉(zhuǎn)換/批量轉(zhuǎn)換成高德坐標(biāo)展示,但是這種API接口是有訪問(wèn)次數(shù)限制的,當(dāng)日訪問(wèn)次數(shù)超限額,是會(huì)被禁止訪問(wèn)轉(zhuǎn)換的,所以說(shuō)如果轉(zhuǎn)換的坐標(biāo)過(guò)多,盡量使用批量,不要一個(gè)一個(gè)的轉(zhuǎn)換浪費(fèi)次數(shù)。
但是比如說(shuō)這樣一個(gè)功能,我需要根據(jù)當(dāng)前地圖可視化范圍,獲取當(dāng)前可視化范圍的點(diǎn),這樣可能會(huì)出現(xiàn)問(wèn)題,因?yàn)椴樵兊狞c(diǎn)是GPS坐標(biāo),但是傳給后臺(tái)的可視化范圍是高德坐標(biāo),兩個(gè)坐標(biāo)不統(tǒng)一,就會(huì)出現(xiàn)坐標(biāo)偏差,效果就不是特別的好。
因此,就需要將可視化范圍的東北角坐標(biāo)和西南角坐標(biāo)轉(zhuǎn)換成GPS坐標(biāo)在傳給后臺(tái)過(guò)濾,這樣的話,可以將誤差縮到最小。
這種轉(zhuǎn)換的代碼在網(wǎng)上很多,各式各樣的都存在,但是有的效果不是特別的好,然后我找了一個(gè)測(cè)試了一下,感覺(jué)效果還是可以的,起碼我能接受,需要的話看一下最后的效果圖,如果接受的話,可以用起來(lái)。
首先有一個(gè)封裝好的js文件,里面的代碼就是下面的代碼。
/** * 高德地圖坐標(biāo)轉(zhuǎn)GPS坐標(biāo)算法 */ //定義一些常量 const PI = 3.1415926535897932384626; const a = 6378245.0; //長(zhǎng)半軸 const ee = 0.00669342162296594323; //扁率 /** * GCJ02 轉(zhuǎn)換為 WGS84 * @param lng * @param lat * @returns {*[]} */ function gcj02towgs84(lng, lat) { lat = +lat lng = +lng if (out_of_china(lng, lat)) { return [lng, lat] } else { let dlat = transformlat(lng - 105.0, lat - 35.0) let dlng = transformlng(lng - 105.0, lat - 35.0) let radlat = lat / 180.0 * PI let magic = Math.sin(radlat) magic = 1 - ee * magic * magic let sqrtmagic = Math.sqrt(magic) dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI) dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI) let mglat = lat + dlat let mglng = lng + dlng return [lng * 2 - mglng, lat * 2 - mglat] } } /** * 判斷是否在國(guó)內(nèi),不在國(guó)內(nèi)則不做偏移 * @param lng * @param lat * @returns {boolean} */ function out_of_china(lng, lat) { lat = +lat lng = +lng // 緯度3.86~53.55,經(jīng)度73.66~135.05 return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55) } function transformlat(lng, lat) { lat = +lat lng = +lng let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng)) ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0 ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0 return ret } function transformlng(lng, lat) { lat = +lat lng = +lng let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)) ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0 ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0 ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0 return ret } export { gcj02towgs84 }
就這些,然后用法大概都知道,就不詳細(xì)說(shuō)了。
我特意轉(zhuǎn)換試了一下誤差,我先找了一個(gè)原始的高德坐標(biāo),然后把這個(gè)高德坐標(biāo)通過(guò)上面的代碼轉(zhuǎn)成GPS的坐標(biāo),然后又把轉(zhuǎn)成的GPS坐標(biāo)再使用高德官方提供的方法轉(zhuǎn)回高德坐標(biāo),我感覺(jué)前后兩個(gè)高德坐標(biāo)是差不多的,起碼誤差我能接受。
下面是來(lái)回轉(zhuǎn)換的效果圖。
到此這篇關(guān)于Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解的文章就介紹到這了,更多相關(guān)Vue高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解如何使用Vue實(shí)現(xiàn)圖像識(shí)別和人臉對(duì)比
隨著人工智能的發(fā)展,圖像識(shí)別和人臉識(shí)別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中,Vue為我們提供了許多實(shí)用工具和庫(kù),可以幫助我們?cè)趹?yīng)用程序中進(jìn)行圖像識(shí)別和人臉識(shí)別,在本文中,我們將介紹如何使用Vue進(jìn)行圖像識(shí)別和人臉對(duì)比,需要的朋友可以參考下2023-06-06Vue3?<script?setup?lang=“ts“>?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時(shí)語(yǔ)法糖,本文主要講解<script setup>?與?TypeScript?的基本使用,感興趣的朋友跟隨小編一起看看吧2022-12-12Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法
今天小編就為大家分享一篇vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問(wèn)題
這篇文章主要介紹了vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03VUE element上傳動(dòng)態(tài)設(shè)置action路徑和參數(shù)的坑及解決
這篇文章主要介紹了VUE element上傳動(dòng)態(tài)設(shè)置action路徑和參數(shù)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07