在城市规划、农业资源管理等场景中如何精准呈现特定地类图斑呢？SuperMap iClient3D for WebGL提供了子图层过滤的方法。让我们一起看看吧！
一、数据制作
对于上述视频中的地图制作，此处不做讲述，如有需要可访问：Online 开发者中心
可视化案例中提供了详细的代码、数据下载链接及数据制作过程。
二、实现思路
设置子图层过滤的实现思路如下图所示：
三、关键代码
在API文档中搜索 SuperMapImageryProvider，提供的 setLayerStatusParameters 方法中可查看设置过滤条件的相关说明。
API文档地址：Index - SuperMap3D Documentation
四、示例完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子图层过滤</title>
<link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/spectrum.js"></script>
<script src="./js/config.js"></script>
<script src="./js/tooltip.js"></script>
<script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>
<body>
<div id="Container"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<div class="param-item">
<select id="landPatchTypeSelector" style="width: 150px">
<option value="" selected disabled hidden>请选择图斑类型</option>
<option value="水田">水田</option>
<option value="旱地">旱地</option>
<option value="林地">林地</option>
<option value="园地">园地</option>
<option value="自然保留地">自然保留地</option>
<option value="坑塘水面">坑塘水面</option>
<option value="设施农用地">设施农用地</option>
<option value="农村居民点用地">农村居民点用地</option>
<option value="河流水面">河流水面</option>
<option value="采矿用地">采矿用地</option>
<option value="公路用地">公路用地</option>
<option value="水工建筑用地">水工建筑用地</option>
<option value="特殊用地">特殊用地</option>
<option value="牧草地">牧草地</option>
<option value="滩涂">滩涂</option>
<option value="水库水面">水库水面</option>
<option value="城镇用地">城镇用地</option>
<option value="农村道路">农村道路</option>
<option value="其他独立建设用地">其他独立建设用地</option>
<option value="农田水利用地">农田水利用地</option>
<option value="铁路用地">铁路用地</option>
<option value="风景名胜设施用地">风景名胜设施用地</option>
</select>
</div>
</div>
<script>
// 页面加载完成后执行的函数，初始化 SuperMap3D 地图
function onload(SuperMap3D) {
// 通过 config.js 中的 getEngineType 函数，获取引擎类型（EngineType），用于设置启动方式
let EngineType = getEngineType();
// 创建一个 SuperMap3D 的 Viewer 实例，将其显示在 id 为 'Container' 的容器中
let viewer = new SuperMap3D.Viewer('Container', {
contextOptions: {
// 设置 WebGL 上下文类型，Webgl2 对应值为 2，WebGPU 对应值为 3
contextType: Number(EngineType),
}
});
// 当场景加载完成后，调用 init 函数进行初始化操作
viewer.scenePromise.then(function (scene) {
init(SuperMap3D, scene, viewer);
});
}
// 初始化地图场景的函数
function init(SuperMap3D, scene, viewer) {
// 设置地图的分辨率比例，根据设备的像素比进行调整
viewer.resolutionScale = window.devicePixelRatio;
$('#loadingbar').remove();
// 存储添加的影像图层
let tmpLayer = viewer.imageryLayers.addImageryProvider(
new SuperMap3D.SuperMapImageryProvider({
url: "http://localhost:8090/iserver/services/map-TG_TDGH_DC_530302_2017/rest/maps/TDGHDL%40TG_TDGH_530302_2017",
})
);
// 让地图飞到影像所在的位置，以便用户能看到影像
viewer.flyTo(tmpLayer);
// 监听图斑选择框的 change 事件，当用户选择不同的图斑时触发
$('#landPatchTypeSelector').change(function () {
let selectedValue = $(this).val();
let params = [];
// 根据选择的值构建过滤参数
if (selectedValue) {
params = [{
layerName: 'TDGHDL@TG_TDGH_530302_2017_1', // 请确保这个名称正确
isVisible: true,
displayFilter: `GHDLMC='${selectedValue}'` // 请确保这个属性名称正确
}];
// 设置图层过滤参数，并添加回调函数
tmpLayer.setLayerStatusParameters(params, function () {
console.log('图层过滤设置成功');
});
}
});
}
// 检查 SuperMap3D 是否已经定义，如果已经定义则调用 onload 函数进行初始化
if (typeof SuperMap3D !== 'undefined') {
onload(SuperMap3D);
}
</script>
</body>
</html>