@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>
}
}
更多
你可能也喜欢
- @01ht/ht-toolbar-balance 中文文档教程
- @1023-ventures/darri-pp-permissions 中文文档教程
- @10xcompany/utils 中文文档教程
- @21x37/discord-bot 中文文档教程
- @2muchcoffee/nestjs-context 中文文档教程
- @3kles/kles-crud-service 中文文档教程
- @44north/prettier-config 中文文档教程
- @4geit/rct-collapsible-component 中文文档教程
- @4react/localize 中文文档教程
- @7174n/eslint-config 中文文档教程