开发地图的时最烦的就是不同的地图工具以及数据来源坐标系不同造成偏移甚至报错。以下整理了部分的地图坐标转换,一个文件直接搞定所有情况。
一.地图坐标系分类
常见的地图技术:openlayers、cesium、高德、百度等。不同的地图框架地图地图的坐标系缺也略有不同。
-
WGS84(GPS) :一般从国际标准的GPS设备获取的坐标都是WGS84,以及国际地图提供商使用的坐标系,如ArcGIS、必应的底图是WGS84坐标系。
-
GCJ02:国测局02年发布的坐标系,又称“火星坐标”。在中国,WGS84不能直接使用,需要国家测绘局的加密。比如谷歌中国、高德、腾讯都在用这个坐标系。
-
BD09 百度标准,加密算法不同。
下面是针对高德地图坐标转换的方法封装
export default class CoorsOffset {
constructor () {
this.x_pi = (3.14159265358979324 * 3000.0) / 180.0;
this.pi = 3.14159265358979324;
this.a = 6378245.0;
this.ee = 0.00669342162296594323;
}
/**
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
* 即 百度 转 谷歌、高德
* @param {*} DBLon
* @param {*} DBLat
* @returns {*[longitude, latitude]}
*/
bd09togcj02 = (DBLon, DBLat) => {
const x = DBLon - 0.0065;
const y = DBLat - 0.006;
const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
const lon = z * Math.cos(theta);
const lat = z * Math.sin(theta);
return [lon, lat];
}
/**
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
* 即谷歌、高德 转 百度
* @param lng
* @param lat
* @returns {*[longitude, latitude]}
*/
gcj02tobd09 = (lng, lat) => {
const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * this.x_pi);
const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * this.x_pi);
const BDLng = z * Math.cos(theta) + 0.0065;
const DBLat = z * Math.sin(theta) + 0.006;
return [BDLng, DBLat];
}
/**
* WGS84转GCj02
* @param lng
* @param lat
* @returns {*[longitude, latitude]}
*/
wgs84togcj02 = (lng, lat) => {
const radlat = (lat / 180.0) * this.pi;
const magic = 1 - this.ee * Math.sin(radlat) * Math.sin(radlat);
const sqrtmagic = Math.sqrt(magic);
let dlat = this.transformlat(lng - 105.0, lat - 35.0);
let dlng = this.transformlng(lng - 105.0, lat - 35.0);
dlat = (dlat * 180.0) / (((this.a * (1 - this.ee)) / (magic * sqrtmagic)) * this.pi);
dlng = (dlng * 180.0) / ((this.a / sqrtmagic) * Math.cos(radlat) * this.pi);
let mglat = lat + dlat;
let mglng = lng + dlng;
return [mglng, mglat];
}
/**
* GCJ02 转换为 WGS84
* @param lng
* @param lat
* @returns {*[longitude, latitude]}
*/
gcj02towgs84 = (lng, lat) => {
var dlat = this.transformlat(lng - 105.0, lat - 35.0);
var dlng = this.transformlng(lng - 105.0, lat - 35.0);
const radlat = (lat / 180.0) * this.pi;
const magic = 1 - this.ee * Math.sin(radlat) * Math.sin(radlat);
const sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / (((this.a * (1 - this.ee)) / (magic * sqrtmagic)) * this.pi);
dlng = (dlng * 180.0) / ((this.a / sqrtmagic) * Math.cos(radlat) * this.pi);
const mglat = lat + dlat;
const mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat];
}
transformlat = (lng, lat) => {
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 * this.pi) + 20.0 *Math.sin(2.0 * lng * this.pi)) * (2.0 / 3.0);
ret += (20.0 * Math.sin(lat * this.pi) + 40.0 * Math.sin((lat / 3.0) * this.pi)) * (2.0 / 3.0);
ret += (160.0 * Math.sin((lat / 12.0) * this.pi) + 320 * Math.sin((lat * this.pi) / 30.0)) * (2.0 / 3.0);
return ret;
}
transformlng = (lng, lat) => {
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 * this.pi) + 20.0 * Math.sin(2.0 * lng * this.pi)) * (2.0 / 3.0);
ret += (20.0 * Math.sin(lng * this.pi) + 40.0 * Math.sin((lng / 3.0) * this.pi)) * (2.0 / 3.0);
ret += (150.0 * Math.sin((lng / 12.0) * this.pi) + 300.0 * Math.sin((lng / 30.0) * this.pi)) * (2.0 / 3.0);
return ret;
}
}
二.cesium三维地图中常用的坐标分类
- WGS84坐标:经纬度坐标,坐标原点为,经度范围[-180,180],纬度范围[-90,90]。
- WGS84弧度坐标(Cartographic):Cesium中的地理坐标单位默认是弧度制
- 笛卡尔空间直角坐标(Cartesian3):世界坐标,原点就是椭球的中心,坐标(x,y,z)
- -屏幕坐标(Cartesian2):平面直角坐标系,是一个二维笛卡尔坐标系,坐标为(x,y)
下面是针对cesium地图坐标转换的方法封装
/**
* 坐标转换 84转笛卡尔
* @param {Position} position 位置
* @param {number} alt 高度
* @returns {any} 笛卡尔坐标
*/
transformWGS84ToCartesian = (position, alt = 0) => (position ?
Cesium.Cartesian3.fromDegrees(
position.lon,
position.lat,
alt || position.alt,
Cesium.Ellipsoid.WGS84
) :
Cesium.Cartesian3.ZERO)
/**
* 坐标转换 笛卡尔转84
* @param {Object} cartesian 三维位置坐标
* @return {Object} {lon,lat,alt} 地理坐标
*/
transformCartesianToWGS84 = (cartesian) => {
const ellipsoid = Cesium.Ellipsoid.WGS84;
const cartographic = ellipsoid.cartesianToCartographic(cartesian);
return {
lon: Cesium.Math.toDegrees(cartographic.longitude),
lat: Cesium.Math.toDegrees(cartographic.latitude),
alt: cartographic.height,
};
}
/**
* 84坐标转弧度坐标
* @param {Object} position wgs84
* @return {Object} Cartographic 弧度坐标
*/
transformWGS84ToCartographic = (position) => (position ?
Cesium.Cartographic.fromDegrees(
position.lon || position.lon,
position.lat,
position.alt
) :
Cesium.Cartographic.ZERO)
/**
* 经纬度转Cartesian2。
* 注意这里的 Cartesian2 是屏幕坐标,不能直接使用 Cartesian2.fromCartesian3
* @param {number} lon 经度
* @param {number} lat 纬度
* @returns {void}
*/
lonLatToCartesian2 = (lon: number, lat: number): any => {
const Cartesian3Result = Cesium.Cartesian3.fromDegrees(lon, lat);
const Cartesian2Result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.scene, Cartesian3Result);
return Cartesian2Result;
}