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将地图展示出来