React Leaflet LayersControll-baseLayer对象示例

Question

我尝试将LayersControll添加到react-lealfet映射中。

我添加了图层控制图标

但悬停时为空。

还有代码示例

 <Map center={this.props.configuration.center}
                 zoom={this.props.configuration.zoom}
                 minZoom={this.props.configuration.minZoom}
                 maxZoom={this.props.configuration.maxZoom}
                 attributionControl={false}
                 doubleClickZoom={false}
                 zoomControl={false}
                 editable={true}
                 onZoomEnd={this.props.configuration.onZoomEnd}
                 onZoomStart={this.props.configuration.onZoomStart}
                 bounceAtZoomLimits={false}
                 dragging={true}>

                <FeatureGroup>
                    <LayersControl
                        baseLayers={{
                            url: TILES_URL,
                            id: 'MapID'}}
                    >
                        <TileLayer url={TILES_URL}/>
                        <ZoomControl position="topright" />
                        <Marker position={[0, 0]}>
                            <Popup>
                                <span>Great marker!</span>
                            </Popup>
                        </Marker>

                    </LayersControl>

                    {this.props.children}
                </FeatureGroup>

            </Map>

Answer 1

通过react-leaflet文档

https://react-leaflet.js.org/docs/en/examples.html

有层的例子
https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/layers-control.js

所以工作示例将是

首先，我们需要导入组件

import { Map, LayersControl, ... } from 'react-leaflet';
const { BaseLayer, Overlay } = LayersControl;

  <LayersControl>
       <BaseLayer checked name="OpenStreetMap.Mapnik">
             <TileLayer url={TILES_URL}/>
       </BaseLayer>
  </LayersControl>