欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解

 更新時(shí)間:2022年04月20日 10:48:05   作者:秦浩鋮  
生活中常用的幾種坐標(biāo)有:WGS-84、GCJ-02與BD-09。本文將利用Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能,即實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(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ì)比

    詳解如何使用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-06
  • Vue3?<script?setup?lang=“ts“>?的基本使用

    Vue3?<script?setup?lang=“ts“>?的基本使用

    <script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時(shí)語(yǔ)法糖,本文主要講解<script setup>?與?TypeScript?的基本使用,感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果

    Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果

    這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法

    vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法

    今天小編就為大家分享一篇vue 使用自定義指令實(shí)現(xiàn)表單校驗(yàn)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-08-08
  • vue的table表格組件的封裝方式

    vue的table表格組件的封裝方式

    這篇文章主要介紹了vue的table表格組件的封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問(wèn)題

    vue函數(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-04
  • Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖

    Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖

    這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue使用原生swiper代碼實(shí)例

    vue使用原生swiper代碼實(shí)例

    這篇文章主要介紹了vue使用原生swiper代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • 如何修改vue-treeSelect的高度

    如何修改vue-treeSelect的高度

    這篇文章主要介紹了如何修改vue-treeSelect的高度,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • VUE element上傳動(dòng)態(tài)設(shè)置action路徑和參數(shù)的坑及解決

    VUE element上傳動(dòng)態(tài)設(shè)置action路徑和參數(shù)的坑及解決

    這篇文章主要介紹了VUE element上傳動(dòng)態(tài)設(shè)置action路徑和參數(shù)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-07-07

最新評(píng)論