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