如何通过组件访问arcgis地图？

Question

下面的代码是通过关于如何显示地图的反应直接从arcgis获取的。

如果我想说，放大一组坐标，但其代码是在另一个组件中设置的，我怎样才能让该组件与该组件中的地图对话？

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

const map = new Map({
  basemap: "topo-vector"
});

const view = new MapView({
  container: "viewDiv",
  map: map
});

Answer 1

我通过使用 redux 工具包将地图设置为全局状态对象解决了这个问题。

1. 整个地图视图设置在 useEffect 中，一旦我初始化每个视图，我就会将地图视图分派到 rtk 中的减速器。

    dispatch(updateMapViewState(view));

    updateMapViewState: (state, action) => {
      state.view = action.payload
    },

然后，当我想在单独的组件中使用地图时，我会这样做：

    const view = useSelector((state) => state.MapSlice.view);

这样，所有组件都可以在地图组件中的useEffect之外访问地图，并且可以在不创建新地图视图的情况下对其进行操作。这对我有用。我假设您可以使用 context api 来完成此操作，但我们没有将其用作全局状态管理器。

Answer 2

这可能不是实现此目的的推荐或最佳方法，但我成功地将

view

对象从地图组件传递回父组件，然后将其保存到父组件的状态。

// in App.js
saveViewToState(view){
  this.setState({view: view})
}

<MapComponent saveViewToState={this.saveViewToState}/>

// in MapComponent.js
let view = new View()
this.props.saveViewToState(view)

然后我就能够与父级的

view

对象进行交互：

// in App.js
this.state.view.extent = {xmin: 1, ymin: 1, xmax: 2, ymax: 2}

这并不完美（由于某种原因我无法调用

view.goTo

，但

view.extent

可以工作）。我很想知道是否有更好的方法来实现这一目标。

Answer 3

仍在寻找这个问题的明确答案。 尚未找到将地图/视图创建分开并将图层添加到不同组件中的示例。

Answer 4

我仍在寻找在反应应用程序内向地图添加数据/图层/小部件的最佳实践。对我有用的是使用 React useContext() 设置视图和场景 - 然后在其他组件中访问该上下文。我之前曾将回调和映射作为 props 传递，但这变得非常复杂。我现在也使用 React context 和 useReducer() 并将状态分派到全局 MapStore，但还有另一个问题。 简单地分派更改不会执行 scene.add(layer) 操作。因此，直接访问上下文是可行的，但违反了直接访问和更新应用程序上下文的规则。还有人对此有什么想法吗？