Proj4.js使用初步入门

一、基础知识

在正式使用Proj4.js时，我们首先需要了解下有关各种投影的参数定义

（例如：椭球长半轴、扁率、原点纬线、中央经线、两条标准纬线、东偏移量、北偏移量和单位等），具体参数可参考下面这个网站上的介绍。

https://epsg.io/
http://spatialreference.org
（注：该网站是一个记录和使用空间参考系统的网站，可以很直接的找到各种投影的参数定义，推荐优先使用该网站）

二、Proj4js引用

前端添加Proj4js有三种方式：

1. 从http://trac.osgeo.org/proj4js/wiki/Download下载，获取产品包中dist/proj4.js文件。

2. 引入CDN上的Proj4js：https://cdnjs.com/libraries/proj4js

3. 本地有Node.js，可以直接使用npm install proj4进行安装。

这里用的Node.js的安装方法

npm install proj4 --save

三、基础使用

proj4.js中预定义了三个坐标系，其他的坐标系则需要自己定义了，下面以从WGS84(4326)到Web墨卡托（3857）的转换为例

function Wgs84ToMector2(lat,lng) {
    const proj4 = require('proj4');
   return proj4(proj4('EPSG:4326'), proj4('EPSG:3857'), [lng, lat])
}

JavaScript利器分享之Proj4js

四、小技巧

假设有这么一个需求，在保存geojson数据时，需要将不同图层的坐标系统一为同一个坐标系，方便后续对geojson数据统一管理

那么，我们就可以考虑如下操作ヾ(◍°∇°◍)ﾉﾞ

async function toWgs84(wkid, geojson) {
    if (wkid != 4326) {
        let proj;
        if (wkid == 102100 || wkid == 3857) {
            proj = 'EPSG:3857'
        } else {
            // 获取wkid对应坐标系的proj
            proj = await fetch(`https://epsg.io/${wkid}.proj4`).then(response => response.text())
            if (!proj) return;
        }
        const proj4 = require('proj4/dist/proj4');
        geoJSON.features.forEach((feature) => {
            let { type, coordinates } = feature.geometry;
            if (type == 'Polygon') {
                feature.geometry.coordinates = coordinates.map(e1 => e1.map(e2 => proj4(proj, 'EPSG:4326', e2)))
            } else if (type == 'LineString') {
                feature.geometry.coordinates = coordinates.map(e => proj4(proj, 'EPSG:4326', e))
            } else if (type == 'Point') {
                feature.geometry.coordinates = proj4(proj, 'EPSG:4326', coordinates);
            }
        })
    }
}