Cesium 指北针、导航罗盘、缩放按钮

mouka~

已于 2022-10-13 13:35:54 修改

阅读量3.3k

点赞数 2

分类专栏： Cesium 文章标签： java javascript servlet

于 2022-10-13 12:02:51 首次发布

本文链接：https://blog.csdn.net/qq_38370387/article/details/127298646

版权

Cesium 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何通过编译cesium-navigation-umd实现自定义导航功能，包括指北针、导航罗盘及缩放按钮等，并提供了配置示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过对cesium-navigation-umd进行编译适配自己这边的代码

Cesium挂载在Windows下，通过在html文件中引用CesiumNavigation.umd.js和cesium-navigation.css这两个文件来实现指北针和导航罗盘、缩放按钮；

这两个文件是自己为了适配自己的代码重新进行编译过的（去掉了依赖安装以及进行了简单的扩展来适配自己的项目）。

加载代码：

  //注册导航栏
    var options = {};
    // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
    options.defaultResetView = {
      destination: Cesium.Cartesian3.fromDegrees(
        config.defaultResetView.x,
        config.defaultResetView.y,
        config.defaultResetView.z,
      ),
      duration: config.defaultResetView.duration,
      orientation: {
        heading: window.Cesium.Math.toRadians(config.defaultResetView.heading), // 水平偏角，默认正北 0
        pitch: window.Cesium.Math.toRadians(config.defaultResetView.pitch), // 俯视角，默认-90，垂直向下
      },
    };
    // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
    options.enableCompass = true;
    // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
    options.enableZoomControls = true;
    // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
    options.enableDistanceLegend = true;
    // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
    options.enableCompassOuterRing = true;

    CesiumNavigation.umd(window.viewer, options);