react-leaflet 中的 Leaflet 插件

Question

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

Answer 1

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

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

1.) 扩展 React-Leaflet

提供的摘要 class

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

react-leaflet 中的 Leaflet 插件

Leaflet plugin inside react-leaflet

leaflet

react-leaflet