记录--Openlayers 高德腾讯、百度、天地图坐标相互转换
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
在地图开发过程中，坐标的转换是很常用的功能，国内的话一般西安80（EPSG:4610）、北京54（EPSG:2433）转WGS84比较多，不同坐标系转换，只要知道EPSG码，通过 Openlayers 的方法就可以转换。
但是，像国内商用的地图（高德、腾讯、百度），要求数据加密，一般通过 GCJ-02 或者 BD-09 加密，不能简单通过 openlayers 的转换方法实现，需要手动使用算法完成转换。
本教程算法来自网络，目前提供点数据的转换，对于线和面推荐在数据库或者后端实现转换。
核心代码展示
通用部分
//定义一些常量
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323; let transformlat = function (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
} let transformlng = function (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
}
/**
* 判断是否在国内，不在国内则不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
let out_of_china = function (lng, lat) {
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
}
天地图坐标转高德
/**
* WGS84转GCj02
* @param lng
* @param lat
* @returns {*[]}
*/
let wgs84togcj02 = function (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 转换为 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
let gcj02towgs84 = function (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);
let mglat = lat + dlat;
let mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat]
}
}
百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
/**
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
* 即 百度 转 谷歌、高德
* @param bd_lon
* @param bd_lat
* @returns {*[]}
*/
let bd09togcj02 = function (bd_lon, bd_lat) {
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat]
}
火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
/**
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
* 即谷歌、高德 转 百度
* @param lng
* @param lat
* @returns {*[]}
*/
let gcj02tobd09 = function (lng, lat) {
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return [bd_lng, bd_lat]
}
完整案例：
<html lang="en">
<head>
<meta charset="utf-8">
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
<style>
/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
.map {
height: 400px;
width: 100%;
float: left;
}
</style>
<!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
<script src="http://openlayers.vip/examples/resources/ol.js"></script>
<script src="./tiandituLayers.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>Feature transfer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">
var map = new ol.Map({
// 地图容器
target: 'map',
// 地图图层，比如底图、矢量图等
layers: [
getIMG_CLayer(),
getIBO_CLayer(),
getCIA_CLayer(),
],
// 地图视野
view: new ol.View({
projection: "EPSG:4326",
// 定位
center: [116, 39],
// 缩放
zoom: 4,
maxZoom: 18,
minZoom: 1,
})
}); var xy = [116.391232637988,39.907157016256974];
// 初始点
var originPoint = new ol.Feature({
geometry: new ol.geom.Point(xy),
name: 'My Point'
}); // 矢量图层
var layer = initVectorLayer(); /**
* @todo 矢量图层
* @returns {VectorLayer}
* @constructor
*/
function initVectorLayer() {
//实例化一个矢量图层Vector作为绘制层
let source = new ol.source.Vector();
//创建一个图层
let customVectorLayer = new ol.layer.Vector({
source: source,
zIndex: 2,
//设置样式
style: new ol.style.Style({
//边框样式
stroke: new ol.style.Stroke({
color: 'red',
width: 5,
lineDash: [3, 5]
}),
//填充样式
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
image: new ol.style.Circle({
radius: 9,
fill: new ol.style.Fill({
color: 'red',
})
})
}),
});
//将绘制层添加到地图容器中
map.addLayer(customVectorLayer); customVectorLayer.getSource().addFeatures([originPoint]); var extent = customVectorLayer.getSource().getExtent(); map.getView().fit(extent, {
duration: 1,//动画的持续时间,
callback: null,
});
return customVectorLayer;
} // =====坐标转换工具 start ====================================================================================
//定义一些常量
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323; let transformlat = function (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
} let transformlng = function (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
} /**
* 判断是否在国内，不在国内则不做偏移
* @param lng
* @param lat
* @returns {boolean}
*/
let out_of_china = function (lng, lat) {
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
} /**
* WGS84转GCj02
* @param lng
* @param lat
* @returns {*[]}
*/
let wgs84togcj02 = function (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 转换为 WGS84
* @param lng
* @param lat
* @returns {*[]}
*/
let gcj02towgs84 = function (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);
let mglat = lat + dlat;
let mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat]
}
} /**
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
* 即 百度 转 谷歌、高德
* @param bd_lon
* @param bd_lat
* @returns {*[]}
*/
let bd09togcj02 = function (bd_lon, bd_lat) {
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
var x = bd_lon - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return [gg_lng, gg_lat]
} /**
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
* 即谷歌、高德 转 百度
* @param lng
* @param lat
* @returns {*[]}
*/
let gcj02tobd09 = function (lng, lat) {
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return [bd_lng, bd_lat]
} // =====坐标转换工具 end ==================================================================================== /**
* 添加点到地图
* @param geom
* @param color 颜色
* @returns {Feature|Feature|null}
*/
function addFeature(geom, color) {
let temp = new ol.Feature({
geometry: new ol.geom.Point(geom),
name: 'My Point'
});
let style = new ol.style.Style({
image: new ol.style.Circle({
radius: 9,
fill: new ol.style.Fill({
color: color || 'blue',
})
})
});
temp.setStyle(style);
layer.getSource().addFeatures([temp]);
move();
return temp;
} // 定位到图层
function move() {
var extent = layer.getSource().getExtent();
map.getView().fit(extent, {
duration: 1,//动画的持续时间,
callback: null,
});
} // 记录高德腾讯坐标对象
var cjFeature; function toCJ02() {
// 高德腾讯坐标设置为黑色
cjFeature = addFeature(wgs84togcj02(xy[0], xy[1]), 'black')
} // 高德腾讯坐标转WGS84
function CJ02TO() {
if(!cjFeature){
return;
}
let cjGeom = cjFeature.getGeometry().getCoordinates();
// 还原为WGS坐标，设置为粉色
addFeature(gcj02towgs84(cjGeom[0], cjGeom[1]), 'pink');
} // 记录百度坐标对象
var bdFeature; function toBD09() {
// 先将WGS84转为高德腾讯，在转为BD09
let tempGeom = wgs84togcj02(xy[0], xy[1]);
// 百度坐标设置为黄色
bdFeature = addFeature(gcj02tobd09(tempGeom[0], tempGeom[1]), 'yellow');
} // 百度坐标转WGS84
function BD09TO() {
if(!bdFeature){
return;
}
let bdGeom = bdFeature.getGeometry().getCoordinates();
// 现将BD09转为高德腾讯，在转为WGS84
let tempGeom = bd09togcj02(bdGeom[0], bdGeom[1]);
// 还原为WGS坐标，设置为粉色
addFeature(gcj02towgs84(tempGeom[0], tempGeom[1]), 'green');
} </script> <button id="toCJ02" onclick="toCJ02()">WGS84转腾讯/高德</button>
<button id="CJ02TO" onclick="CJ02TO()">高德/腾讯转WGS84</button>
<button id="toBD09" onclick="toBD09()">WGS84转百度</button>
<button id="BD09TO" onclick="BD09TO()">百度转WGS84</button>
</body>
</html>
在线示例
Openlayers 高德腾讯、百度、天地图坐标相互转换：Openlayers transfer_gcj
本文转载于:
https://blog.csdn.net/linzi19900517/article/details/123570916
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--Openlayers 高德腾讯、百度、天地图坐标相互转换的更多相关文章
- GPS定位为什么要转换处理？高德地图和百度地图坐标处理有什么不一样？
GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...
- Vue3.0中引入地图（谷歌+高德+腾讯+百度）
1 概述 项目需求需要引入地图,对于目前最新的Vue3.0,无论是百度/高德/腾讯地图目前还没有适配,只有Vue 2.x版本的: 目前只有谷歌地图的Vue3.0适配: 但是没有适配并不代表不能使用,本 ...
- 百度、高德、谷歌、火星、wgs84（2000）地图坐标相互转换的JS实现
一.调用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 百度地图坐标纠偏和转换工具和DLL
百度一直以来都是个即想装出一副拥抱互联网开放的样子,又为了短期商业利益封闭自己的公司,模仿谷歌地图,开放了自己的百度地图 API,为了防止别人盗用其数据和用户自由迁移,地图相比于火星坐标,又更加封闭, ...
- openlayers应用“四”：百度地图纠偏续
续前一篇,上一篇提到百度地图纠偏的基本思路,经过经过一天的努力,实现了百度地图坐标偏移参数的提取,步骤以及实现效果如下: 1.数据来源:四川省的省道矢量数据 2.提取坐标偏移参数的过程如下: A.将四 ...
- 火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版
火星坐标 火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图.导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的.火星坐标的真实名称应该是GCJ- ...
- 微信JS-SDK坐标位置转换为百度地图坐标
微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流 ...
- GPS坐标转换为百度地图坐标
/** * GPS坐标转换为百度地图坐标 * 需要引入javabase64.jar 和json的一些包 * */ public class Gps2BaiDu { public static void ...
- GPS坐标转百度地图坐标
百度地图提供了相关API:BMap.Convertor.translate, 但是使用上存在部分限制:1.次数限制:2.异步回调 可以用如下方法: /** * 地图位置计算工具(将GPS坐标转换成百度 ...
- wgs84 转百度经纬度坐标
/** * wgs84 转百度地图坐标 * @param $lng * @param $lat * @return array */ function toBaiduLocation($lng,$la ...
随机推荐
- 好书推荐之《深入理解JAVA虚拟机》
大佬推进 这本书作为JVM的入门书籍,是每一个JAVA工程师必备的. 简介 这是一部从工作原理和工程实践两个维度深入剖析JVM的著作,是计算机领域公认的经典,繁体版在台湾也颇受欢迎. 自2011年上市 ...
- 思维分析逻辑 4 DAY
目录 竞品分析 波特五力模型 竞品分析步骤 分析目的 对比分析 初步结论 活动营销分析 用户增长分析 用户增长基本模型 渠道思维(前期) 用户思维(中期) ROI思维(后期) 增长思维 北极星指标:一 ...
- Codeforces Round #884 (Div. 1 + Div. 2) A-E
比赛链接 A 代码 #include <bits/stdc++.h> using namespace std; using ll = long long; bool solve() { i ...
- NC17877 整数序列
题目链接 题目 题目描述 给出一个长度为n的整数序列 \(a_1,a_2,...,a_n\) ,进行 \(m\) 次操作,操作分为两类. 操作1:给出 \(l,r,v\) ,将 \(a_l,a_{l+ ...
- 收集 VSCode 常用快捷键
快速复制行 Shift + Alt + ↑/↓ 都是往下复制行,区别是:按↓复制时光标会跟着向下移动,按↑复制时光标不移动. 向上/向下移动一行 Alt + ↑/↓ 删除整行 Ctrl + Shift ...
- Spring事务使用注意事项
Spring提供的事务使用起来很方便,一个@Transactional注解就搞定全部,但是如果不注意,也会踩坑 提到事务就应该想到至少以下几点: 1.在事务方法中加锁,可能会导致锁失效 无论是Java ...
- 【LeetCode排序专题01】由旋转数组的最小数字引出的关于排序算法的讨论（冒泡排序、二分查找+暴力法）
旋转数组的最小数字 剑指 Offer 11. 旋转数组的最小数字 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 给你一个可能存在 重复 元素值的数组 numbers ,它原来是一 ...
- 任务系统之API子任务
日常运维工作中有许多的任务要执行,例如项目发布/数据备份/定时巡检/证书更新/漏洞修复等等,大部分的任务都会有多个步骤共同完成,例如一个发布任务会有拉代码.编译.分发.通知等等步骤,而不同的任务可能还 ...
- 用ABP Suite创建Blazor Server的应用程序
这个应用程序我们取名为BlazorOne,意思是集AuthServer.HttpApi Host和Blazor Server3个功能于一体的应用程序.因为ABP Suite支持另外一种模式,是把上述3 ...
- 【Azure 应用服务】在Azure Funciton中使用Powershell脚本函数，需要存储一些变量值如何解决？
问题描述 使用Azure Function创建Powershell脚本来执行函数,在使用中需要存储一些不重要的参数.一般情况,存储的问题都是交给DB,Storage等来解决.但是有没有一种简单的办法呢 ...