react-leaflet内的传单插件

Question

我想使用Leaflet.VectorGrid插件，我有一个问题。是否有示例如何在react-leaflet中创建自定义组件？

Answer 1

React-Leaflet旨在提供Leaflet提供的所有控件和层，但不支持任何Leaflet插件。

创建定制组件需要执行以下步骤，

1。）扩展React-Leaflet提供的Abstract类

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-包装组件。例如，

export default withLeaflet(MapInfo);

此示例将为您提供帮助-https://codesandbox.io/s/p5zzmnlk8j

也请参考本文档https://react-leaflet.js.org/docs/en/custom-components.html