作者：lly
文章目录
- 背景
- 一、实现思路
- 二、步骤代码
- 三、完整代码
背景
最近很多小伙伴需要只展示地图的某个行政区域，由于地图存在多个图层，所以图层过滤的方式并不能很好的适用，这个时候，我们可以考虑给地图覆盖一层掩膜的方式来实现。
效果如下：
一、实现思路
整体实现思路比较简单，主要分为以下几步：
1.去掉地图的循环显示
2.查询获取需要展示区域的几何对象
3.构建一个内部空洞的几何对象进行覆盖
接下来我们就来快拿下代码具体如何编写
二、步骤代码
1.给图层设置noWrap参数取消地图的循环显示，同时对地图设置renderer
参数，用以解决掩膜拖拽与缩放显示不全的问题。
map = L.map('map', {crs: L.CRS.EPSG4326,center: {lon: 0, lat: 0},maxZoom: 18,zoom: 1,renderer: L.canvas({ padding: 1 })});new L.supermap.TiledMapLayer(baseUrl,{noWrap:true}).addTo(map);
2.查询获取需要展示区域的几何对象
var sqlParam = new L.supermap.GetFeaturesBySQLParameters({queryParameter: {name: "Countries@World",attributeFilter: "SMID = 234"},datasetNames: ["World:Countries"]});new L.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {var coord=serviceResult.result.features.features[0].geometry.coordinates;});
3.在回调函数中，拿到获取的几何对象转换为latlng类型，并将地图范围作为外部形状，构建一个内部空洞的几何对象进行覆盖
var latlng=L.GeoJSON.coordsToLatLngs(coord,2)var poly=L.polygon(latlng);var a=L.polygon([[[-91,-181],[91,-181],[91,181],[-90,181]],latlng],{fillColor: '#ddd',fillOpacity:1,stroke:false});
三、完整代码
<!--********************************************************************
* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title data-i18n="resources.title_getFeatureBySQL"></title><script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" src="../js/leaflet-Mask.js"></script><script type="text/javascript">var host = window.isLocal ? window.server : "https://iserver.supermap.io";var map, resultLayer,baseUrl = host + "/iserver/services/map-world/rest/maps/World",url = host + "/iserver/services/data-world/rest/data";map = L.map('map', {crs: L.CRS.EPSG4326,center: {lon: 0, lat: 0},maxZoom: 18,zoom: 1,renderer: L.canvas({ padding: 1 })});new L.supermap.TiledMapLayer(baseUrl,{noWrap:true}).addTo(map);query();function query() {var sqlParam = new L.supermap.GetFeaturesBySQLParameters({queryParameter: {name: "Countries@World",attributeFilter: "SMID = 234"},datasetNames: ["World:Countries"]});new L.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {var coord=serviceResult.result.features.features[0].geometry.coordinates;var latlng=L.GeoJSON.coordsToLatLngs(coord,2)var poly=L.polygon(latlng);var a=L.polygon([[[-91,-181],[91,-181],[91,181],[-90,181]],latlng],{fillColor: '#ddd',fillOpacity:1,stroke:false});a.addTo(map)});}
</script>
</body>
</html>
