react-leaflet 中的传单插件

Question

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

Answer 1

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

要创建自定义组件需要以下步骤，

1.) 扩展 React-Leaflet 提供的抽象类

2.) 实现 createLeafletElement (props: Object): Object创建传单元素的方法。例如，

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