Proj4.js使用初步入门
原创
©著作权归作者所有:来自51CTO博客作者echohye的原创作品,请联系作者获取转载授权,否则将追究法律责任
一、基础知识
在正式使用Proj4.js时,我们首先需要了解下有关各种投影的参数定义
(例如:椭球长半轴、扁率、原点纬线、中央经线、两条标准纬线、东偏移量、北偏移量和单位等),具体参数可参考下面这个网站上的介绍。
https://epsg.io/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
进行安装。
这里用的Node.js的安装方法
三、基础使用
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);
}
})
}
}
箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。