SuperMap iClient for OpenLayers如何为地图设置自定义投影参数

最新推荐文章于 2024-08-22 15:46:11 发布

supermapsupport

最新推荐文章于 2024-08-22 15:46:11 发布

阅读量963

点赞数 1

分类专栏： WebGIS 文章标签： SuperMap javascript 前端

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/124661433

版权

WebGIS 专栏收录该内容

136 篇文章 29 订阅

订阅专栏

作者：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>