前端2D地图和3D场景中的坐标系

大家好,我是 CC,在这里欢迎大家的到来~

背景

从事前端开发的前两年,做了不少和地图、3D场景相关的项目,其中涉及到很多坐标系,使用时傻傻分不清。现在有时间整理总结下常用常见坐标系。

2D地图坐标系

WGS84 - 世界大地测量系统(1984年)

数值:大地经度(longitude)大地纬度(latitude)大地高度(altitude)

地心坐标系,空间直角坐标系,是国际上 GPS使用的坐标系。

  1. 坐标原点为地球质心
  2. Z轴指向BIH(国际时间服务机构)1984.0定义的协议地球极(CTP)方向
  3. X轴指向BIH1984.0的零子午面和CTP赤道的交点
  4. Y轴与Z轴、X轴垂直构成右手坐标系

CGCS2000 - 2000国家大地坐标系

中国最新国家大地坐标系,与 WGS84 相似。

采用 ITRF97 框架、2000.0历元的三位地心坐标系统。

  1. 原点位于海洋和大气的整个地球的质量中心
  2. Z轴指向由原点指向历元2000.0的地球参考极的方向
  3. X轴指向由原点指向格林尼治参考子午线与地球赤道面(历元2000.0)的交点
  4. Y轴与Z轴、X轴构成右手正交坐标系,采用广义相对论意义下的尺度

GCJ-02 - 火星坐标系

中国国家测绘局绘制的地理坐标系统,加密后的坐标(在原始坐标(WGS84坐标)基础上进行偏移后得到新的坐标)。

在中国境内定位和地图绘制使用该坐标系,像高德地图、腾讯地图。

加密坐标的偏移是非线性随机的,因此从火星坐标推出真实坐标是无法实现的。

BD-09 - 百度坐标系

百度基于火星坐标系使用二次加密后得到,用于百度地图。

Web Mercator - 墨卡托坐标系

墨卡托投影坐标系

由于屏幕是平面的,我们必须将球面的地理坐标"投影"到平面上。这个过程会产生变形(形状、面积、距离或方向)。

  1. 核心思想:通过数学公式将 (经度, 纬度) 转换为平面上的 (x, y) 像素坐标。
  2. 单位:像素、米。
  3. 常见投影:Web Mercator(EPSG:3857),这是互联网地图的事实标准。

特点:

  1. (0, 0) 点位于地图的左上角。
  2. X轴向右(东)为正,Y轴向下(南)为正。
  3. 世界的范围被投影到一个正方形上,经度范围 [-180, 180] 被映射到 X轴 [0, 256](在缩放级别0时),纬度范围 [-85.06, 85.06] 被映射到 Y轴 [0, 256](注意:无法显示南北两极)。
  4. 随着缩放级别 z 的增加,整个世界地图的像素尺寸是 256 * 2^z。

3D场景坐标系

笛卡尔坐标系

三条互相垂直的坐标轴(x、y、z)组成,用(x,y,z)表示空间中的一个点。

右手定则

将右手的大拇指、食指和中指分别指向y、z、x 轴正方向,它们互相垂直。

场景:WebGL、Three.js

左手定则

将左手的大拇指、食指和中指分别指向y、z、x轴正方向,它们互相垂直。

场景:Babylon.js

总结

  1. 2D地图坐标:将地球椭圆球面映射到2D平面地图上,区分地理坐标和投影坐标。
  2. 3D场景坐标:是三维笛卡尔坐标系,Three.js默认Y轴向上,Z轴向外。

参考文章

CGCS2000、WGS84和ITRF框架坐标之间的差异和转换方法

ThreeJS 坐标系(旋转跳跃,永不停歇)

相关推荐
元让_vincent几秒前
论文Review 3DGS综述 | 浙江大学 | A Survey on 3D Gaussian Splatting |(二)发展、应用与结论
3d·综述·3dgs
m0_4711996311 分钟前
【vue】diff算法简介
前端·vue.js·算法
鹏多多12 分钟前
flutter使用package_info_plus库获取应用信息的教程
android·前端·flutter
冬男zdn16 分钟前
Vue 3 从基础到高阶全攻略
前端·javascript·vue.js
亿元程序员20 分钟前
Cocos游戏开发中的箭头游戏效果
前端
DeltaTime23 分钟前
二 线性变换, 齐次坐标, 变换组合, 变换分解, 3D变换
c++·3d·图形渲染
冬男zdn24 分钟前
前端可视化图表库精选与实战指南
前端·javascript
还是大剑师兰特24 分钟前
前端设计模式:详解、应用场景与核心对比
前端·设计模式·大剑师
局外人LZ25 分钟前
前端二维码技术全景:从原生JS到Vue/React/Uniapp/小程序的二维码生成
前端·javascript