Proj4坐标转换

Vue使用Proj4进行坐标转换（WGS84转EPSG:3857）

Proj4js是一个JavaScript类库，其主要功能就是将点坐标从一个坐标系转换为另一个坐标系。

一、背景知识掌握

在正式使用Proj4js时，我们首先需要了解下有关各种投影的参数定义（例如：椭球长半轴、扁率、原点纬线、中央经线、两条标准纬线、东偏移量、北偏移量和单位等），具体参数可参考下面这个网站上的介绍。
http://spatialreference.org
（注：该网站是一个记录和使用空间参考系统的网站，可以很直接的找到各种投影的参数定义，推荐优先使用该网站）

二、添加Proj4js引用

前端添加Proj4js有三种方式：
从http://trac.osgeo.org/proj4js/wiki/Download下载，获取产品包中dist/proj4.js文件。
引入CDN上的Proj4js：https://cdnjs.com/libraries/proj4js。
本地有Node.js，可以直接使用npm install proj4或者yarn add proj4进行安装。

三、参数定义

这里我们介绍如何设置一个投影坐标系，以EPSG:3395为例进行讲解

确定坐标系参数

我们通过浏览器直接打开http://spatialreference.org/ref/epsg/3395/proj4/

设置坐标系

最终我们获取到的内容为： +proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs 设置好坐标系，下一步我们将进行坐标转换。

四、坐标转换

转换方法：proj4(fromProjection,toProjection,coordinates)

其中：

fromProjection：源坐标系

toProjection：目标坐标系

coordinates：需要转换的坐标值，可以是对象{x:x,y:y}，也可以是数组[x,y] 例如我们将一个点从EPSG:4326（100.33,32.280000018770551）转换到EPSG:3395：

var fromProjection = “+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs” ; 
var toProjection ="+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"; 
var transformPoint = proj4(fromProjection, toProjection,[100.33,32.280000018770551]); 
console.log(transformPoint); 

最终在控制台中，得到EPSG:3395结果为：（11168684.511289138,3777303.8282244676）

五：Vue实操

现在我们的需求是把WGS 84（经纬度）坐标转化成EPSG3857的坐标

首先 在VSCode上新建终端

yarn add proj4

然后在项目中入一下

import proj4 from "proj4"

在这个Spatial Reference List – Spatial Reference 网站上找到对应坐标系的编码，比如ESPG:3857

进入之后点击Proj4获取EPSG:3857的编码

然后复制一下

确定坐标转换的输入输出之后，带入函数，并把输出打印到控制台

//	fromProjection：源坐标系
var fromProjection ="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs"; 
//	toProjection：目标坐标系
var toProjection ="+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +a=6378137 +b=6378137 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"; 
//	目标坐标系的另一种写法
var obDest = new proj4.Proj('EPSG:3857');
//	后面的列表为需要转换的WGS84坐标 [经度, 纬度]
var transformPoint = proj4(fromProjection, toProjection,[114.1743563, 30.4944288]); 
var transformPoint2 = proj4(fromProjection, obDest,[114.1743563, 30.4944288]); 
//	输出[12709831.204965787, 3567263.6968836067]
console.log(transformPoint);
console.log(transformPoint2);

至于正确性不好确定可以推荐一个网站

EPSG.io: Coordinate Systems Worldwide

点击右上角的Transform

然后就可以开始测算经纬度转3857坐标系的坐标了

ps://epsg.io/)

点击右上角的Transform

然后就可以开始测算经纬度转3857坐标系的坐标了

[外链图片转存中…(img-nIqfJ2Kr-1658135397726)]

和原数据对比还是非常准的，而且Proj4输出的3857坐标精度也很高。