代码之家 › 专栏 › 技术社区 › Stevan Tosic

反应传单层控件-基本层对象示例

react-leaflet leaflet reactjs javascript

0

Stevan Tosic · 技术社区 · 7 年前

我尝试将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>

1 回复 | 直到 7 年前

1

0

Stevan Tosic 7 年前

通过React传单文档

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>