Arcgis地图实战一：单个图层中设施的隐藏及显示

1.效果图预览

2.弹框的实现

let alert = this.alertCtrl.create();
        alert.setTitle('请选择设施');
        for (let item of this.ctralllayers) {
            alert.addInput({
                type: 'checkbox',
                label: item.name,
                value: item.id,
                checked: item.visible
            });
        }
        alert.addButton('取消');
        alert.addButton({
            text: '确定',
            handler: data => {
    
            }
        });
        alert.present();

默认配置的ctralllayers数组数据

 "ctralllayers": [
                { "id": "baseServer", "url": "...", "label": "底图", "type": "tianditiled_online", layerid: -1, visible: true },
                { "id": "baseServer_lab", "url": "...", "label": "标注", "type": "tianditiled_cvaonline", layerid: -1, visible: true },
                {
                    id: 'psgw',
                    label: "管网",
                    url: '/xxx/MapServer',
                    visible: true,
                    layerid: -1,
                    type: 'dynamic'
                },
                {
                    id: 'jcj',
                    label: "检查井",
                    layerid: 1,
                    url:  '',
                    visible: true,
                    type: 'dynamic'
                },
                {
                    id: 'ysk',
                    label: "雨水口",
                    layerid: 2,
                    url: '',
                    visible: true,
                    type: 'dynamic'
                },
                {
                    id: 'psg',
                    label: "排水管",
                    layerid: 4,
                    url: '',
                    visible: true,
                    type: 'dynamic'
                }
            ]

3.显示及隐藏的实现

默认加载三个图层，一个底图，一个标注，一个管线图层，管线图层包含所有的设施，arcgis发布的服务如下所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HGp9a9uR-1690967394824)(en-resource://database/1100:1)]

排水管网这个图层单独控制我们可以图层id,然后调用
layer.setVisibility(isVisible)来控制单个图层的显示及隐藏，如果想对这个图层中的子设施做控制，在arcgis3.x版本中我们可以用
layer.setVisibleLayers(ly.visibleLys)这个方法做控制

let layerIds=[1,2,4]
let temArr = [{
                    layerid: 'psgw',
                    visibleLys: layerIds
                }]
                this.mapTool.setLayerVisible(temArr);

layerIds中的数据根据复选框选中，动态push到数组中即可，点击确定按钮的时候调用setLayerVisible方法，可以对temArr组装控制多个图层

setLayerVisible: function (lyarr) {
                for (var i in lyarr) {
                    var ly = lyarr[i];
                    var layer = this._map.getLayer(ly.layerid);
                    layer.setVisibleLayers(ly.visibleLys);
                }
            },