作者：LX

背景

在WebGIS开发中，我们必然会遇到地图展示的问题，但是不同的项目中展示的地图的坐标系不是全部统一的，不同的地图可能存在不同的坐标系，有的时候因为对接地图的时候坐标系参数没有设置或者设置错误，导致出不了图或者出白图的情况，因此本文给大家介绍一下SuperMapiClient各地图库是如何加载不同坐标系地图的，以避免大家在实际项目开发中出现类似的情况。

iClient各地图库如何加载不同坐标系地图

首先，我们了解SuperMapiClient 9D及以后的版本集成了Leaflet、OpenLayers、MapboxGL、Classic这四种地图库，因此下面小编分别给大家介绍一下这几种地图库在加载地图的时候面对不同坐标系应该如何处理。
一、iClient for Classic
iClient forClassic会自动读取服务的坐标系，所以不需要额外设置projection。
如对接china2000坐标系的地图:

二、 iClient forLeaflet、iClient forOpenLayers
iClient for Leaflet和iClientfor OpenLayers对接不同类型的坐标系地图比较相似，因此放到一起来介绍。他们两者与iClientfor Classic不同，不会自动去读取服务的坐标系，如果不设置projection不会正确出图，需要我们自己设置坐标系信息才行。
1、默认支持的坐标系
iClientfor Leaflet和iClient forOpenLayers默认支持EPSG:4326，EPSG:3857、平面无投影坐标系，不需要自己定义，只需要在对接地图的时候在地图参数中设置对应的坐标系即可。
具体的如何设置坐标系参数，可以直接参考官网范例：
iClientforLeaflet：http://iclient.supermap.io/examples/leaflet/examples.html#iServer-map
iClientfor OpenLayers:http://iclient.supermap.io/examples/openlayers/examples.html#iServer-map
2、默认不支持的坐标系
对于默认不支持的坐标系在iClientfor Leaflet和iClient forOpenLayers中都需要先用proj4定义坐标系、然后将定义的坐标传给地图的坐标系参数，下面以leaflet对接china2000坐标系（EPSG:4490）地图为例：

1）引用Proj4js库

2）定义坐标系
参考https://epsg.io/网站上关于EPSG:4490的定义如下：

因此，EPSG:4490坐标系定义代码如下：

proj4.defs("EPSG:4490","+proj=longlat+ellps=GRS80 +no_defs");

3）设置坐标系参数，加载地图

varurl ="http://iclient.supermap.io/iserver/services/map-china400/rest/maps/China_4490";
varcrs =L.Proj.CRS("EPSG:4490",{
bounds: L.bounds([-180,-85.05112877996838],[180,85.05112877996834]),
origin:[-180,85.05112877996834],
});
varmap = L.map('map', {
crs: crs,
center:[7.910156223922968,0.7031249925492489],
maxZoom: 5,
zoom: 0
});
L.supermap.tiledMapLayer(url, {noWrap: true}).addTo(map);

直接将代码拷贝到http://iclient.supermap.io里面的范例运行，结果如下：

关于Proj4js定义坐标系的方式和用法更多详情请参考博客《JavaScript利器分享之Proj4js》

三、 iClient forMapboxGL
由于原生MapboxGL只支持3857的坐标系，这当然有很大的局限性，因此SuperMapiClient产品团队在原生MapboxGL基础上扩展了一个增强库mapbox-gl-enhance.js，目前增强库只支持对接EPSG:4326、EPSG:4490、EPSG:4214、EPSG:4610、EPSG:3857这几种坐标系的地图。
下面是iClientforMapboxGL对接不同坐标系的开发代码：
1）引入js，以上坐标系的地图除了加载3857坐标系的地图外其他的都需要引入增强库mapbox-gl-enhance.js
EPSG:3857地图：

EPSG:4326、EPSG:4490、EPSG:4214、EPSG:4610的地图：

2）加载地图（以EPSG:4490坐标系地图为例）

varurl='http://iclient.supermap.io/iserver/services/map-china400/rest/maps/China_4490';
varmap = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tileSize": 256,
"tiles": [url],
"rasterSource": "iserver"
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
crs: 'EPSG:4490',
center: [101.74721254733845, 32.5665352689922],
zoom: 3
});

结果展示：

iClientfor MapboxGL更多坐标系对接，请参考官网iClientfor MapboxGL范例-多坐标系