SuperMap iClient for MapLibreGL 根据SQL条件过滤显示动态图层

查阅发现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><linkrel="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><linkrel="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) {//获取临时图层idlet 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>