1

在 OpenLayers 中创建“控件”时 - 即覆盖地图并在单击时执行操作的按钮，我可以想到至少两种实现方法：

提供您自己的 DOM 元素，并直接与 Map 对象交互

这是我目前的做法。在我目前正在开发的网站上：https ://seacrifog.saeon.ac.za/atlas ，右上角有 2 个小按钮。这些按钮打开包含 DOM 组件树和逻辑的侧面菜单，用于通过对 OpenLayers 地图对象的引用与地图进行交互。

map通过 render-props 模式包装 OpenLayers 库的组件的所有子组件都可以使用此引用：

class MyMap extends Component {
  // Constructor/lifecycle methods/etc.
  this.map = new Map(...)
  ...
  render() {
    return (
      <>
        <div ref={this.mapRef} />
        {this.props.children({map: this.map})}
      </>
    )
  }
}

Control然后我发现在不使用 OpenLayers类的情况下构建“控件”非常容易：

<MyMap>
{({map}) => (
  <>
    {/* Each of these renders a button and other DOM elements */}
    <Component1ThatUsesTheMap map={map} />
    <Component2ThatUsesTheMap map={map} />
    <Component3ThatUsesTheMap map={map} />
  </>
 )}
</MyMap>

使用 OpenLayers ol/control/Control 类

我从示例中看到，也可以通过定义附加Controls 将按钮添加到地图中。据我所知，这个例子展示了如何定义将添加到地图中的 DOM 元素，以及如何编写事件处理程序（在本例中为单击）以允许您以您想要的方式与地图交互. 这与我使用初始方法的方式基本相同。

问题

ol/control/Control使用与不使用此 API定义地图控件有什么好处？我想不出不临时使用Control类的任何缺点（实际上......使用 React 我可以想到不直接与 DOM 交互的原因，除非我真的需要，以及可能与来自的地图对象交互父组件）。虽然我使用的是 OpenLayers 6，但我认为在这种情况下版本并不重要。

4

0 回答 0