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

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

Demo

Answer 2

@Vadim Gremyachev asnwer 对我很有用，但我不得不花更多时间使用我的调试器和 react-leaflet 的库。最后，我成功地从 react-leaflet 的 MapLayer 摘要 class 扩展了一个 CustomMarker 组件。这最初是 react-leaflet 的 Marker 扩展的基础组件。问题是最初我实现了一个 componentDidMount 方法来隐藏基本方法。因此，此外我还必须在我的方法中调用以下行。

super.componentDidMount()

告诉 MapLayer 将 this.reactLeaflet 作为图层附加到传单的地图。

完整代码：

import React from 'react';
import { Marker as LeafletMarker } from 'leaflet';
import { MapLayer } from 'react-leaflet';
import { withLeaflet } from 'react-leaflet';

class CustomMarker extends MapLayer {

  //Whatever leaflet element this function return it will be assigned to this.leafletElement property.
  createLeafletElement(props) {
    let options = this.getOptions(props);
    const el = new LeafletMarker(props.position, options); 
    let layer = props.leaflet.layerContainer;
    let map = props.leaflet.map;
    return el;
  }

  updateLeafletElement(fromProps, toProps) {
    if(fromProps.someProp != toProps.someProp){
      //Modify this.leafletElement;
    }
  }

  componentDidMount() {
    super.componentDidMount();
    let el = this.leafletElement
  }
}

export default withLeaflet(CustomMarker);

如果您的组件希望有一些子组件，您也可以实现 render 方法。检查他们在 react-leaflet 的原始组件中是如何做到的，就像上面示例中的 Marker 中一样。

react-leaflet 创建自定义组件

react-leaflet create a custom components

javascript

leaflet

reactjs

react-leaflet