ReactJS 和 ArcGIS,通过用户输入在 WMTS 底图顶部添加图层(包括 codesandbox 示例)

问题描述 投票:0回答:1

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

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

但这并不起作用。

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

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

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

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

reactjs arcgis esri arcgis-js-api
1个回答
0
投票

快速解决方法是使用

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 内容的,但是,我很想看看是否有更好的方法来实现这一点。

© www.soinside.com 2019 - 2024. All rights reserved.