在开始转化前先理清几个名词的定义,以及为什么要转化?

WGS-84坐标系:也叫 地球坐标系,他是国际上通用的坐标系,谷歌地图用的就是WGS-84(谷歌中国除外),使用GPS芯片或者    北斗芯片的设备获取到的经纬度就是符合WGS-84坐标系的。

GCJ-02坐标系 :也叫 火星坐标系或国测坐标系,他是由中国国家测绘局独创的坐标体系;它是一种对经纬度数据的加密算法,即    加入随机的偏差,国内出版的各种地图系统(包括电子形式),必须至少采用GCJ-02对地理位置进行首次加密。谷歌中国地图、搜搜中国地图、高德地图都采用GCJ02地理坐标系。

那为什么要转化呢?

因为不同的坐标系之间是不兼容的,比如GPS芯片设备 定位 获取到的经纬度 直接在 高德地图上描点显示,就会发生偏移。

为了解决这个问题,可以通过以下方式处理
先vue项目中新建了一个单独的 wgs84_to_gcj02.js 文件,以下是js文件中的代码:

//wgs84_to_gcj02.js文件//地标 转 国测 常量
var x_PI = (3.14159265358979324 * 3000.0) / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0; //卫星椭球坐标投影到平面地图坐标系的投影因子。
var ee = 0.00669342162296594323; //椭球的偏心率。//判断是否在国内,在中国国内的经纬度才需要做偏移
function out_of_china(lng, lat) {return (lng < 72.004 ||lng > 137.8347 ||(lat < 0.8293 || lat > 55.8271 || false));
}//转化经度
function transformlng(lng, lat) {var 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;
}//转化纬度
function transformlat(lng, lat) {var 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;
}//wgs84 to gcj02   地球坐标系 转 火星坐标系
export function wgs84_to_gcj02(lng, lat) {if (out_of_china(lng, lat)) {return [lng, lat];} else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = (lat / 180.0) * PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat =(dlat * 180.0) /(((a * (1 - ee)) / (magic * sqrtmagic)) * PI);dlng =(dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);var mglat = lat + dlat;var mglng = lng + dlng;return [mglng, mglat];}
}//gcj02 to wgs84  火星坐标系 转 地球坐标系
export function gcj02_to_wgs84(lng, lat) {if (out_of_china(lng, lat)) {return [lng, lat]}else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);mglat = lat + dlat;mglng = lng + dlng;return [lng * 2 - mglng, lat * 2 - mglat]}
}

写好这个js函数之后,在需要用到这个方法的vue组件中引入

import { wgs84_to_gcj02 } from "../../../utils/wgs84_to_gcj02";

然后就可以直接调用了

这是转化后的经纬度:

开发成长过程,简单记录,若有不恰当之处,欢迎指正!

在vue中wgs84和gcj02互相转化,地球坐标系转火星坐标系相关推荐

  1. 坐标转换 | EXCEL中WGS84转GCJ02,并在地图上标注

    1 前言 本文介绍的坐标方法,不需要写代码,不需要专业GIS软件.只需要有OFFICE办公软件,在EXCEL表格里直接进行数据处理. 本文使用的软件: OFFICE:2010版及以上. 小O地图EXC ...

  2. WGS84、GCJ02、BD09坐标系互转

    各坐标系简介与转换,包括WGS84(地球坐标系).GCJ02(火星坐标系)和BD09(百度坐标系) 一.各坐标系简介与转换 背景:从GPS和北斗卫星定位得到的定位数据采用的都是WGS84坐标系,即地球 ...

  3. vue中时间戳转化日期

    在vue中将获取到的时间戳转化为日期格式 将封装的时间戳函数单独放在一个js文件中 //导出封装的时间戳函数 formatDate export function formatDate(date, f ...

  4. vue中日期格式转化

    日期的格式转换: 在vue中写: {{scope.row.createTime|formatDate}} 在js中写: formatDate(createTime){ return new Date( ...

  5. 百度地图开放平台wgs84,gcj02转bd09

    百度地图开放平台wgs84,gcj02转bd09 完整代码 代码解读 参考文献 开局一张图,故事全靠编,上图是上海市257个地铁站bd09坐标和wgs84坐标的差距,可以看到bd09较wgs84往右上 ...

  6. B站/博客园/CSDN/知乎:@秋意正寒 地球坐标系(WGS84),火星坐标系(GCJ02), 百度坐标系(BD09)坐标转换

    https://blog.csdn.net/skh2015java/article/details/68486756 聊聊GIS中那些坐标系 转载请声明到标题. B站/博客园/CSDN/知乎:@秋意正 ...

  7. GIS数据格式坐标转换(地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000)

    文章目录 前言 一.坐标系 1.地球坐标 (WGS84) 2.国测局坐标系(GCJ-02.火星坐标系) 3.百度坐标(BD-09) 4.国家大地2000坐标系(CGCS2000) 二.百度坐标系(BD ...

  8. java get请求 数组,浅谈vue中get请求解决传输数据是数组格式的问题

    qs的stringify接收2个参数,第一个参数是需要序列化的对象,第二个参数是转化格式,一般默认格式是给出明确的索引,如:arr[0]=1&arr[1]=2 //indices是index的 ...

  9. .vue文件 转换成html,在vue中把含有html标签转为html渲染页面的实例

    在vue中把含有html标签转为html渲染页面的实例 在标签内部添加v-html指令即可 使用pug的写法: 这个content表示的是一个含标签的变量 输入content为: 我是p标签 输出结果 ...

最新文章

  1. 一个初级程序员学习新技术的策略
  2. GCC __builtin_expect与kernel指令序列优化
  3. ajax和Java session监听
  4. 离散系数的计算公式_如何求不同变量之间的离散程度
  5. Reading SBAR SDN flow-Based monitoring and Application Recognition
  6. .NET采集数据,放入数据库总结
  7. 7001.ubuntu18.04搭建go语言开发环境
  8. Install Toad for Oracle 10.6 on Winows 7 X64
  9. 菜鸟之路---1,熊猫烧香病毒的简单分析
  10. Android关于BottomNavigationView效果实现指南
  11. 龙芯LoongArch电脑上用dh-make打包deb包
  12. python except exception_Python 获取异常(Exception)信息的几种方法
  13. linux运行igv报错,远程linux IGV桌面显示(putty+xming+xmanager)-Go语言中文社区
  14. (附代码)数独大作业【读取数独,解数独,生成唯一解数独(随机,特定形状,不同难度生成),玩数独】
  15. Python还原微信好友已撤回的微信消息
  16. 基于微信小程序的水果销售商城的设计与实现
  17. 用 js判断 一个数是否是素数(质数)_人教版五年级数学下册第2单元质数和合数(P14)图文讲解...
  18. 当网站不允许上传asp cer cdx htr文件时的一个解决方法!
  19. [已解决]win11家庭版安装软件提示,系统策略禁止安装此设备。请与系统管理员联系
  20. jq-weui滚动刷新,日历,和地址选择器

热门文章

  1. 基于jQuery.i18n.properties插件实现前端页面国家化
  2. 原生js开发canvas双人射击游戏
  3. 微信开发者工具实现监听效果
  4. 必背五十句户外经典英语口语
  5. 迷你WIFI摄像机五个优势点不可忽略
  6. 黑马程序员,黑马论坛---JavaEE第4期,毕业7天,34人就业平均薪资7308
  7. PNAS:勘探地球物理学论文
  8. 灰色关联投影法python_灰色关联投影法(讲座).doc
  9. 《计算机硬件技术基础》在线平时作业1
  10. 基于OSPF(MGRE全连网状、星型结构)