如何在反应传单上添加刻度？

Question

我正在使用与图书馆传单的反应，但我想在我的地图上添加以公里为单位的比例尺。

我该怎么做才能做到这一点？

这是我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles.css';

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13,
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

这是链接：

地图

我看到了 ：

文档

但我没有找到任何关于如何在我的代码中实现它的示例......

请问你能帮帮我吗 ？

Answer 1

如果您使用React Leaflet库，另一种选择是像这样导入 ScaleControl

import { ScaleControl } from 'react-leaflet' 

然后您可以通过添加<ScaleControl />内部来添加比例<MapContainer></MapContainer>并添加不同的属性，例如位置。例如，

  <MapContainer>
    <ScaleControl position="topleft" />
  </MapContainer>

最后，您始终可以使用 CSS 来编辑比例的外观。