cesium 指南针、图例插件

最新推荐文章于 2025-10-10 09:37:22 发布

原创最新推荐文章于 2025-10-10 09:37:22 发布 · 2.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #指南针 #指北针

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在现有页面上引入CesiumNavigation库，通过配置参数实现地图上的指南针、缩放控件和距离图例，同时隐藏版权信息。详细步骤包括下载静态资源和定制显示选项。

一、引入静态资源

<link href="dist/cesium-navigation.css" rel="stylesheet" />
<script type="text/javascript" src="dist/CesiumMeasure.js"></script>

静态资源下载地址：https://download.youkuaiyun.com/download/MICHAELKING1/12895319

二、在已有的页面基础上添加如下方法：

        viewer._cesiumWidget._creditContainer.style.display="none"; //清除版权信息

		// //加载指南针和图例
		var options = {};
		
		// 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
		options.defaultResetView = Cesium.Cartographic.fromDegrees(118.243976,26.614410, 1500.0);
		// 用于启用或禁用罗盘。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(viewer, options);