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

根据文档，要创建自定义组件，需要执行以下步骤：

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);

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

演示版