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

【问题标题】：Changing the visibility of layers dynamically in Openlayers在 Openlayers 中动态更改图层的可见性
【发布时间】：2020-06-01 04:19:27
【问题描述】：

我在我的反应应用程序中使用 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) 工作，如果它在第一次重新加载时设置。

【问题讨论】：

我的感觉告诉我你想在你的应用程序/每个组件中调用一次new Map。现在，每次map 变量在第一个useEffect() 调用中发生变化时，您都会首先创建一个新映射。 map 持有什么，它多久改变一次？您是否尝试使用空列表（而不是 [map]）调用 useEffect？
是的，没有变化。还是一样

标签： javascript reactjs openlayers postgis geoserver

【解决方案1】：

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

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

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

【讨论】：

是的，我也试过了！这是没有用的。我只能在 useEffect 之外更改可见性。