Cesium之原生控件

1. 控件概述

Cesium的开始，基本上是从new一个Viewer开始

 // ...
<div id="cesiumContainer"></div>
<script>
    const viewer = new Cesium.Viewer('cesiumContainer')
</script>
// ...

Cesium初始化时配置原生控件也是在Viewer的构造函数里配置的，有关控件的配置参数可以参考下面的表格，表格来源：Viewer - Cesium Documentation

Name	Type	Default	Description
`animation`	boolean	true	If set to false, the Animation widget will not be created.
`baseLayerPicker`	boolean	true	If set to false, the BaseLayerPicker widget will not be created.
`fullscreenButton`	boolean	true	If set to false, the FullscreenButton widget will not be created.
`vrButton`	boolean	false	If set to true, the VRButton widget will be created.
`geocoder`	boolean \| Array	true	If set to false, the Geocoder widget will not be created.
`homeButton`	boolean	true	If set to false, the HomeButton widget will not be created.
`infoBox`	boolean	true	If set to false, the InfoBox widget will not be created.
`sceneModePicker`	boolean	true	If set to false, the SceneModePicker widget will not be created.
`selectionIndicator`	boolean	true	If set to false, the SelectionIndicator widget will not be created.
`timeline`	boolean	true	If set to false, the Timeline widget will not be created.
`navigationHelpButton`	boolean	true	If set to false, the navigation help button will not be created.
`projectionPicker`	boolean	false	If set to true, the ProjectionPicker widget will be created.

不防把这些控件都显示出来看看：

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
 
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    // Your access token can be found at: https://ion.cesium.com/tokens.
    // Replace `your_access_token` with your Cesium ion access token.
 
    // Cesium.Ion.defaultAccessToken = 'your_access_token';
 
    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      animation: true,
      baseLayerPicker: true,
      fullscreenButton: true,
      vrButton: true,
      geocoder: true,
      homeButton: true,
      infoBox: true,
      sceneModePicker: true,
      selectionIndicator: false,
      timeline: true,
      navigationHelpButton: true,
      projectionPicker: true
    });
  </script>
  </div>
</body>
 
</html>

上图中所显示的，就是Cesium原生自带的控件，分别是：

名字	图中序号
`animation`	8
`baseLayerPicker`	5
`fullscreenButton`	11
`vrButton`	10
`geocoder`	1
`homeButton`	2
`sceneModePicker`	3
`projectionPicker`	4
`timeline`	9
`navigationHelpButton`	6

除了上述控件外，还有selectionIndicator和infoBox图中没有显示，下图中的 1 和 2 分别就是selectionIndicator和infoBox

2. 控件构造

根据Viewer的初始化函数，可以到对应的Cesium源码找到相关控件的代码，这里以 NavigationHelpButton 为例

首先是Viewer的构造函数里：

 // Navigation Help Button
let navigationHelpButton;
if (
    !defined(options.navigationHelpButton) ||
    options.navigationHelpButton !== false
) {
    let showNavHelp = true;
	// ...
    navigationHelpButton = new NavigationHelpButton({
        container: toolbar,
        instructionsInitiallyVisible: defaultValue(
            options.navigationInstructionsInitiallyVisible,
            showNavHelp
        ),
    });
}

很简单，就是根据Viewer的配置觉得是否创建

进入到NavigationHelpButton.js里：

 function NavigationHelpButton(options) {
 
  const container = getElement(options.container);
 
  const viewModel = new NavigationHelpButtonViewModel();
  // ...
  const clickInstructions = document.createElement("div");
  clickInstructions.className =
    "cesium-click-navigation-help cesium-navigation-help-instructions";
  clickInstructions.setAttribute(
    "data-bind",
    'css: { "cesium-click-navigation-help-visible" : !_touch}'
  );
  clickInstructions.innerHTML = `\
            <table>\
                <tr>\
                    <td><img src="${buildModuleUrl(
                      "Widgets/Images/NavigationHelp/MouseLeft.svg"
                    )}" width="48" height="48" /></td>\
                    <td>\
                        <div class="cesium-navigation-help-pan">Pan view</div>\
                        <div class="cesium-navigation-help-details">Left click + drag</div>\
                    </td>\
                </tr>\
                <tr>\
                    <td><img src="${buildModuleUrl(
                      "Widgets/Images/NavigationHelp/MouseRight.svg"
                    )}" width="48" height="48" /></td>\
                    <td>\
                        <div class="cesium-navigation-help-zoom">Zoom view</div>\
                        <div class="cesium-navigation-help-details">Right click + drag, or</div>\
                        <div class="cesium-navigation-help-details">Mouse wheel scroll</div>\
                    </td>\
                </tr>\
                <tr>\
                    <td><img src="${buildModuleUrl(
                      "Widgets/Images/NavigationHelp/MouseMiddle.svg"
                    )}" width="48" height="48" /></td>\
                    <td>\
                        <div class="cesium-navigation-help-rotate">Rotate view</div>\
                        <div class="cesium-navigation-help-details">Middle click + drag, or</div>\
                        <div class="cesium-navigation-help-details">CTRL + Left/Right click + drag</div>\
                    </td>\
                </tr>\
            </table>`;
 
  instructionContainer.appendChild(clickInstructions);
  // ...
 
  knockout.applyBindings(viewModel, wrapper);
 
  this._container = container;
  this._viewModel = viewModel;
  this._wrapper = wrapper;
 
  this._closeInstructions = function (e) {
    if (!wrapper.contains(e.target)) {
      viewModel.showInstructions = false;
    }
  };
 
  if (FeatureDetection.supportsPointerEvents()) {
    document.addEventListener("pointerdown", this._closeInstructions, true);
  } else {
    document.addEventListener("mousedown", this._closeInstructions, true);
    document.addEventListener("touchstart", this._closeInstructions, true);
  }
}

可以看到这里主要就是编写UI部分的代码并且绑定点击事件，代码里面提到的NavigationHelpButtonViewModel是一种基于knockout.js实现的ViewModel（可以类比于Vue的ViewModel）

查看整个NavigationHelpButton的目录：

 > ls NavigationHelpButton
 
    目录: \cesium\packages\widgets\Source\NavigationHelpButton
 
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----         2023/12/4     11:57           1055 lighter.css
-a----         2023/12/4     11:57           2130 NavigationHelpButton.css
-a----         2023/12/4     11:57          10807 NavigationHelpButton.js
-a----         2023/12/4     11:57           1906 NavigationHelpButtonViewModel.js

可以看到NavigationHelpButton控件主要由ViewModel、类函数NavigationHelpButton.js、相关CSS构成

作为使用Cesium的开发者，能不能自定义控件并添加到Cesium中呢？

从上面的介绍来看，并不容易，Cesium并没有提供一个扩展接口给开发者统一管理控件

3. 参考资料

[1] Index - Cesium Documentation

posted @ 2024-02-26 23:52 当时明月在曾照彩云归阅读(162) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Cesium之基础控件

· Cesium渲染调度

· cesium基础组件的显示与隐藏

· Cesium开发小技巧（一）

· Cesium中Viewer界面介绍及组件显隐

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

历史上的今天：
2023-02-26 Cesium渲染模块之Buffer

公告

昵称：当时明月在曾照彩云归
园龄： 3年9个月
粉丝： 63
关注： 8

+加关注

2025年3月

日

一

二

三

四

五

六

当时明月在曾照彩云归

个人的日常随笔

Cesium之原生控件

1. 控件概述

2. 控件构造

3. 参考资料

公告

搜索

常用链接

积分与排名

阅读排行榜

推荐排行榜

	// ...
	<div id="cesiumContainer"></div>
	<script>
	const viewer = new Cesium.Viewer('cesiumContainer')
	</script>
	// ...

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<!-- Include the CesiumJS JavaScript and CSS files -->
	<script src="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Cesium.js"></script>
	<link href="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
	</head>

	<body>
	<div id="cesiumContainer"></div>
	<script type="module">
	// Your access token can be found at: https://ion.cesium.com/tokens.
	// Replace `your_access_token` with your Cesium ion access token.

	// Cesium.Ion.defaultAccessToken = 'your_access_token';

	// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
	const viewer = new Cesium.Viewer('cesiumContainer', {
	animation: true,
	baseLayerPicker: true,
	fullscreenButton: true,
	vrButton: true,
	geocoder: true,
	homeButton: true,
	infoBox: true,
	sceneModePicker: true,
	selectionIndicator: false,
	timeline: true,
	navigationHelpButton: true,
	projectionPicker: true
	});
	</script>
	</div>
	</body>

	</html>

	// Navigation Help Button
	let navigationHelpButton;
	if (
	!defined(options.navigationHelpButton) \|\|
	options.navigationHelpButton !== false
	) {
	let showNavHelp = true;
	// ...
	navigationHelpButton = new NavigationHelpButton({
	container: toolbar,
	instructionsInitiallyVisible: defaultValue(
	options.navigationInstructionsInitiallyVisible,
	showNavHelp
	),
	});
	}

	function NavigationHelpButton(options) {

	const container = getElement(options.container);

	const viewModel = new NavigationHelpButtonViewModel();
	// ...
	const clickInstructions = document.createElement("div");
	clickInstructions.className =
	"cesium-click-navigation-help cesium-navigation-help-instructions";
	clickInstructions.setAttribute(
	"data-bind",
	'css: { "cesium-click-navigation-help-visible" : !_touch}'
	);
	clickInstructions.innerHTML = `\
	<table>\
	<tr>\
	<td><img src="${buildModuleUrl(
	"Widgets/Images/NavigationHelp/MouseLeft.svg"
	)}" width="48" height="48" /></td>\
	<td>\
	<div class="cesium-navigation-help-pan">Pan view</div>\
	<div class="cesium-navigation-help-details">Left click + drag</div>\
	</td>\
	</tr>\
	<tr>\
	<td><img src="${buildModuleUrl(
	"Widgets/Images/NavigationHelp/MouseRight.svg"
	)}" width="48" height="48" /></td>\
	<td>\
	<div class="cesium-navigation-help-zoom">Zoom view</div>\
	<div class="cesium-navigation-help-details">Right click + drag, or</div>\
	<div class="cesium-navigation-help-details">Mouse wheel scroll</div>\
	</td>\
	</tr>\
	<tr>\
	<td><img src="${buildModuleUrl(
	"Widgets/Images/NavigationHelp/MouseMiddle.svg"
	)}" width="48" height="48" /></td>\
	<td>\
	<div class="cesium-navigation-help-rotate">Rotate view</div>\
	<div class="cesium-navigation-help-details">Middle click + drag, or</div>\
	<div class="cesium-navigation-help-details">CTRL + Left/Right click + drag</div>\
	</td>\
	</tr>\
	</table>`;

	instructionContainer.appendChild(clickInstructions);
	// ...

	knockout.applyBindings(viewModel, wrapper);

	this._container = container;
	this._viewModel = viewModel;
	this._wrapper = wrapper;

	this._closeInstructions = function (e) {
	if (!wrapper.contains(e.target)) {
	viewModel.showInstructions = false;
	}
	};

	if (FeatureDetection.supportsPointerEvents()) {
	document.addEventListener("pointerdown", this._closeInstructions, true);
	} else {
	document.addEventListener("mousedown", this._closeInstructions, true);
	document.addEventListener("touchstart", this._closeInstructions, true);
	}
	}

	> ls NavigationHelpButton

	目录: \cesium\packages\widgets\Source\NavigationHelpButton

	Mode LastWriteTime Length Name
	---- ------------- ------ ----
	-a---- 2023/12/4 11:57 1055 lighter.css
	-a---- 2023/12/4 11:57 2130 NavigationHelpButton.css
	-a---- 2023/12/4 11:57 10807 NavigationHelpButton.js
	-a---- 2023/12/4 11:57 1906 NavigationHelpButtonViewModel.js