cesium自定义指南针

前端灵派派

墨衍会员 · AI 创作全网分发码龄7年

关注

VIP免费原创 2025-08-13 14:32:59 748 阅读 AI 写同款· GEO 优化 ›

cesium项目中集成指北针（原生版）【代码】cesium项目中集成指北针（原生版）阅读详情

一、项目介绍

项目需要一个指南针，用鼠标按住旋转指针，会让3d地图旋转，点击中心点重置方位。当然可以使用插件cesium-navigation-es6，但是样式不好修改，所以我自定义了一个指南针。

实现思路

在Cesium中，相机的方向由 heading、pitch 和 roll 三个角度参数控制，它们共同定义了相机在3D空间中的朝向。要让地图旋转，只要控制相机的角度即可。

heading（偏航角），绕（z）轴旋转，类似于指南针的方向，范围：0 到 2π 弧度（或 0° 到 360°）。

0 或 2π 表示正北方向（默认Cesium的初始朝向）。
π/2（90°）表示正东。
π（180°）表示正南。
3π/2（270°）表示正西。

Pitch（俯仰角），绕（y）轴旋转，控制相机的“抬头”或“低头”。范围：-π/2 到 π/2，超过会导致视角翻转。

0 表示相机水平朝前（平行于地面）。
π/2（90°）表示相机垂直向下（俯视地面）。
-π/2（-90°）表示相机垂直向上（仰视天空）。

Roll（翻滚角），绕（X）轴旋转的角度（倾斜左右）。在飞行模拟中模拟飞机倾斜，但Cesium中较少直接使用（默认通常为 0）

所以我们要先计算鼠标点击指南针时向左向右偏移的角度，将这个角度值转为相机旋转的弧度值，并重新设置给相机。

指南针实现

首先先创建一个div和css样式画出一个指南针：

 <div class="compass-container">
    <div
      class="compass-outer-ring"
      ref="compassOuterRing"
      @click="handleClick"
      @mousedown="onMouseDown"

最低0.47元/天解锁文章

标签

#前端

基于Cesium的指南针插件因为cesium自身没有携带指南针插件，所以需要引用其他的插件这里我采用的是：CesiumNavigation.umd 作者github库：CesiumNavigation.umd 由于国内访问慢，我把库引到了gitee上，便于国内访问：CesiumNavigation.umd 也可以直接在这里下载使用：CesiumNavigation.umd 使用方法在html文件中引用Cesium和Cesium必要样式表在html文件中引用CesiumNavigation.umd.js和cesiu.. 阅读详情