openLayers实战(八)：坐标系及其转换

 

坐标系介绍

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);