A002:vue+ openlayers EPSG:3857和EPSG:4326区别详解

前言

在使用 Vue.js 搭配 OpenLayers 进行地理信息系统（GIS）开发时，坐标参考系统（CRS）的选择非常重要。特别是当你处理地图数据时，了解不同的 CRS 如 EPSG:4326 和 EPSG:3857 是非常必要的。 vue页面引入fromLonLat和transform、toLonLat类。

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

在 openlayers 中创建map时候会有个view 属性，该属性下面会存在一个center属性。这个属性就是设置中心位置的坐标。如果不设置就没有中心，也毫无意义。projection 属性指定坐标系的类型。一般是4326和3857两种，下面我们就详细讲解下这两个的区别。让你彻底了解及使用。

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

---

一、什么是EPSG:3857坐标系（投影坐标）?

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

用途：通常用于 GPS 设备和地理标记（例如 Google Maps API 或 OpenStreetMap），因为它直接对应于地球表面的地理位置。

二、什么是EPSG:4326 坐标系（地理坐标）

定义：4326 WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块） EPSG:4326 的数据一般是这种的。[114.05, 22.37]。利于存储，可读性高

用途：主要用于在线地图服务中，因为这种投影方式可以将地球表面展平成一个矩形，便于在网络上传输和显示地图瓦片。

我们常常看到和用到的坐标系数据往往不是墨卡托坐标，而是EPSG:4326坐标系下的坐标数据。因为易读和存储小。比如下面的第三方的阿里datav 边界数据源。就是采用的EPSG:4326地理坐标返回。如下：

三、EPSG:4326和EPSG:3857区别

我们可以先看下，左图表示地球球面上大小相同的圆形，右上为墨卡托投影，投影后仍然是圆形，但是在高纬度时物体被严重放大了。右下为等距投影，物体的大小变化不是那么明显，但是图像被拉长了。Platte Carre 投影因为在投影上有扭曲，并不适合于航海等活动，但是因为坐标与像素之间的对应关系十分简单，非常适合于栅格图的展示，Platte Carre 投影是很多GIS 软件的默认投影。 需要注意的是，对于墨卡托投影来说，越到高纬度，大小扭曲越严重，到两极会被放到无限大，所以，墨卡托投影无法显示极地地区。下图来自维基百科，可以看到墨卡托投影下每个国家的大小和实际大小的差异。但是 conformality（正形性） 和 straight rhumb lines 这两个特点，让它非常适合于航海导航。

所有结合上面的图，我们总结下最大区别：

提示：EPSG:3857（投影）：数据的可读性差和数值大存储比较占用内存。 EPSG:4326（地理）：使用此坐标系会导致页面变形。

1.首先看下用EPSG:4326坐标类型去渲染的数据

因为使用的 projection 是 "EPSG:4326" 类型，可以看到 center 中的数据格式 也是 "EPSG:4326" 的数值格式。所以没有用 fromLonLat() 方法 进行转换得到的图像信息。

let view = new View({
    projection: "EPSG:4326", //使用这个坐标系
    center: [104.912777, 34.730746], //地图中心坐标
    zoom: 4.5 //缩放级别
});

我们发现确实是，好像被压缩了。就验证了我们上面所说的。

2.我们继续看下用EPSG:3857坐标类型去渲染的数据

let view = new View({ // projection: "EPSG:3857", //使用这个坐标系，默认为 3857,可以不写 center: fromLonLat([104.912777, 34.730746]), // 数据格式4326转为3857 zoom: 4.5 //缩放级别 });

let view = new View({
    // projection: "EPSG:3857", //使用这个坐标系，默认为 3857,可以不写
    center: fromLonLat([104.912777, 34.730746]), // 数据格式4326转为3857
    zoom: 4.5 //缩放级别
});

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

3.坐标转换

从 EPSG:4326 转换到 EPSG:3857：

const lonlat = [10, 20];
const webmercator = ol.proj.transform(lonlat, 'EPSG:4326', 'EPSG:3857');

从 EPSG:3857 转换到 EPSG:4326：

const webmercator = [1234567, 2345678];
const lonlat = ol.proj.transform(webmercator, 'EPSG:3857', 'EPSG:4326');

4总结一下

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

let view = new View({
    projection: "EPSG:4326", //使用这个坐标系
    center: transform([104.912777, 34.730746], 'EPSG:4326', 'EPSG:3857'), //地图中心坐标
    zoom: 4.5 //缩放级别
});