10 ~ 15 の異なる layerId レイヤーがあり、deck.gl/mapbox サブモジュール API refrence から MapboxLayer を作成し、mapbox マップ インスタンスに追加しました。
layerVisibilityメソッドを呼び出して UI から true/false チェックボックスとして layerId と propertyValue を渡すことに基づいてレイヤーの可視性を設定しようとしていますが、機能していません。
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;
}
}
マップボックス インスタンス:
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 });
}
注: -i レイヤー レイアウト プロパティの可視性を「表示」または「なし」に設定してみましたが、この場合、レイヤーが非表示になっていてもツールチップが表示されます。
MapboxLayer のhexagonLayer タイプに対してレイヤーの表示プロパティを true/falseに設定する方法を教えてください。