通过用户输入在 WMTS 底图顶部添加图层（包括 codesandbox 示例）

Question

我正在尝试使用 arcgis 在我的底图图层之上添加街道图层。但是，我似乎无法通过切换输入复选框来渲染第二层街道名称。

我的解决方案基于我发现的这个例子。 ESRI 链接

但这并不起作用。

在此处的代码笔示例中，codepen

我能够渲染我的 WMTS 地图，但我似乎无法添加图层。

如果我在底图初始化时显式添加街道图层链接，我确实会看到它正在渲染。否则我似乎无法以动态方式在底图之上添加新图层。

注意：codepen 中的地图可能需要一分钟才能完全加载。

Answer 1

快速解决方法是使用

useRef

而不是

useState

来存储地图。

将地图状态声明替换为以下内容：

const mapRef = useRef(null);

将您的地图和视图声明更改为：

  const map = new Map({
    basemap: plainIGNBasemap,
    center: coordinates,
    // ...
    },
  });

  view = new MapView({
    container: ref.current, 
    map: map, //ensure to set this to your referenced map
    center: coordinates,
    // ...
  });

  mapRef.current = map;

保存

mapRef

后，可以使用

mapRef.current

在代码中访问它。

MapView

方法的使用方式与 ArcGIS JS API 文档所述相同。例如，要在支票上添加

MapImageLayer

，请将代码替换为以下内容：

useEffect(() => {
  if (isChecked) {
    if (mapRef) {
      const imageLayer = new MapImageLayer({
        visible: true,
        url: "url goes here",
      });
      mapRef.current.add(imageLayer);
    }
  }
}, [isChecked]);

这是对您的代码的 codepen 更新。这是一个 codepen，其布局是我在 React 中用于 ArcGIS JS 内容的，但是，我很想看看是否有更好的方法来实现这一点。