OpenLayers - 3857和4326

OpenLayers：v6.8.1

EPSG:3857坐标系（投影坐标）

在 openlayers 中默认的坐标就是google的摩卡托坐标，也就是我们经常看到的 EPSG:3857 坐标系。
EPSG:3857 的数据一般是这种的。[12914838.35,4814529.9]，看上去相对数值较大。不利于存储，比较占内存。

EPSG:4326（地理坐标）

4326 WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）
EPSG:4326 的数据一般是这种的。[22.37，114.05]。利于存储，可读性高
所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标，而是EPSG:4326坐标系下的坐标数据。因为易读和存储小。

使用4326加载高德地图被压缩

        new Map({
            layers: [AMap],
            target: "map",
            view: new View({
                center: [108.948024, 34.263161],
                projection: "EPSG:4326",
                zoom: 6,
            }),
        })

---

我们可以先看下，左图表示地球球面上大小相同的圆形，右上为墨卡托投影，投影后仍然是圆形，但是在高纬度时物体被严重放大了。右下为等距投影，物体的大小变化不是那么明显，但是图像被拉长了。

对于墨卡托投影来说，越到高纬度，大小扭曲越严重，到两极会被放到无限大，所以，墨卡托投影无法显示极地地区。下图来自维基百科，可以看到墨卡托投影下每个国家的大小和实际大小的差异。但是 conformality（正形性） 和 straight rhumb lines 这两个特点，让它非常适合于航海导航。

结合上面的图，我们总结下最大区别：
EPSG:3857（投影）：数据的可读性差和数值大存储比较占用内存。
EPSG:4326（地理）：使用此坐标系会导致页面变形。

---

改用EPSG:3857渲染地图

        new Map({
            layers: [AMap],
            target: "map",  
            view: new View({
                center: fromLonLat([108.948024, 34.263161]),
                projection: "EPSG:3857",
                zoom: 6
            }),
        });

 对比下上面的两种坐标系渲染出来的map，可以明显的看到 EPSG:4326 感觉map 地图被上下压缩过一样。而 EPSG:3857 坐标系就很正常。这是因为他们的投影不同造成的。

所以总结下：在实际开发中，因为map源数据大部分都是EPSG:4326的数据源格式的数据，但是使用EPSG:4326的坐标系地图会出现被压缩的感觉。所以我们都是采用 EPSG:3857的坐标系类型，把数据源转换为 EPSG:3857的数据源即可。但是这个EPSG:3857数据源不易读取和值占内存原因，所有结合两者的缺点，我们采用坐标转换，即 EPSG:4326转 EPSG:3857。 所有请理解这句话：通常：数据存储在EPSG:4326中，显示在EPSG:3857中。

openlayers6【十】EPSG:3857和EPSG:4326区别详解_@必意玲-CSDN博客_epsg3857

---

 OpenLayers坐标转换相关函数

import { fromLonLat, toLonLat, transform } from "ol/proj";

• fromLonLat(coordinate, opt_projection)：一般将4326转换为3857坐标
• toLonLat(coordinate, opt_projection)：一般将3857转换为4326坐标
• transform(coordinate, source, destination)：coordinate的坐标是source坐标，转换为destination的坐标。