在 React-Leaflet 中获取自定义缩放按钮时遇到问题

Question

我正在尝试使用 react-leaflet

构建自己的缩放按钮

我有以下代码：

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Map, TileLayer } from 'react-leaflet';
import Control from 'react-leaflet-control';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ZoomIn from 'material-ui/svg-icons/action/zoom-in';
import ZoomOut from 'material-ui/svg-icons/action/zoom-out';


class LeafletMap extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            animate: true,
            center: [
                -34.989610443115,
                -71.232476234436
            ],
            zoom: 13,
            zoomControl: false
        };
    }

    render() {
        return (
            <div>
                <Map
                    animate={this.state.animate} 
                    center={this.state.center} 
                    zoom={this.state.zoom} 
                    zoomControl={this.state.zoomControl}
                    >
                    <TileLayer
                        url={'http://{s}.tile.osm.org/{z}/{x}/{y}.png'}
                        attribution={'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'}
                    />
                    <Control position="topleft">
                        <MuiThemeProvider>
                            <div>
                                <div>&nbsp;</div>
                                <FloatingActionButton mini={true}>
                                    <ZoomIn onClick={ () => alert('Zoom In') } />
                                </FloatingActionButton>
                                <div>&nbsp;</div>
                                <FloatingActionButton mini={true}>
                                    <ZoomOut onClick={ () => alert('Zoom Out') }/>
                                </FloatingActionButton>
                            </div>
                        </MuiThemeProvider>
                    </Control>
                </Map>
            </div>
        );
    }
}
export default LeafletMap;

所有这些都是很好的显示方式，但现在我想放置一个可以放大或缩小的功能。我不知道如何使用 react-leaflet 库调用传单的方法。
我尝试了很多方法来实现它，但没有成功。

你知道如何实现它吗？

Answer 1

有几种方法可以处理地图 functions/actions。

通过道具传递

通过 Map 的属性（边界、中心、缩放）可以使用许多选项。通过这种方式，您可以在 state/store 中而不是在传单中进行缩放。

const React = window.React;
const {
  Map, 
  TileLayer, 
  Marker, 
  Popup
} = window.ReactLeaflet;

class ZoomInState extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
    this.zoomIn = () => this.setState({zoom: this.state.zoom+1})
    this.zoomOut = () => this.setState({zoom: this.state.zoom-1})
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return ( < Map center = {
        position
      }
      zoom = {
        this.state.zoom
      }

      >
      < TileLayer attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' / >
      < Marker position = {
        position
      } >
        < Popup >
          < span >
            <button onClick={this.zoomOut}>
              Zoom out
            </button >
            < button onClick = {this.zoomIn} >
              Zoom in
            < /button>
          < /span>
        </Popup >
      < /Marker>
      </Map >
    );
  }
}
export default ZoomInState

通过 refs 获取地图

这种方式不会在您的组件中保持缩放级别。这通常是一种很好的做法，因为它保留了单一的事实来源。您始终可以使用 map.getZoom()

进行缩放

const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;

class MapByRef extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  bindMap(el) {
    this.map = el.leafletElement;
  }

  zoomIn() {
    this.map.zoomIn();
  }

  zoomOut() {
    this.map.zoomOut();
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} ref={::this.bindMap}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>
              <button onClick={::this.zoomIn} >Zoom In</button>
              <button onClick={::this.zoomIn} >Zoom Out</button>
            </span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}
export default MapByRef

3。 从上下文中获取

如果你想制作许多需要与地图交互的子组件，这种方式很好。它还将传单作为唯一的真实来源。

const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;

class CustomMarker {

  zoomIn(){
    this.context.map.zoomIn()
  }
  zoomOut(){
    this.context.map.zoomOut()
  }

  render() {
    return (
      <Marker position={position}>
        <Popup>
          <button onCLick={::this.zoomIn}>Zoom In</button>
          <button onCLick={::this.zoomOut}>Zoom In</button>
        </Popup>
      </Marker>
    )
  }
}
export CustomMarker


class MapWithCustomChildren extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <CustomMarker />
      </Map>
    );
  }
}
export default MapWithCustomChildren

在 React-Leaflet 中获取自定义缩放按钮时遇到问题

Having trouble getting a custom zoom button in React-Leaflet

javascript

leaflet

reactjs

react-leaflet