在 Openlayers 中动态更改图层的可见性

Question

我在我的反应应用程序中使用了openlayer 5.3.3。我正在尝试在用户单击图层选项时动态更改图层的可见性。

var resolutions = new Array(14);
var matrixIds = new Array(14);
var size = getWidth(projectionExtent) / 256;
for (var z = 0; z < 14; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:4326:" + (z - 1);
}
const constructSource = (layer) => {
var source = new WMTS({
url: geoserverUrl,
layer:layer,
matrixSet:"EPSG:4326",
format:"image/png",
projection: getProjection("EPSG:4326"),
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: "",
wrapX: true,
});
return source;
};
var layersource = constructSource("layers:myLayer");
var layer1 = new TileLayer({
opacity: 0.7,
source: layersource,
visible: false,
});
var view = new View({
center: [29.94049072265625, -3.438720703125],
zoom: 8,
projection:getProjection("EPSG:4326"),
});

useEffect(() => {
map.current = new Map({
view,
layers: [layer1],
target: "map",
});
}, [map]);
useEffect(() => {
if (props.selectedLevel === "level2") {
console.log("check visibility here", layer1.getVisible()); // this results false
layer1.setVisible(true);
console.log("check visibility here 2", layer1.getVisible()); //this results true
}
}, [props.selectedLevel]);
return (
<div
id="map"
ref={(el) => (map = el)}
style={{ height: "100%", width: "80em" }}
></div>
);

layer1.getVisible 给出 true，但未显示该层。 layer1.setVisible(true( 如果在第一次重新加载时设置，则工作。

Answer 1

我对 react 不是很熟悉，但对我来说，一旦添加到地图中，对var layer1的引用似乎就会丢失。因此，更改变量的可见性不会影响地图内的图层。

您是否尝试通过使用map.getLayers()从map对象获取图层来设置可见性？这将返回与地图关联的图层集合。为简单起见，我假设layer1是添加到地图中的唯一图层。在这种情况下，getLayers()将为您提供一个包含一层[layer]的数组。您可以使用map.getLayers()[0].setVisible(true/false)设置可见性。如果有更多图层，则需要循环浏览集合并根据图层 ID 设置可见性。

此外，(如注释中所述(，每次调用useEffects()时都会重新创建地图。没有必要这样做。只需创建一次地图。OpenLayers API 提供了足够的方法来访问和修改地图对象，包括与其关联的图层。