添加罗盘

loading

此功能已提供内置插件，直接调用即可。

// 添加罗盘DOM中
const compass = plugin.createCompass(viewer.controls);
const compassContainer = document.querySelector("#compass-container");
compassContainer && compassContainer.appendChild(compass.dom);

下面简单说下原理：

three-tile 罗盘是通过 DOM 添加的的，取得地图旋转角度并赋为 DOM 的属性即可。

通过 threejs 的控制器（controls），很容易取得当前垂直和水平旋转弧度，有了这两个值，做出罗盘就非常简单了，至于漂亮不漂亮，那就看你的 css 能力了，我不太行。

https://threejs.org/docs/index.html?q=controls#examples/zh/controls/OrbitControls.getAzimuthalAngle

TIP

.getAzimuthalAngle () : radians 获得当前的水平旋转，单位为弧度。

.getPolarAngle () : radians 获得当前的垂直旋转，单位为弧度。

.getDistance () : Float 返回从相机到目标的距离。

function showCompass(viewer: plugin.GLViewer) {
  // viewer.controls.saveState();
  const compass = document.querySelector<HTMLElement>("#compass");
  const plane = document.querySelector<HTMLElement>("#compass-plane");
  const text = document.querySelector<HTMLElement>("#compass-text");
  if (compass && plane && text) {
    viewer.controls.addEventListener("change", () => {
      plane.style.transform = `rotateX(${viewer.controls.getPolarAngle()}rad)`; 
      text.style.transform = `rotate(${viewer.controls.getAzimuthalAngle()}rad)`; 
    });
    compass.addEventListener("click", viewer.controls.reset);
  }
}

TIP

三维场景下，由于透视关系很难用一个数值来表示缩放倍数，所以地图没有比例尺。但你可以用 getDistance()方法获取相机到地图中心的距离，得到一个大概的缩放倍数，显示一个标尺。