iClient for MapboxGL子图层控制

作者：John

      在使用SuperMap iClient for JavaScript产品过程中，经常有一些小伙伴会问iClient for MapboxGL如何实现图层控制过滤，本文就是针对该问题提个思路和示例Demo供大家参考和借鉴。

      实现该功能主要有以下几个步骤：
          >1. 引入IClients-MapboxGL 和 MapboxGL包，若非3857坐标系还需要引入扩展包mapbox-gl-enhance；
          >2. 获取子图层信息；
          >3. 绘制图层组控制面板；
          >4. 设置过滤条件；
          >5. 临时图层显示。

     1、引包

           引包参考官网mapboxGL开发指南（https://iclient.supermap.io/web/introduction/mapboxglDevelop.html）引入，本文就不在做多余介绍。

     2、获取子图层信息

           通过图层信息服务类（LayerInfoService）的getLayersInfo接口获取图层信息。

var layerInfoService = new mapboxgl.supermap.LayerInfoService(url);
layerInfoService.getLayersInfo(function(result){
		......
}

     3、绘制图层组控制面板

           设置div面板，将上一步查询出的layer名称放入面板中。

function installPanel(subLayers) {
   var layersList = "";
   for (var i = 0; i < subLayers.length; i++) {
       if (eval(subLayers[i].visible) == true) {
           layersList += '<label class="checkbox" style="line-height: 28px; display: block"><input type="checkbox"  class = "checkboxSel" id="layersList' + i + '" name="layersList" value="' + subLayers[i].name + '" checked=true title=' + "子图层" + '/>' + subLayers[i].name + '</label>';
       }
       else {
           layersList += '<label class="checkbox" style="line-height: 28px; display: block"><input type="checkbox" class = "checkboxSel" id="layersList' + i + '" name="layersList" value="' + subLayers[i].name + '" title=' +  + '/>' + subLayers[i].name + '</label>';
       }
       if (i == subLayers.length -1) {
           layersList += '<br><div class="bottom-button"><button οnclick="submit1()">提交</button></div>'
       }
   }
   showWindow(layersList);

   $(".checkbox").hover(function () {
       $(this).addClass("label-success");
   }, function () {
       $(this).removeClass("label-success");
   });
}

     4、设置过滤条件

           通过图层信息服务类（LayerInfoService）的setLayerStatus子图层显示控制服务，将子图层显示控制参数传递到服务端，并获取服务端返回的图层显示状态，子图层显示参数类（LayerStatus）介绍如下：

var list = [];
list.push(new SuperMap.LayerStatus({
    layerName: layers1[i].name,
    isVisible: "true"  // 设置子图层显影
 // displayFilter: "smid = 0"
 }))

     5、临时图层显示

function showtempLayer(){
    var p = new SuperMap.SetLayerStatusParameters({
        layerStatusList: list
    })
    layerInfoService.setLayerStatus(p,function(e){
        if (e.result) {
        var t1 = e.result.newResourceID
         console.log(t1)
        
// 显示临时图层
    if (map){
        // map.style = null
        map.removeLayer("simple-tiles")
    }
    map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
             "sources": {
                "raster-tiles": {
                    "attribution": "",
                    "type": "raster",
                    "tiles": [host + '/iserver/services/map-1110/rest/maps/New_Point%401110/zxyTileImage.png?prjCoordSys='+encodeURIComponent('{"epsgCode":3857}')+'&z={z}&x={x}&y={y}&noWrap=true&transparent=true&cacheEnabled=false&layersID='+ t1],
                    "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 mapboxgl.supermap.LogoControl(), 'bottom-right');
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    }
  })
}

效果展示

以下链接是我实现子图层控制的一个例子，供大家参考：
https://download.csdn.net/download/qq_29109799/87003084