如何在反应传单上添加比例？

如何解决如何在反应传单上添加比例？

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

我该怎么做？

这是我的代码：

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);

这是链接：

Map

我看到了：

Documentation

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

你能帮我吗？

非常感谢！

解决方法

创建一个简单的 react-leaflet 对象

import { useEffect } from "react";
import L from "leaflet";
import { useLeafletMap } from "use-leaflet";

const MapScale = ({ options }) => {
  const map = useLeafletMap();

  useEffect(() => {
    L.control.scale(options).addTo(map);
  },[map]);

  return null;
};

export default MapScale;

然后在您的主页中，只需添加 <MapScale options={{imperial:false}}/>

,

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

import { ScaleControl } from 'react-leaflet' 

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

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

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

,

没有更简单的，直接使用即可：

import { ScaleControl } from 'react-leaflet';


<ScaleControl imperial={false} />

默认情况下，位置在地图的左下角。