如何更新dececkgl-mapbox MapboxLayer的可见道具

Question

我有10-15个不同的layerId图层，并从deck.gl/mapbox子模块api引用创建MapboxLayer并添加到mapbox地图实例中。

尝试通过调用 layerVisibility 方法，根据从 UI 传递 layerId 和 propertyValue 作为 true/false 复选框来设置图层的可见性，但它不起作用。

DeckglLayer 类：

declare let deck;
export class DeckglLayer {
    constructor() {

    }
    createDeckglMapboxLayer(layerId, data) {
        const { MapboxLayer, HexagonLayer } = deck;
        const options = {
            radius: 1000,
            coverage: 1,
            upperPercentile: 100
        };
    ...
    ...
        const hexagonLayer = new MapboxLayer({
            type: HexagonLayer,
            id: layerId,
            data,
            colorRange: COLOR_RANGE,
            elevationRange: [0, 20000],
            elevationScale: 4,
            extruded: true,
            getPosition: d => d.COORDINATES,
            getElevationValue: e => Math.sqrt(e[0].properties.height) * 10,
            getColorValue: this.getColorValue,
            lightSettings: LIGHT_SETTINGS,
            pickable: true,
            onHover: setTooltip,
            opacity: 1,
            visible: true,
            ...options
        });
        return hexagonLayer;
    }
}

Mapbox 实例：

 createMap(mapOptions) {
        this.mapInstance = new MapboxGl.Map(mapOptions);
    }

    addDeckglLayer(layerId, data) {
        var hexalayer = new DeckglLayer().createDeckglMapboxLayer(layerId, data);
        this.mapInstance.addLayer(hexalayer);
    }

    layerVisibility(layerId,propertyValue) {
        var ll: any = this.mapInstance.getLayer(layerId);
        //***********first way
        // ll.implementation.props.visible = propertyValue;
        //this.mapInstance.addLayer(ll);

        //*******second way
        //ll.setProps({ visible: propertyValue });
    }

注： -我尝试将图层布局属性可见性设置为“可见”或“无”，但在这种情况下，即使图层隐藏，也会出现工具提示。

您能否建议我最好的方法，如何为 MapboxLayer 的 hexagonLayer 类型设置图层 visible 属性 true/false。

Answer 1

试试这个，它对我有用。

let refreshedLayers = [];
let currLayers = map.__deck.layerManager.getLayers();
let layer = currLayers[0];

// make it visible
// newLayer = layer.clone({ visible: true });
// make it unvisible
newLayer = layer.clone({ visible: false });
refreshedLayers.push(newLayer);

map.__deck.setProps({ layers: refreshedLayers })

Answer 2

也在努力解决这个问题并注意到以下几点：

如果您检查与

deckgl

对象关联的属性，您可能会注意到

_map

属性的存在。如果您没有在 JS 命名空间中实例化 Mapbox 地图实例，那么您应该能够通过执行以下操作来访问它：

deckgl._map.map

。否则，DeckGL 会为其添加下划线

deckgl._map._map

。

回顾一下：

deckgl._map.map.setLayoutProperty('road-label-simple', 'none')

希望这有帮助