Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
首先介紹一下常見的幾種地圖的坐標(biāo)類型:
WGS-84:這是一個(gè)國際標(biāo)準(zhǔn),也就是GPS坐標(biāo)(Google Earth、或者GPS模塊采集的都是這個(gè)類型)。
GCJ-02:中國坐標(biāo)偏移標(biāo)準(zhǔn),像是Google Map、高德、騰訊地圖都是采用這種坐標(biāo)展示。
BD-09:百度坐標(biāo)偏移標(biāo)準(zhǔn),百度地圖專用的便宜標(biāo)準(zhǔn)。
所以說這篇博文主要是實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)。
什么時(shí)候會(huì)用到需要解決坐標(biāo)轉(zhuǎ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)這里)

通過高德官方提供的兩個(gè)案例可以實(shí)現(xiàn)GPS坐標(biāo)轉(zhuǎn)換/批量轉(zhuǎn)換成高德坐標(biāo)展示,但是這種API接口是有訪問次數(shù)限制的,當(dāng)日訪問次數(shù)超限額,是會(huì)被禁止訪問轉(zhuǎn)換的,所以說如果轉(zhuǎn)換的坐標(biāo)過多,盡量使用批量,不要一個(gè)一個(gè)的轉(zhuǎn)換浪費(fèi)次數(shù)。
但是比如說這樣一個(gè)功能,我需要根據(jù)當(dāng)前地圖可視化范圍,獲取當(dāng)前可視化范圍的點(diǎn),這樣可能會(huì)出現(xià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)過濾,這樣的話,可以將誤差縮到最小。
這種轉(zhuǎn)換的代碼在網(wǎng)上很多,各式各樣的都存在,但是有的效果不是特別的好,然后我找了一個(gè)測(cè)試了一下,感覺效果還是可以的,起碼我能接受,需要的話看一下最后的效果圖,如果接受的話,可以用起來。
首先有一個(gè)封裝好的js文件,里面的代碼就是下面的代碼。
/**
* 高德地圖坐標(biāo)轉(zhuǎn)GPS坐標(biāo)算法
*/
//定義一些常量
const PI = 3.1415926535897932384626;
const a = 6378245.0; //長半軸
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]
}
}
/**
* 判斷是否在國內(nèi),不在國內(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ì)說了。
我特意轉(zhuǎn)換試了一下誤差,我先找了一個(gè)原始的高德坐標(biāo),然后把這個(gè)高德坐標(biāo)通過上面的代碼轉(zhuǎn)成GPS的坐標(biāo),然后又把轉(zhuǎn)成的GPS坐標(biāo)再使用高德官方提供的方法轉(zhuǎn)回高德坐標(biāo),我感覺前后兩個(gè)高德坐標(biāo)是差不多的,起碼誤差我能接受。
下面是來回轉(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)文章
Vue3 響應(yīng)式偵聽與計(jì)算的實(shí)現(xiàn)
這篇文章主要介紹了Vue3 響應(yīng)式偵聽與計(jì)算的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
詳解Vue webapp項(xiàng)目通過HBulider打包原生APP(vue+webpack+HBulider)
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過HBulider打包原生APP(vue+webpack+HBulider),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue如何使用window.open打開頁面并拼接參數(shù)
這篇文章主要介紹了vue如何使用window.open打開頁面并拼接參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
Vue實(shí)現(xiàn)購物車計(jì)算總價(jià)功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購物車計(jì)算總價(jià)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

