@2plgiap/react-leaflet-control 中文文档教程
react-leaflet-control
一个 React-Leaflet 组件,它在传单的控制面板中呈现 React 元素。
installation
npm install react-leaflet-control
Options
position
:挂载到哪个面板。 选项有 topleft
、topright
、bottomleft
、bottomright
Usage
import React, { Component } from 'react';
import Control from 'react-leaflet-control';
import { Map, TileLayer, ZoomControl } from 'react-leaflet';
export default class Example extends Component {
constructor(){
this.state = {
center: [51.3, 0.7]
}
}
render(){
<Map
center={this.state.center}
zoom={10}
>
<ZoomControl position="topright" />
<TileLayer
url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
maxZoom={18}
/>
<Control position="topleft" >
<button
onClick={ () => this.setState({bounds: [51.3, 0.7]}) }
>
Reset View
</button>
</Control>
</Map>
}
}
react-leaflet-control
A React-Leaflet component that renders React elements in leaflet's control pane.
installation
npm install react-leaflet-control
Options
position
: Which pane to mount to. Options are topleft
, topright
, bottomleft
, bottomright
Usage
import React, { Component } from 'react';
import Control from 'react-leaflet-control';
import { Map, TileLayer, ZoomControl } from 'react-leaflet';
export default class Example extends Component {
constructor(){
this.state = {
center: [51.3, 0.7]
}
}
render(){
<Map
center={this.state.center}
zoom={10}
>
<ZoomControl position="topright" />
<TileLayer
url='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
maxZoom={18}
/>
<Control position="topleft" >
<button
onClick={ () => this.setState({bounds: [51.3, 0.7]}) }
>
Reset View
</button>
</Control>
</Map>
}
}
更多
你可能也喜欢
- @0x/react-shared 中文文档教程
- @128keaton/types-url-assembler 中文文档教程
- @36node/bus-chart-sdk 中文文档教程
- @a8k/plugin-postcss 中文文档教程
- @aaa-backend-stack/polyfills 中文文档教程
- @abcnews/env-utils 中文文档教程
- @abgov/nx-release 中文文档教程
- @abi-software/mapcore-osparc-remote-interface 中文文档教程
- @abibv/kval-dstore 中文文档教程
- @acknow-srl/dialog 中文文档教程