JavaScript利器分享之Proj4js

项目开发中,经常会有小伙伴们被火星坐标、CGCS2000、WGS84等诸多坐标系搞得晕头转向。当我们碰上不同坐标系叠加这样的需求时,我们的眼神可能是这似的
在这里插入图片描述
今天给大家分享一个JS利器——Proj4js。官方介绍:Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another. 大致翻译过来就是Proj4js是一个JavaScript类库,其主要功能就是将点坐标从一个坐标系转换为另一个坐标系。
下面通过六个方面

背景知识掌握
添加Proj4js引用
参数定义
坐标转换
SuperMap iClient中使用
进阶应用

一、背景知识掌握
在正式使用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进行安装。
三、参数定义
这里我们介绍如何设置一个投影坐标系,以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)
五、SuperMap iClient中使用
SuperMap iClient 9D产品包中集成了Proj4js库,所以我们不需再去官网上下载。(注:如果是使用SuperMap iClient 8C及以前的产品,那么还是需要单独去下载Proj4js)
我们以一个简单的例子,详细向大家展示在SuperMap iClient for Openlayers中使用Proj4js进行坐标转换。
1、加载iClient for Openlayers的核心库,并在include 中填写proj4
在这里插入图片描述
2、定义EPSG:3395坐标系,用我们之前在http://spatialreference.org/ref/epsg/3395/proj4/中获取的值
proj4.defs(“EPSG:3395”,"+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs");
3、开始坐标转换
//将经纬度4326的坐标系转换成3395
var pointCoord=ol.proj.transform([100.33,32.280000018770551],‘EPSG:4326’,‘EPSG:3395’);
console.log(pointCoord);// 控制台输出[11168684.511289138, 3777303.8282244676]
六、进阶应用
看了上面的例子,难道Porj4js在iClient中只能做坐标转换功能呢?当然不是的,最后,在向大家介绍个Proj4js的另一种用法,在iClient for Openlayers如何读取非4326或3857的地图数据。
例如我们获取到的地图数据如下,我们看到目标坐标系是EPSG:3395。
在这里插入图片描述
如何使用iClient for Openlayers直接浏览呢。
1、计算分辨率(固定写法)
在这里插入图片描述
2、定义3395坐标系,并设置地图范围
在这里插入图片描述
3、用Tile将地图展示出来
在这里插入图片描述
在这里插入图片描述