openLayers 坐标转换 EPSG:3857和EPSG:4326区别

本文深入探讨了OpenLayers中EPSG:3857与EPSG:4326坐标系的区别,解释了如何使用fromLonLat()方法进行坐标转换,以确保地图数据正确显示。

fromLonLat() 方法是继承自ol.proj 这个类。fromLonLat 将坐标从经度/纬度转换为其他投影。

import { fromLonLat } from "ol/proj";
在 openlayers 中创建map时候会有个view 属性,该属性下面会存在一个center属性。这个属性就是设置中心位置的坐标。如果不设置就没有中心,也毫无意义。projection 属性指定坐标系的类型。

new View({
    projection:'EPSG:3857',//坐标系类型
    center: fromLonLat([104.912777, 34.730746]), //地图中心坐标
});

更多访问:https://openlayers.org/en/latest/apidoc/module-ol_proj.html

2. 什么是EPSG:3857坐标系
在openlayers 中默认的坐标就是google的摩卡托坐标,也就是我们经常看到的 EPSG:3857 坐标系。
EPSG:3857 的数据一般是这种的。[12914838.35,4814529.9],看上去相对数值较大。

3. 什么是EPSG:4326 坐标系
4326 WGS-84:是国际标准,GPS坐标(Google Earth使用、或者GPS模块)
EPSG:4326 的数据一般是这种的。[114.05,22.37]

所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标,而是EPSG:4326坐标系下的坐标数据。因为是常见的坐标。(这里说的是用到的数据是4326,不是说坐标系类型就要用的4326坐标系)这里有点绕,往后看慢慢就明白了。

3.1 百度使用的是EPSG:4326坐标系数据

### 使用 `ol.proj.transform()` 转换 EPSG:4326 经纬度为 EPSG:3857 坐标OpenLayers 中,可以使用 `ol.proj.transform()` 函数将 EPSG:4326 格式的经纬度转换为 EPSG:3857(Web Mercator)格式的坐标。该函数支持两个坐标系统之间的转换,并广泛用于地图交互数据处理场景中。 例如,给定一组 WGS84(EPSG:4326)格式的经纬度: ```javascript const lonLat = [116.4074, 39.9042]; // 北京的经纬度 ``` 可以通过如下方式将其转换为 EPSG:3857 投影下的 `x, y` 坐标: ```javascript const xy = ol.proj.transform(lonLat, 'EPSG:4326', 'EPSG:3857'); console.log(`x: ${xy[0]}, y: ${xy[1]}`); ``` 该方法适用于单个点坐标的转换,也常用于地图事件中获取屏幕点击位置并进行投影变换[^1]。 ### 使用 `ol.geom.Point` 进行几何对象的投影变换 对于几何对象,如 `ol.geom.Point`,可以直接调用 `transform()` 方法进行投影转换。例如: ```javascript const pointIn4326 = new ol.geom.Point([116.4074, 39.9042]); pointIn4326.transform('EPSG:4326', 'EPSG:3857'); console.log(pointIn4326.getCoordinates()); // 输出 EPSG:3857 格式的 x, y 坐标 ``` 此方法保证了地理要素在不同投影下保持其空间关系,适用于绘制图形或操作矢量数据时的需求。 ### 注意事项 - **投影依赖**:OpenLayers 默认使用 EPSG:3857 作为地图视图的投影,若需使用其他投影(如 EPSG:4326),应确保引入了 proj4js 库以支持扩展投影。 - **坐标顺序**:EPSG:4326 的标准顺序是 `[经度, 纬度]`,而某些库可能采用 `[纬度, 经度]`,务必注意输入顺序的一致性[^2]。 --- ### 示例代码:完整转换流程 ```javascript // 定义 EPSG:4326 经纬度坐标 const lonLat = [116.4074, 39.9042]; // 转换为 EPSG:3857 坐标 const xy = ol.proj.transform(lonLat, 'EPSG:4326', 'EPSG:3857'); console.log(`转换后的 EPSG:3857 坐标: x=${xy[0]}, y=${xy[1]}`); ``` --- ### 支持的数据结构与扩展应用 除了单个点之外,也可以对坐标数组、线或多边形等复杂几何对象进行批量转换。例如: ```javascript const coordinatesIn4326 = [ [116.4074, 39.9042], [121.4737, 31.2304] ]; const coordinatesIn3857 = coordinatesIn4326.map(coord => { return ol.proj.transform(coord, 'EPSG:4326', 'EPSG:3857'); }); console.log(coordinatesIn3857); ``` 上述方式可用于处理 GeoJSON 数据或其他多点数据集的投影转换需求[^3]。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值