leaflet用l.control.scale()一行添加准确比例尺，自动适配缩放与投影；mapbox需手动计算pixelstometers并监听moveend；注意css盒模型、dpr和高纬度精度问题。
用 Leaflet 实现地图比例尺最可靠
原生 HTML 不支持地图比例尺，必须依赖地图库。Leaflet 是当前最轻量、兼容性最好、API 最直观的选择，L.control.scale() 一行就能加比例尺，且自动适配缩放级别和投影单位。
常见错误是试图用纯 CSS + JS 手动计算像素与地理距离的换算——这在 Web Mercator 投影下会随纬度剧烈变化，结果完全不准。别走这条路。
-
L.map("map").addControl(L.control.scale())即可插入默认比例尺（公制+英制） - 若只需公制，传参
{imperial: false}；想固定显示米而非千米，用{maxWidth: 200}配合 CSS 调整宽度，避免自动缩写 - 注意：比例尺控件依赖地图的
crs和zoom实时更新，务必确保地图已正确初始化并设置了center和zoom
Mapbox GL JS 的 scale 控件要手动算
Mapbox GL JS 没有内置比例尺控件，得自己实现。核心难点是 map.getZoom() 返回的是对数级缩放值，而真实地面距离需结合 map.getCenter() 的纬度计算 Web Mercator 下的米/像素比。
官方推荐用 map.transform.pixelsToMeters(1, [0, 0]) 获取当前视口中心处 1 像素对应的实际米数，再乘以控件宽度（如 100px）得出代表距离。
- 不要用
Math.pow(2, zoom)简单估算，它只适用于赤道，高纬度误差超 30% - 示例关键行：
const metersPerPx = map.transform.pixelsToMeters(1, map.getCenter()); const scaleMeters = Math.round(metersPerPx * 100); - 记得监听
moveend事件重绘，否则缩放/平移后数值不更新
自定义比例尺 DOM 元素位置容易错位
Leaflet 默认把比例尺塞进 bottomleft 角，但如果你用 CSS 给地图容器设了 transform、scale 或非 static 定位，控件会脱离地图坐标系漂移。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
更隐蔽的问题是：某些 UI 框架（如 Ant Design）的全局 box-sizing: border-box 会影响 Leaflet 内部尺寸计算，导致比例尺文字被截断或刻度错位。
- 解决方法：给比例尺父容器加
leaflet-control-scale类，并在 CSS 中强制box-sizing: content-box - 避免对
#map元素使用transform: scale()，改用width/height配合map.invalidateSize() - 调试时右键检查元素，确认比例尺 DOM 是否在
.leaflet-control-container内，且未被其他绝对定位元素遮盖
移动端比例尺显示模糊或字号过小
默认比例尺在 iPhone 或 Android Chrome 上常出现文字发虚、刻度线细不可见，根本原因是设备像素比（window.devicePixelRatio）未参与渲染逻辑。
Leaflet 的 L.control.scale() 不读取 DPR，所以即使你用 rem 或 vw 设置字体，实际绘制仍按 CSS 像素来，物理分辨率被忽略。
- 临时方案：CSS 中对
.leaflet-control-scale-line加transform: scale(1.5)并配合transform-origin: left center，但需 JS 判断 DPR 动态设值 - 更稳做法：替换内部 DOM，用 SVG 绘制刻度线和文字，SVG 天然支持高清屏
- 别用
font-size: 12px硬写，改用font-size: clamp(10px, 1.2vw, 14px)让字号随容器响应
比例尺不是“加上去就行”的装饰控件，它的数值准确性直接受地图 CRS、DPR、CSS 盒模型、事件监听时机影响。最容易被忽略的是：没验证高纬度地区（如哈尔滨、奥斯陆）的显示值是否合理——那里同一 zoom 下的米/像素可能比赤道小 40%，控件却照常显示，用户会误判距离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
