如何在React Leaflet地图中添加公里单位的比例尺？

原生Leaflet文档中的Scale控件示例，是针对直接操作原生地图实例的JS写法，因此在现有基于react-leaflet的代码中无法直接套用。react-leaflet 3.x 已内置该控件的React封装，无需手动编写原生Leaflet实例化、挂载控件的逻辑，可直接通过组件形式实现公里单位的比例尺。

核心改动步骤 #

• 从react-leaflet的导入列表中，补充引入ScaleControl组件
• 将<ScaleControl>作为<Map>的子元素放置，和现有TileLayer、Marker平级，通过参数配置实现纯公里单位的显示效果：
  • imperial={false}：关闭英制（英里/英尺）单位，仅保留公制（米/公里）刻度
  • maxWidth={200}：设置比例尺最大显示像素宽度，可根据界面布局调整数值
  • position="bottomleft"：控制控件在地图上的显示位置，默认值即左下角
• 公制单位默认开启，无需额外配置，控件会自动根据当前地图缩放级别计算匹配的公里/米刻度值。

修改后的完整可运行代码 #

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup, ScaleControl } 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"
          />
          <ScaleControl
            imperial={false}
            maxWidth={200}
            position="bottomleft"
          />
          <Marker position={this.state.center}>
            <Popup>
              美观的CSS3弹窗，<br />可轻松自定义样式。
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

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

自定义样式说明 #

如需调整比例尺外观，直接在全局CSS文件中针对.leaflet-control-scale-line类编写样式即可，支持修改线条样式、字体大小、背景透明度等效果，无需改动组件逻辑。

内容的提问来源于stack exchange，提问作者teatzr