react-leaflet创建自定义组件 [英] react-leaflet create a custom components

问题描述

我想用react-leaflet创建一个自定义组件，该组件显示鼠标的实际位置(x，y)，但是我不知道如何创建它.我找到了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创建自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！