javascript - React-leaflet 创建自定义组件

Question

我想使用react-leaflet创建一个自定义组件来显示鼠标的实际位置(x，y)，但我不知道如何创建它。我找到了react-leaflet-control但是好像不是最新的，当然我看了api文档https://react-leaflet.js.org/docs/en/custom-components.html但我不明白:/

有人能给我一个自定义组件的示例吗？只要一个显示“Hello world”的组件就足够了。

Answer 1

根据 documentation ，要创建自定义组件，需要执行以下步骤:

1)扩展React-Leaflet提供的抽象类之一，例如:

class MapInfo extends MapControl {
   //...
} 

2)实现createLeafletElement(props: Object):Object方法创建相关的Leaflet元素实例，例如:

createLeafletElement(opts) {
    const MapInfo = L.Control.extend({
      onAdd: (map) => {
        this.panelDiv = L.DomUtil.create('div', 'info');
        return this.panelDiv;
      }
    });
    return new MapInfo({ position: 'bottomleft' });
}

3) 使用 withLeaflet() HOC 包装您的自定义组件，例如:

export default withLeaflet(MapInfo);

以下示例演示如何创建自定义组件来显示鼠标在 map 上的实际位置(lat,lng):

Demo