Javascript 如何在传单上添加刻度？

我正在使用react with the library传单，但我想在我的地图上添加一个以公里为单位的比例尺

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

这是我的密码：

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“反应传单”导入{Map，tillelayer，Marker，Popup}；
导入“./styles.css”；
类应用程序扩展组件{
状态={
中间：[51.505，-0.091]，
缩放：13，
};
render（）{
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
);
}
}
const rootElement=document.getElementById（'root'）；
ReactDOM.render(

我看到：


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

你能帮我吗

非常感谢！创建一个简单的react传单对象

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;

然后在主页中，只需添加
即可创建一个简单的react传单对象

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;

然后在主页中，只需添加