react-leaflet 创建自定义组件

问题描述

我想创建一个带有显示鼠标实际位置 (x,y) 的 react-leaflet 的自定义组件，但我不知道如何创建它.我找到了 react-leaflet-control 但它似乎不是最新的，当然我阅读了 api 文档 https://react-leaflet.js.org/docs/en/custom-components.html 但我不明白:/

I would like to create a custom component with react-leaflet that shows the actual position (x,y) of the mouse, but I don't know how to create it. I found react-leaflet-control but it seems that it is not up to date, of course I readded the api documentation https://react-leaflet.js.org/docs/en/custom-components.html but I did not understand it :/

谁能给我一个自定义组件的例子，只要一个显示Hello world"的组件就足够了.

Can someone give me an exemple of a custom component please, juste a component that display "Hello world" whould be more than enought.

推荐答案

根据 文档，创建一个自定义组件需要以下步骤:

As per documentation, to create a custom component the following steps are required:

1)扩展React-Leaflet提供的抽象类之一，例如:

1)extend one of the abstract classes provided by React-Leaflet, for example:

class MapInfo extends MapControl {
   //...
} 

2)实现createLeafletElement(props:Object):Object方法创建相关Leaflet元素实例，例如:

2)implement createLeafletElement (props: Object): Object method to create the relevant Leaflet element instance, for example:

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 包装您的自定义组件，例如:

3) wrap your custom component using the withLeaflet() HOC, for example:

export default withLeaflet(MapInfo);

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

The following example demonstrates how create a custom component to display the actual position (lat,lng) of the mouse on map:

演示

这篇关于react-leaflet 创建自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！