查阅发现iClient 有子图层控制类 LayerStatus
可实现：子图层显示参数类。此类存储了各个子图层的名称、是否可见的状态、SQL 过滤条件等参数。
API详情：http://support.supermap.com.cn:8090/iserver/iClient/forJavaScript/docs/maplibregl/LayerStatus.html
实现思路：
1、构造StatusParameters 参数数组
let mymyLayerStatusList = [];
//构造子图层显示参数
myLayerStatusList.push(
new maplibregl.supermap.LayerStatus({
layerName: "Grids@World",
displayFilter: "false", // 设置子图层显影
// displayFilter: "smid = 0",
})
);
2、通过LayerInfoService创建临时图层
//构造子图层显示控制参数
let statusParameters = new maplibregl.supermap.SetLayerStatusParameters({
myLayerStatusList: myLayerStatusList,
});
let layerInfoService = new maplibregl.supermap.LayerInfoService(url);
//子图层显示控制服务。负责将子图层显示控制参数传递到服务端，并获取服务端返回的图层显示状态。
layerInfoService.setLayerStatus(statusParameters, (res) => {})
3、根据layersID加载临时图层
sources: {
"raster-tiles": {
attribution: "",
type: "raster",
// 拼接临时图层地址
tiles: [
url + "/zxyTileImage.png?prjCoordSys=" + encodeURIComponent('{"epsgCode":3857}') +
"&z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=" +
tempMapId,
],
tileSize: 256,
},
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>根据SQL条件过滤显示动态图层</title>
<link
rel="stylesheet"
href="https://iclient.supermap.io/web/libs/maplibre-gl-js/4.3.2/maplibre-gl.min.css"
/>
<script src="https://iclient.supermap.io/web/libs/maplibre-gl-js/4.3.2/maplibre-gl.min.js"></script>
<link
rel="stylesheet"
href="https://iclient.supermap.io/web/libs/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.css"
/>
<script src="https://iclient.supermap.io/web/libs/maplibre-gl-js-enhance/4.3.0-1/maplibre-gl-enhance.js"></script>
<script src="https://iclient.supermap.io/dist/maplibregl/iclient-maplibregl-es6.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
let url =
"http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/%E4%B8%96%E7%95%8C%E5%9C%B0%E5%9B%BE_Day";
let mymyLayerStatusList = [];
//构造子图层显示参数
myLayerStatusList.push(
new maplibregl.supermap.LayerStatus({
layerName: "Grids@World",
displayFilter: "false", // 设置子图层显影
// displayFilter: "smid = 0",
})
);
myLayerStatusList.push(
new maplibregl.supermap.LayerStatus({
layerName: "continent_T@World",
displayFilter: "true", // 设置子图层显影
displayFilter: "smid = 5",
})
);
myLayerStatusList.push(
new maplibregl.supermap.LayerStatus({
layerName: "Countries@World",
isVisible: "true", // 设置子图层显影
displayFilter: "smid > 200",
})
);
myLayerStatusList.push(
new maplibregl.supermap.LayerStatus({
layerName: "Countries@World#1",
isVisible: "true", // 设置子图层显影
displayFilter: "smid > 200",
})
);
//构造子图层显示控制参数
let statusParameters = new maplibregl.supermap.SetLayerStatusParameters({
myLayerStatusList: myLayerStatusList,
});
let layerInfoService = new maplibregl.supermap.LayerInfoService(url);
//子图层显示控制服务。负责将子图层显示控制参数传递到服务端，并获取服务端返回的图层显示状态。
layerInfoService.setLayerStatus(statusParameters, (res) => {
if (res.result) {
//获取临时图层id
let tempMapId = res.result.newResourceID;
console.log(tempMapId);
let map = new maplibregl.Map({
container: "map",
style: {
version: 8,
sources: {
"raster-tiles": {
attribution: "",
type: "raster",
// 拼接临时图层地址
tiles: [
url +
"/zxyTileImage.png?prjCoordSys=" +
encodeURIComponent('{"epsgCode":3857}') +
"&z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID=" +
tempMapId,
],
tileSize: 256,
},
},
layers: [
{
id: "simple-tiles",
type: "raster",
source: "raster-tiles",
minzoom: 0,
maxzoom: 22,
},
],
},
center: [100, 50],
maxZoom: 18,
zoom: 2,
});
map.addControl(new maplibregl.supermap.LogoControl(), "bottom-right");
map.addControl(new maplibregl.NavigationControl(), "top-left");
}
});
</script>
</html>
