SuperMap iClient加载地图之坐标系问题详解

作者：LX

背景

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

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

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

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

1）引用Proj4js库

<script type="text/javascript" include='proj4' src="../../dist/leaflet/include-leaflet.js"></script>

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

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

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

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

var url = "http://iclient.supermap.io/iserver/services/map-china400/rest/maps/China_4490";
var crs =L.Proj.CRS("EPSG:4490",{
	           bounds: L.bounds([-180,-85.05112877996838], [180,85.05112877996834]),
	            origin:[-180,85.05112877996834],
	        });
var map = 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 for MapboxGL
由于原生MapboxGL只支持3857的坐标系，这当然有很大的局限性，因此SuperMap iClient 产品团队在原生MapboxGL基础上扩展了一个增强库mapbox-gl-enhance.js，目前增强库只支持对接EPSG:4326、EPSG:4490、EPSG:4214、EPSG:4610、EPSG:3857这几种坐标系的地图。
下面是iClient for MapboxGL对接不同坐标系的开发代码：
1）引入js，以上坐标系的地图除了加载3857坐标系的地图外其他的都需要引入增强库mapbox-gl-enhance.js
EPSG:3857地图：

<script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>

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

<script type="text/javascript" include="mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>

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

var url ='http://iclient.supermap.io/iserver/services/map-china400/rest/maps/China_4490';
var map = 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
        });

结果展示：

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