legend-north-scale

本文回答：图例 / 指北针 / 比例尺 / 鹰眼图 等常用控件叠加。

一、vjmap 内置控件

二、使用

map.addControl(new vjmap.NavigationControl(), "top-right");
map.addControl(new vjmap.ScaleControl({ maxWidth: 100, unit: "metric" }));
map.addControl(new vjmap.MousePositionControl({ showZoom: true, showLatLng: true }), "bottom-left");
map.addControl(new vjmap.FullscreenControl());

三、图例（Legend）

vjmap 没有内置图例控件，通常自建 div：

<div id="legend" style="position: absolute; bottom: 20px; right: 20px; background: #fff; padding: 8px; border-radius: 4px;">
  <div><span style="display:inline-block;width:12px;height:12px;background:#f00"></span> 一级管线</div>
  <div><span style="display:inline-block;width:12px;height:12px;background:#0f0"></span> 二级管线</div>
</div>

四、指北针

vjmap 未单独提供指北针控件，但 NavigationControl 自带旋转按钮（随 bearing 转动）。

独立指北针：

<div id="compass" style="position: absolute; top: 20px; left: 20px; width: 48px; height: 48px; background: url('compass.svg') no-repeat center / contain"></div>

map.on("rotate", () => {
  document.getElementById("compass").style.transform = `rotate(${-map.getBearing()}deg)`;
});

五、比例尺

vjmap 内置：

map.addControl(new vjmap.ScaleControl({
  maxWidth: 100,
  unit: "metric"          // "imperial" / "nautical" 等
}));

对 CAD 地图，比例尺单位需按 CAD 图的单位（米 / 毫米）。可用自定义：

class CadScaleControl {
  onAdd(map) {
    this.map = map;
    this.container = document.createElement("div");
    this.container.className = "vjmapgis-ctrl vjmapgis-ctrl-scale";  // vjmap 控件类前缀是 vjmapgis-ctrl-*
    map.on("move", this.update.bind(this));
    this.update();
    return this.container;
  }
  update() {
    const width = 100;
    const p0 = this.map.unproject([0, 0]);
    const p1 = this.map.unproject([width, 0]);
    const prj = this.map.getMapProjection();
    const cadDist = prj.fromLngLat(p1).sub(prj.fromLngLat(p0)).mag();  // GeoPoint: sub/mag（无 length()）
    this.container.innerText = `${cadDist.toFixed(2)} 单位 / 100px`;
  }
  onRemove() {
    this.container.parentNode.removeChild(this.container);
  }
}
map.addControl(new CadScaleControl(), "bottom-left");

说明：上面 className 是 CSS 类名；vjmap 底层也会给内置控件打 vjmapgis-ctrl / vjmapgis-ctrl-group 等类名，DevTools 里都能看到，自定义控件建议沿用同样的类名以复用样式。

六、鹰眼（小地图）

内置 vjmap.MiniMapControl（见 interaction/controls 第六节，containerStyle 可配缩放/位置）：

map.addControl(new vjmap.MiniMapControl({
  containerStyle: { transform: "scale(0.6)", transformOrigin: "100% 0%" }
}), "top-right");

七、常见坑

1. 控件重叠：多个控件都放 top-left。选不同位置或自定义 DOM。
2. 控件 CSS 没加载：vjmap 的样式文件 vjmap.min.css 必须引入，否则缩放按钮不显示。
3. CSS 样式被覆盖：项目里写了 .vjmapgis-ctrl button { ... } 的全局样式可能影响；用 :scope 或更具体的选择器。
4. Ant Design 等 UI 库：控件可能被遮挡；z-index 设 > ant 组件。