vue 实现高德坐标转GPS坐标

首先介绍一下常见的几种地图的坐标类型:

  1. WGS-84:这是一个国际标准,也就是GPS坐标(Google Earth、或者GPS模块采集的都是这个类型)。
  2. GCJ-02:中国坐标偏移标准,像是Google Map、高德、腾讯地图都是采用这种坐标展示。
  3. BD-09:百度坐标偏移标准,百度地图专用的便宜标准。

所以说这篇博文主要是实现GCJ-02坐标转换成WGS-84坐标。

什么时候会用到需要解决坐标转换的问题呢?起因是一个demo,它使用GPS模块采集经纬度数据,然后使用高德地图进行转换,是的,高德地图官方提供了API,实现了GPS坐标转换到高德坐标进行展示,也就是WGS-84转GCJ-02高德官方已经支持了,看下面。

高德坐标转换地址(点这里



通过高德官方提供的两个案例可以实现GPS坐标转换/批量转换成高德坐标展示,但是这种API接口是有访问次数限制的,当日访问次数超限额,是会被禁止访问转换的,所以说如果转换的坐标过多,尽量使用批量,不要一个一个的转换浪费次数。

但是比如说这样一个功能,我需要根据当前地图可视化范围,获取当前可视化范围的点,这样可能会出现问题,因为查询的点是GPS坐标,但是传给后台的可视化范围是高德坐标,两个坐标不统一,就会出现坐标偏差,效果就不是特别的好。

因此,就需要将可视化范围的东北角坐标和西南角坐标转换成GPS坐标在传给后台过滤,这样的话,可以将误差缩到最小。

这种转换的代码在网上很多,各式各样的都存在,但是有的效果不是特别的好,然后我找了一个测试了一下,感觉效果还是可以的,起码我能接受,需要的话看一下最后的效果图,如果接受的话,可以用起来。

首先有一个封装好的js文件,里面的代码就是下面的代码。


/**
* 高德地图坐标转GPS坐标算法
*/ //定义一些常量
const PI = 3.1415926535897932384626;
const a = 6378245.0; //长半轴
const ee = 0.00669342162296594323; //扁率 /**
* GCJ02 转换为 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]
}
} /**
* 判断是否在国内,不在国内则不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
function out_of_china(lng, lat) {
lat = +lat
lng = +lng
// 纬度3.86~53.55,经度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
}

就这些,然后用法大概都知道,就不详细说了。

我特意转换试了一下误差,我先找了一个原始的高德坐标,然后把这个高德坐标通过上面的代码转成GPS的坐标,然后又把转成的GPS坐标再使用高德官方提供的方法转回高德坐标,我感觉前后两个高德坐标是差不多的,起码误差我能接受。

下面是来回转换的效果图。

完成~

vue 实现高德坐标转GPS坐标的更多相关文章

  1. 地图坐标转换 -- 火星坐标与GPS坐标

    第一次处理地理位置的数据的人,没什么经验,往往掉入很多坑浪费不少时间.我也是刚刚从坑里爬出来.这篇博文主要是把入门GPS轨迹分析的经验总结一下,以方便大家少走些弯路. (1)可视化 GPS 路径 刚拿 ...

  2. 高德SDK获取到的坐标转换为GPS真实坐标方法,Java版

    发现高德SDK不提供高德的坐标转GPS坐标(GCJ_02转WGS_84),下面是一份Java版的 /**************************** 文件名:GCJ2WGS.java 创建时间 ...

  3. GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)(转载)

    WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块)GCJ-02:中国坐标偏移标准,Google Map.高德.腾讯使用BD-09:百度坐标偏移标准,Baidu Map ...

  4. GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)

    WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块)GCJ-02:中国坐标偏移标准,Google Map.高德.腾讯使用BD-09:百度坐标偏移标准,Baidu Map ...

  5. GPS坐标互转:WGS-84(GPS)、GCJ-02(Google地图)、BD-09(百度地图)[转]

    WGS-84:是国际标准,GPS坐标(Google Earth使用.或者GPS模块)GCJ-02:中国坐标偏移标准,Google Map.高德.腾讯使用BD-09:百度坐标偏移标准,Baidu Map ...

  6. BD09坐标(百度坐标) WGS84(GPS坐标) GCJ02(国测局坐标) 的相互转换

    BD09坐标(百度坐标) WGS84(GPS坐标) GCJ02(国测局坐标) 的相互转换 http://www.cnphp6.com/archives/24822 by root ⋅ Leave a ...

  7. GPS坐标换算为百度坐标

    最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地 ...

  8. delphi 调用百度地图WEBSERVICE转换GPS坐标 转

    http://www.cnblogs.com/happyhills/p/3789864.html   百度地图的API说明 使用方法 第一步,申请密钥(ak),作为访问服务的依据: 第二步,按照请求参 ...

  9. PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例

    原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程序--> <!DOCTYPE html> <html&g ...

随机推荐

  1. Flash XSS

    示例: 创建一个测试flash,代码如下,导出swf文件 //取m参数 var m=_root.m; //取showInfo参数 var showInfo=_root.showInfo; //调用ht ...

  2. iOS全埋点解决方案-应用退出和启动

    前言 ​ 通过应用程序退出事件,可以分析应用程序的平均使用时长:通过应用程序的启动事件,可以分析日活和新增.我们可以通过全埋点方式 SDK 实现应用程序的退出和启动事件. 一.全埋点的简介 ​ 目前. ...

  3. 集成SpringCloudBus,但没有总线通知更改

    配置服务端别忘了添加以下2个依赖 implementation("org.springframework.cloud:spring-cloud-config-server")imp ...

  4. 什么是 YAML?

    YAML 是一种人类可读的数据序列化语言.它通常用于配置文件. 与属性文件相比,如果我们想要在配置文件中添加复杂的属性,YAML 文件就更加 结构化,而且更少混淆.可以看出 YAML 具有分层配置数据 ...

  5. JWT jti和kid属性的说明

    jti chaim=== JWT ID " jti"(JWT ID)声明为JWT提供了唯一的标识符. 标识符值的分配方式必须确保将相同值偶然分配给不同数据对象的可能性可以忽略不计: ...

  6. UML 中有哪些常用的图?

    UML 定义了多种图形化的符号来描述软件系统部分或全部的静态结构和动态结 构,包括:用例图(use case diagram).类图(class diagram).时序图(sequence diagr ...

  7. 阐述 ArrayList、Vector、LinkedList 的存储性能和特性?

    ArrayList 和 Vector 都是使用数组方式存储数据,此数组元素数大于实际存储的 数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉 及数组元素移动等内存操作,所以索引数 ...

  8. mysql问题排查与性能优化

     MySQL 问题排查都有哪些手段? 使用 show processlist 命令查看当前所有连接信息. 使用 explain 命令查询 SQL 语句执行计划. 开启慢查询日志,查看慢查询的 SQL. ...

  9. MariaDB CTE公用表达式

    公用表达式(Common Table Expressions,简称CTE) Maria DB 版本为10.2.2以上的才支持 WITH 语法 CTE 介绍 WITH关键字表示公用表表达式(CTE) 它 ...

  10. java模板设计