SuperMap iClient for OpenLayers如何实现对影像服务设置图层掩膜-平芜编程栈

作者：Carlo

文章目录

业务背景
实现步骤
关键代码解析
- 1. 初始化地图和图层
- 2. 查询掩膜边界数据
- 3. 掩膜操作核心方法
- 完整代码实现

业务背景

在地理信息系统（GIS）应用中，影像服务通常提供高分辨率的遥感影像或地图底图。但在实际业务场景中，我们经常需要限制影像的显示范围，只展示特定区域内的影像数据。这种需求常见于：

行政区划展示：只显示某个省/市范围内的影像；
重点区域突出：在全局影像上突出显示特定区域；
数据保密：只公开部分区域的影像数据；
性能优化：减少不必要区域的影像加载

图层掩膜技术就是解决这类问题的有效方案，它通过矢量边界来控制影像的显示范围。

实现步骤

准备掩膜数据：获取用于定义显示范围的矢量边界（如行政区划面）。
创建影像图层：加载SuperMap影像服务。
应用掩膜：将矢量边界设置为影像图层的掩膜。
动态控制：提供掩膜的添加和移除功能。

关键代码解析

1. 初始化地图和图层

// 创建OpenLayers地图实例varmap=newol.Map({target:'map',view:newol.View({projection:'EPSG:4326',center:[110,19.2],minZoom:1,zoom:8.5})});// 添加地图服务（作为底图）varlayer=newol.layer.Tile({source:newol.source.TileSuperMapRest({url:'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',wrapX:true})});map.addLayer(layer);// 添加影像服务图层（叠加显示）varvectorLayer=newol.layer.Tile({zIndex:90,source:newol.source.ImageTileSuperMapRest({url:'您的影像服务地址',projection:'EPSG:4326',collectionId:'sample'})});map.addLayer(vectorLayer);

2. 查询掩膜边界数据

// 构建查询参数，从中国省份数据中查找特定区域，此处查找海南省varparam=newol.supermap.QueryBySQLParameters({queryParams:{name:'Province_R@China',// 数据源名称attributeFilter:'SMID = 3'// 查询条件（这里示例查询ID为3的省份）}});// 执行查询获取掩膜边界newol.supermap.QueryService('https://iserver.supermap.io/iserver/services/map-ChinaProvinces/rest/maps/ChinaProvinces').queryBySQL(param,function(serviceResult){// 将查询结果转换为OpenLayers可用的要素格式sichuanFeature=newol.format.GeoJSON().readFeatures(serviceResult.result.recordsets[0].features)[0];// 应用掩膜ol.supermap.Util.setMask(vectorLayer,sichuanFeature);});

3. 掩膜操作核心方法

// 添加掩膜函数functionaddMask(){ol.supermap.Util.setMask(vectorLayer,sichuanFeature);}// 移除掩膜函数functionremoveMask(){ol.supermap.Util.unsetMask(vectorLayer);}

完整代码实现

<!--*********************************************************************Copyright©2000-2025SuperMap Software Co.Ltd.All rights reserved.*********************************************************************--><!--*********************************************************************该示例需要引入*ol-mapbox-style(https://github.com/openlayers/ol-mapbox-style)*********************************************************************--><!DOCTYPEhtml><html><head><meta charset="UTF-8"/><title data-i18n="resources.title_mask"></title><style type="text/css">.editPane{position:absolute;top:50px;right:50px;text-align:center;background:#fff;z-index:1000;}</style></head><body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0"><divclass="panel panel-primary editPane"id="editPane"style="z-index: 99999"><divclass="panel-heading"><h5class="panel-title text-center"data-i18n="resources.btn_operate"></h5></div><divclass="panel-body"id="params"><p></p><div align="right"class="button-group"><input type="button"id="btn1"class="btn btn-primary"data-i18n="[value]resources.text_input_value_addMask"onclick="addMask()"/><input type="button"id="btn2"class="btn btn-primary"data-i18n="[value]resources.text_input_value_removeMask"onclick="removeMask()"/></div></div></div><div id="map"style="width: 100%; height: 100%"></div><script type="text/javascript"include="bootstrap,widgets"src="../js/include-web.js"></script><script type="text/javascript"include="ol-mapbox-style"src="../../dist/ol/include-ol.js"></script><script type="text/javascript">varsichuanFeature;varprojection='EPSG:4326';varmap=newol.Map({target:'map',view:newol.View({projection:projection,center:[110,19.2],minZoom:1,zoom:8.5})});//添加地图服务，作为底图varlayer=newol.layer.Tile({source:newol.source.TileSuperMapRest({url:'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',wrapX:true})});map.addLayer(layer);//添加影像服务，叠加显示varvectorLayer=newol.layer.Tile({zIndex:90,source:newol.source.ImageTileSuperMapRest({url:'https://iserver.supermap.io/iserver/services/imageservice-hainan/restjsr',projection:projection,collectionId:'sample'})});map.addLayer(vectorLayer);//添加掩膜functionaddMask(){if(!sichuanFeature){varparam=newol.supermap.QueryBySQLParameters({queryParams:{name:'Province_R@China',attributeFilter:'SMID = 3'}});//从中国省份地图查找到海南省，作为掩膜矢量要素newol.supermap.QueryService('https://iserver.supermap.io/iserver/services/map-ChinaProvinces/rest/maps/ChinaProvinces').queryBySQL(param,function(serviceResult){sichuanFeature=newol.format.GeoJSON().readFeatures(serviceResult.result.recordsets[0].features)[0];//为图层设置掩膜ol.supermap.Util.setMask(vectorLayer,sichuanFeature);});return;}else{ol.supermap.Util.setMask(vectorLayer,sichuanFeature);}}//移除掩膜functionremoveMask(){ol.supermap.Util.unsetMask(vectorLayer);}</script></body></html>