当前位置：首页 > article >正文

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

article 2024/10/7 2:22:51

查阅发现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>