Cesium之基础控件
1. 引言
Cesium是一款三维地球和地图可视化开源JavaScript库,使用WebGL来进行硬件加速图形,使用时不需要任何插件支持,基于Apache2.0许可的开源程序,可以免费用于商业和非商业用途
Cesium官网:Cesium: The Platform for 3D Geospatial
Cesium GitHub站点:CesiumGS/cesium: An open-source JavaScript library for world-class 3D globes and maps (github.com)
API文档:Index - Cesium Documentation
本文描述Cesium的基础控件
2. 基础控件
2.1 基础控件
使用Cesium创建一个三维地球,一份简单的、完整的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMTk4ZTYyNy00MjkxLTRmZWYtOTg1MS0wOThjM2YzMzIzYzEiLCJpZCI6NzEyMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0ODMxNzI5OX0.rKV8Ldl_bgR3lVvNsbHhTX62j8JH8ADCIWAwk7tXpr8';
const viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
使用HTTP方式,加载出页面,Cesiun默认提供了这些控件:
- Geocoder : 一种地理位置搜索工具,用于显示相机访问的地理位置。默认使用微软的Bing地图
- HomeButton : 首页位置,点击之后将视图跳转到默认视角
- SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式
- BaseLayerPicker : 选择三维数字地球的底图(imagery and terrain)
- NavigationHelpButton : 帮助提示,如何操作数字地球
- Animation :控制视窗动画的播放速度
- CreditsDisplay : 展示商标版权和数据源
- Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间
- FullscreenButton : 视察全屏按钮
另外,Cesium默认支持的操作有:
操作 | 3D视图 | 2.5D视图 | 2D视图 |
---|---|---|---|
鼠标左键 | 绕地球旋转 | 地图上平移 | 地图上平移 |
鼠标右键 | 地图缩放 | 地图缩放 | 地图缩放 |
鼠标中键 | 倾斜地球 | 倾斜地图 | 无 |
滚轮 | 地图缩放 | 地图缩放 | 地图缩放 |
双指触控 | 倾斜地球 | 倾斜地图 | 无 |
CTRL + 鼠标左键 | 倾斜地球 | 倾斜地图 | 无 |
CTRL + 鼠标右键 | 倾斜地球 | 倾斜地图 | 无 |
2.2 Geocoder
Geocoder 主要就是地理编码相关的功能,地理编码是指将坐标对、地址或地名等位置描述转换为地球表面上某位置的过程
Cesium默认采用的是Bing的地理编码和POI检索,另外Bing在中文检索上体验不佳
可以在Geocoder 里搜索地名:
也可以直接输入坐标跳转:
2.3 HomeButton
点击之后将视图跳转到默认视角
默认视角是:
/**
* The default rectangle the camera will view on creation.
* @type Rectangle
*/
Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(
-95.0,
-20.0,
-70.0,
90.0
);
修改默认视角:
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0);//west, south, east, north
2.4 SceneModePicker
SceneModePicker是3D、2D和哥伦布模式(2.5D)的切换按钮
哥伦布模式是一个2.5D的透视视图,其中地图是平坦的,并且具有非零高度的对象被绘制在它上面
2.5 BaseLayerPicker
Imagery模块主要是Bing、Mapbox以及OpenStreetMap,以及ESRI四家地图服务
加载Mapbox地图需要设置Mapbox Token:
Cesium.MapboxApi.defaultAccessToken = 'Mapbox Token';
Sentinel-2 、NASA 的 Blue Marble、Earth at night 地图需要在 Cesium ion里开启服务:
Terrain提供地形数据,使地图呈现三维效果:
2.6 CreditsDisplay
关闭CreditsDisplay:
viewer._cesiumWidget._creditContainer.remove()
2.7 其他控件
其他控件参考:Viewer - Cesium Documentation
加载时如果不需要或者需要某些控件,修改Viewer的默认构造参数即可
例如,关闭Timeline 和Animation :
const viewer = new Cesium.Viewer('cesiumContainer', {
timeline: false,
animation: false,
});
3. 参考资料
[1]Index - Cesium Documentation
[2][CesiumJS]Cesium入门4 - 创建Cesium Viewer - Cesium中文网 (cesiumcn.org)
[3]Cesium:入门教程(二)之数据源加载_Dawn_www的博客-CSDN博客_cesium 数据源
[4]Cesium教程系列汇总 - fu*k - 博客园 (cnblogs.com)
Cesium之基础控件的更多相关文章
- React Native环境搭建以及几个基础控件的使用
之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...
- Cocos2d-JS项目之二:studio基础控件的使用
在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: var HelloWorldLayer = cc.Layer.extend({ sprite:null, ...
- [iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)
A.概述 在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能 1.按钮点击后,显示为“已下载”,并且不 ...
- Delphi一共封装(超类化)了8种Windows基础控件和17种复杂控件
超类化源码: procedure TWinControl.CreateSubClass(var Params: TCreateParams; ControlClassName: PChar); con ...
- Cocos2d-JS studio基础控件的使用
在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件 逻辑代码如下: 1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:nu ...
- Python Tkinter基础控件入门实例
分享一个Python Tkinter基础控件用法的入门例子,包括窗口的显示.显示内置图片.弹出窗口.菜单等. 例子,Python Tkinter基础控件的用法 # -*- coding: utf-8 ...
- iOS界面设计之基础控件的学习 --- UITextField
学习iOS界面设计也有段时间了,每次写到一些基础控件(如:UILable . UITextField)的时候就深觉应该总结一个函数来实现这些基础控件的属性设置,所以下面就是我对UITextField的 ...
- WPF基础控件
1.所有基础控件结束(英文) http://www.dotnetperls.com/tooltip-wpf 2.wpf- DataGrid 常用属性和事件 3.
- UWP&WP8.1 基础控件—TextBlock和TextBox
TextBlock:文本展示控件,有着强大的功能 TextBox:文本输入控件. 这两个控件是最为常用的基础控件. TextBlock 基础用法: 打开一个UWP项目,在XAML设计页面你可以从工具箱 ...
- SilverLight:基础控件使用(6)-Slider控件
ylbtech-SilverLight-Basic-Control:基础控件使用(6)-Slider控件 Slider 控件 Slider 控件的 ValueChanged 事件 1.A,返回顶部 S ...
随机推荐
- 【大数据-课程】高途-天翼云侯圣文-Day1:互联网大数据揭秘(大数据介绍&MR实现双十一举牌)
一.大厂职级 P7:年薪百万 二.大数据发展 1.职业路线和岗位角色 2.大数据行业发展 三.大数据的位置 1.热门行业 大数据承上启下 2.三者关系 啤酒和尿不湿:启发可以放在一块 3.大数据作用 ...
- 【每日一题】【使用list&使用辅助栈实现】2022年2月11日-NC90 包含min函数的栈
描述定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的 min 函数,输入操作时保证 pop.top 和 min 函数操作时,栈中一定有元素. 此栈包含的方法有:push(value): ...
- 18V转5V,15V转5V的LDO和DC芯片方案
18V 转 5V, 15V 转 5V 的 LDO:芯片的选择,特别是输入电压,在低电平 5V 以下的,基本上都是接近也可以.但是 5V 以上,如现在的 18V 和 15 的话,就不一样了.我们需要在选 ...
- OpenAI 推出超神 ChatGPT 注册教程来了
前几天,OpenAI 推出超神 ChatGPT,非常火爆.但是呢,因为不可抗力原因,大部分人无法体验到.这里我分享一下注册的攻略. 准备 首先能能访问 Google(前置条件,不能明确说,懂得都懂) ...
- Keras网络可视化方法
Keras网络可视化方法 Keras模型可视化 Keras可视化依赖的两个包 参考链接 Keras模型可视化 代码: from keras.utils import plot_model plot_m ...
- 帮你短时间拿下Git,Git详细教程(浓缩的都是精华)
Git学习笔记 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. 在团队开发中git是必不可少的,它是目前为止最流行的版本控制工具 Git是免费.开源的,由Li ...
- Burp Suite进阶
1.Scanner Burp Scanner主要用于自动检测Web系统的各种漏洞. 首先,确认Burp Suite正常启动并完成浏览器代理的配置.然后进入Burp Proxy,关闭拦截代理功能,快速浏 ...
- 【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)
CSS总结(一) shift+alt,选中多行 外链式 <link rel="stylesheet" href="./my.css"> 1 选择器 ...
- vivo 服务端监控体系建设实践
作者:vivo 互联网服务器团队- Chen Ningning 本文根据"2022 vivo开发者大会"现场演讲内容整理而成. 经过几年的平台建设,vivo监控平台产品矩阵日趋完善 ...
- JAVA中使用最广泛的本地缓存?Ehcache的自信从何而来 —— 感受来自Ehcache的强大实力
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 作为<深入理解缓存原理与实战设计 ...