坐标系介绍
EPSG: 3857 --web地图,基于球体的、web墨卡托投影(伪墨卡托投影Pseudo-Mercator)的投影坐标系,范围为纬度85度以下,由于google地图最先使用而成为事实标准。至今,大多互联网地图都使用EPSG3857,主要是因为该投影是等角投影,适合地图定向及导航,但是纬度越高,面积变形越大。
EPSG: 4326 --全球通用,基于WGS84椭球的经纬度坐标系,大地坐标系,在 EPSG: 4326 坐标系中,经度表示位置的横向偏移量,范围为 -180 到 180,单位是度;纬度表示位置的纵向偏移量,范围为 -90 到 90,单位也是度。
// 初始化地图配置
this.map = new Map({
target: this.mapDom, // 地图容器
view: new View({
center: [121.70185, 31.298777], // 地图中心点
zoom: 15,
minZoom: 14,
maxZoom: 18,
projection: "EPSG:4326", // 椭球
extent: this.extent, // 限定范围
}),
地图上的点是何坐标系
以 EPSG:4326 椭球坐标系为例
1.监听地图的事件得到的点位信息
如:
this.map.on("click", function()) // 点击
this.map.on("pointermove", function()) // 鼠标指针移动
得到的都是EPSG: 4326坐标系下的信息。
2.交互式绘制 interaction 的 draw
绘制出的圆形并不会考虑当前地图的椭球坐标系。这是因为
draw
方法默认使用的是平面坐标系,而不是地球的椭球坐标系。
3.圆形、多边形的坐标系转换
import * as turf from '@turf/turf';
// 假设你已经通过 'draw' 方法绘制了一个圆形对象 'circleFeature'
// 获取绘制的圆形对象的几何信息
var geometry = circleFeature.getGeometry();
// 将几何信息转换为椭球坐标系
var coords = geometry.getCoordinates();
var circleOnEllipse = turf.toWgs84(coords);
// 创建一个新的圆形对象,使用椭球坐标系
var circleFeatureOnEllipse = new Feature({
geometry: new GeoJSON().readGeometry(circleOnEllipse)
});
// 将新的圆形对象添加到矢量源中
vectorSource.addFeature(circleFeatureOnEllipse);
4.单点的坐标系转换
import * as turf from '@turf/turf';
const x1 = 123; // 假设的x坐标
const y1 = 45; // 假设的y坐标
const sourceCRS = 'EPSG:3857'; // 源坐标系(墨卡托投影坐标系)
const targetCRS = 'EPSG:4326'; // 目标坐标系(经纬度坐标系,WGS84)
// 创建一个点要素
const point = turf.point([x1, y1]);
// 进行坐标转换
const transformedPoint = turf.transformRotateScaleTranslate(
point,
0, // 旋转角度
1, // 缩放比例
[0, 0], // 平移向量
sourceCRS,
targetCRS
);
// 提取转换后的坐标
const [longitude, latitude] = turf.getCoord(transformedPoint);
console.log('经度:', longitude);
console.log('纬度:', latitude);