作者：Carlo
背景：SuperMap iClient for OpenLayers 通过设置 map 中 view 属性的 projection 参数来支持多投影。例如：
var map = new ol.Map({
view: new ol.View({
projection: 'EPSG:4326'
});
});
projection 参数除了支持 EPSG code 字符串之外，还支持自定义投影参数。那么该如何正确使用自定义投影参数呢？接下来我将为大家做详细介绍。
首先我们需要了解ol.proj.Projection 类设置自定义投影参数,详细介绍可以查看源生api文档：https://openlayers.org/en/v6.4.3/apidoc/module-ol_proj_Projection-Projection.html
-
步骤一：有关各种投影的参数定义，可参考https://epsg.io/或者http://spatialreference.org；如果已有定义，可搜索并查看其投影参数，例如 EPSG:32625，其投影参数为 https://spatialreference.org/ref/epsg/32625/proj4/
-
步骤二：拿到resolutions值，通过iserver以classic预览，在F12控制台打印layer.resolutions
-
步骤三：引入proj4的包，从proj4的下载地址下载对应版本（https://trac.osgeo.org/proj4js/wiki/Download），然后从下载的包中的dist/文件夹中手动获取proj4.js文件，或者直接使用iclient包里自带的文件。
<script type="text/javascript" include='proj4' src="../../dist/openlayers/include-openlayers.js"></script>
- 完整代码如下：
<!--********************************************************************
* Copyright 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_tiledMapLayer3857"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
<script type="text/javascript" include='proj4' src="../../dist/openlayers/include-openlayers.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
var url ="http://localhost:8090/iserver/services/map-deijia/rest/maps/mian32625";
//自定义投影参数
var swissProjection = new ol.proj.Projection({
code: 'EPSG:32625',
// extent用于确定缩放级别
//投影的extent可以参考https://epsg.io/
extent: [-341.39 , -613.84,944.12 , 1010.27],
units: 'm'
});
//在iserver中以classic的方式预览拿到layer.resolutions
var resolutions=[6.3442065385445705, 3.1721032692722853, 1.5860516346361426, 0.7930258173180713, 0.39651290865903566, 0.19825645432951783, 0.09912822716475891, 0.04956411358237946, 0.02478205679118973, 0.012391028395594864, 0.006195514197797432, 0.003097757098898716, 0.001548878549449358, 0.000774439274724679, 0.0003872196373623395, 0.00019360981868116975];
ol.proj.addProjection(swissProjection);
var map = new ol.Map({
target: 'map',
view: new ol.View({
center:[255.72 , 540.35],
projection: swissProjection,
resolutions:resolutions,
zoom:0
})
});
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
url: url,
wrapX: true,
//设置瓦片网格对象
tileGrid: new ol.tilegrid.TileGrid({
extent: [-341.39 , -613.84,944.12 , 1010.27],
resolutions: resolutions
}),
}),
projection:swissProjection
});
console.log('ss')
map.addLayer(layer);
</script>
</body>
</html>
