mapbox-gl - 如何更新deckgl-mapbox MapboxLayer的可见道具
问题描述
我有 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 类型设置图层可见属性 true/false。
解决方案
试试这个,它对我有用。
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 })
推荐阅读
- google-apps-script - 网站和文档中的动态值
- genexus - 您可以在同一个 KB 中使用肥皂/休息服务吗?
- android - Android视图整形像底部应用栏,但我需要使用渐变
- python - 如何读取发送到 Django POST 请求的 .sav 文件
- mysql - 如何在 SQL 中使用外键在表中插入值?
- javascript - 如何获取选定选项的文本值并将其用作条件语句?
- firebase - Firebase 实时数据库规则模拟器中的空数据
- java - 如何使用 OSGi 加载/获取包中的所有类?
- sql - 无法获取数据,将 where 子句用于 union 子句的结果
- typescript - 带有 PopperJs 的工具提示,显示未定位的第一个状态