Question

我试图弄清楚如何使用openlayers，leaflet，mapbox，google maps等映射API和React + Redux。

我的目标是使地图对象可用于应用程序的所有其他组件，而不将其定义为全局变量。

在没有Redux的React中，我将在应用程序的顶级组件中构造openlayers地图对象，将其保存到状态，然后作为props传递给子组件。这对我来说没问题，但我正在努力学习如何将Redux融入应用程序。

所以考虑一下这个用例：我有一个带有两个主要组件的应用程序：地图和菜单，两者都位于主App组件中。该菜单有一个工具，可以让用户将geojson文件添加到地图中。我想在Map组件中构造openlayers地图对象，但是AddFile工具需要知道地图对象才能工作。

这是地图组件的相关部分：

  componentDidMount() {
    // define ol modules after React component mounts (for SSR)
    const Map = require('ol/map').default;
    const View = require('ol/view').default;
    const TileLayer = require('ol/layer/tile').default;
    const OSM = require('ol/source/osm').default;

    const olMap = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 3,
      }),
    });
    this.loadMap(olMap);
  }

  loadMap = olMap => {
    this.props.dispatch(loadMap(olMap));
  }

  render() {
    return (
      <div id="map">
      </div>
    );
  }

调度loadMap操作：

export function loadMap(olMap) {
  return {
    type: 'LOAD_MAP',
    olMap,
  };
}

由reducer处理：

export default function mapReducer(state, action) {
  if (action.type === 'LOAD_MAP') {
    return state.merge({
      olMap: action.olMap,
    });
  }
}

这与我用来将更简单的项目放入redux商店的模式相同，但是当我运行此模型时，我收到有关Maximum call stack size exceeded.的错误

我猜这个问题来自两件事之一：

ol地图对象是可变的
ol地图对象具有循环引用

关于如何避免此错误的任何想法，或者我应该坚持使用适合我的标准React方法并使地图对象远离Redux？

OpenLayers（或其他映射API）+ React / Redux：如何在商店中保留地图对象？

0 个答案: