在 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

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

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

此外，（如评论中所述），每次调用useEffects()时，您都在重新创建 map。 没有必要这样做。 只需创建一次 map。 OpenLayers API 提供了足够的 方法来访问和修改 map object，包括与之关联的层。