Cesium（一）界面上的相关控件

最新推荐文章于 2024-08-08 07:34:54 发布
最新推荐文章于 2024-08-08 07:34:54 发布
阅读量1w 收藏 13
点赞数 3
分类专栏： Cesium 文章标签： Cesium GIS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_36065997/article/details/81228705
版权
本文介绍了Cesium中的一些关键界面控件，包括Geocoder、Home Button、Scene Mode Picker、Base Layer Picker等，并提供了两种方法（JS和CSS）来控制这些控件的显示和隐藏。通过JS可以方便地操作控件的可见性，而CSS则能实现不占据空间的隐藏效果。同时，文章提到了全屏按钮的特殊处理方式，因为其内联样式需特别处理。
摘要由CSDN通过智能技术生成

Cesium的显示页面

相关解释

① Geocoder
查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图

②Home Button
视角返回初始位置

③Scene Mode Picker
选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)

④Base Layer Picker
图层选择器，选择要显示的地图服务和地形服务

⑤Navigation Help Button
导航帮助按钮，显示默认的地图控制帮助

⑥Fullscreen Button
全屏按钮

⑦Timeline
时间线,指示当前时间，并允许用户跳到特定的时间

⑧Animation
动画器件，控制视图动画的播放速度

其他

  • Timeline上面的文字是版权显示，显示的是数据归属
  • 画布上显示的星空是Cesium的默认图片
  • 画布上的地球是加载进来的服务

控件的显示和隐藏

法一：利用JS

//新建一个Cesium服务，将画布嵌入到id是cesiumCont
最低0.47元/天 解锁文章
优雅1217
关注
专栏目录
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 1559
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
025：cesium所有面板上默认控件Widgets的显示与隐藏
大剑师兰特的GIS世界
03-18 402
第025个本示例的目的是介绍如何在vue+cesium中分别控制面板上所有默认控件Widgets的显示与隐藏，这里包括动画、时间线、版权、全屏、home窗口等。
Cesium--控件
ykyorky的博客
12-24 1670
Cesium官方网站提供的release版本，默认的时候会显示一些控件，但是在实际的应用过程中，我们往往需要的只是那个球（globe），那么那些显示的控件表示的含义都是什么，以及如何将其隐藏呢？    一、控件的含义 geocoder：地理编码，查找位置的工具 homeButton：相机返回默认视图显示的位置 sceneModePicker：现在不同的地图显示模式，如3D、2D和2.5D ...
探索无限可能：Cesium for Unity - 开启3D地理空间应用的新篇章
最新发布
gitblog_00005的博客
08-08 580
探索无限可能：Cesium for Unity - 开启3D地理空间应用的新篇章 cesium-unityBringing the 3D geospatial ecosystem to Unity项目地址:https://gitcode.com/gh_mirrors/ce/cesium-unity Cesium for Unity 是一个创新的插件，它将3D地图服务与Unity 3D引擎紧密结...
Cesium控件及图层加载
FrancisLee0225的博客
08-14 1904
var viewer = new Cesium.Viewer(“cesiumCont”,{ geocoder:false, //查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图 homeButton:false, //视角返回初始位置 sceneModePicker:false, //选择视角的模式，有三种：3D，2D，哥伦布视图(CV) baseLayerPicker:true, //图层选择器，选择要显示的地图服务和地形服务 navigationHelpButton:false, /
vue+cesium 创建及显示
dxl395957的博客
10-19 489
首先创建vue项目 vue create 你的项目名 然后引入cesium npm i cesium --save 继续安装上loader npm install @open-wc/webpack-import-meta-loader --save-dev 创建一个vue.config.js 修改里面配置 const path = require("path"); const CopyWebpackPlugin = require('copy-webpack-plugin'); co
cesium 设置时间_Cesium应用篇：3控件（1）Clock
weixin_39922929的博客
12-20 1485
创建跟Clock相关的主要有Animation控件和Timeline控件，通常两者会放在一起使用。在Cesium中，Viewer默认开启这两个控件，如果你想要不显示控件，可以在Viewer初始化中设置其为false，代码如下：但这种方式只能在初始化时设置，无法动态的切换显示状态，灵活度上稍显不足。如果你有这方面的需要，可以使用如下这种方式，同时Widget是自适应，也会动态调整布局。基于Viewe...
Cesium应用篇：Clock控件
jianshi2023的博客
03-17 975
当然，也可以自己实现css，不过比较繁琐，而且你只能修改风格，Animation的形状是内部用SVG绘制的，并绑定了对应的事件，要想DIY，工作量更大。首先，Viewer在初始化时，内部会创建一个Clock，所以建议用户使用viewer.cesiumWidget.clock而不是自己创建Clock，毕竟在一个应用内，时间通常都是标准的，创建多个Clock反而混淆了。可见，只要熟练运用Clock的方法，我们可以很好的微调相关控件的细节，更好的满足不同的需求，源码面前了无秘密，这也是源码带给我们阅读的乐趣。
Cesium教程(二)：Cesium默认控件详解
WwLK123的博客
05-18 732
Cesium初始界面在默认情况下，附带了一些有用的小控件，如下图所示，可以执行一些基本的功能。
CesiumJS第1篇，CesiumJS在项目中的详细使用过程，在Vue中使用CesiumJS（WebGIS中的Cesium地图可视化应用）
weixin_65793170的博客
06-21 1万+
Cesium是一种基于WebGL开源的虚拟地球技术，可以用于构建高性能、跨平台的三维地球应用程序，它支持多种数据格式和地图服务，可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件，方便开发者进行二次开发和定制化，且可免费商用，在航空航天、国防、城市规划、教育等领域得到了广泛应用。
Unity Cesium 加载本地数据（DEM、DOM）
唐宋元明清临的博客
08-16 3339
cesium for unity自带数据源，联网状态下能够实时加载影响和地型等数据，十分方便。但不少项目需要离线使用，而官方只给出api并没有给出示例资源，这就需要我们自己处理数据进行加载。加载本地数据的原理非常简单，将资源转换到可用格式，然后发布成链接的形式，然后在对应的软件载体配置链接，即可看到效果。简单记录本地加载地形和影像数据。
cesium显示帧率FPS控件
专注GIS开发
01-18 6813
cesium显示帧率控件
cesium 绑定dom弹窗（跟随模型）
qq_36266612的博客
11-13 3030
思路： 1.在页面中创建一个div标签； 2.确定标签在三维场景中的三维位置；并计算三维位置的屏幕坐标； 3.在每一帧的渲染中都计算一下这个三维坐标的屏幕位置，并把屏幕位置赋给标签。 4.当转到地球背面时，如果不想显示弹窗，则隐藏。 具体实现： 1.创建div标签 标签样式： .tag{ position: absolute; background-color: MidnightBlue; background-color:rgba
Cesium 自定义BaseLayerPicker
一路走一路学，总会不落后
02-04 358
除了使用baseLayerPicker中默认的地图数据源，我们可以使用cesium提供的ProviderViewModel接口自己扩展数据源。使用自定义图层，需要在初始化viewer的时候，需要开启。
Cesium笔记----关于viewer的配置及常用东西
weixin_49608678的博客
12-24 3843
关于viewer var viewer = new Cesium.Viewer('cesiumContainer', { animation: false, //左下角的动画仪表盘 baseLayerPicker: false, //右上角的图层选择按钮 geocoder: false, //搜索框 homeButton: false, //home按钮 sceneModePicker: false, //模式切换按钮 timeline
Cesium加载模型两种方式
wo_buzhidao的博客
11-16 1万+
Cesium加载模型两种方式 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加载离线arcgis卫星、天地图标签、风机模型</title> <link rel="stylesheet" href
cesium初探之加载三维模型
热门推荐
凡事有果必有因
12-27 2万+
项目需要用到二三维地图切换，本来准备研究ArcGIS js for Web 3d，但考虑到版权的问题，决定试着用cesium来做，于是花了2天时间抱着试试看的心态把cesium从环境配置到加载三维模型完整的走了一遍。
cesium 加载TMS影像（已经切片）
weixin_33724059的博客
06-20 6419
TMS影像数据格式 加载影像的代码： var layers = viewer.scene.imageryLayers; var blackMarble = layers.addImageryProvider( new Cesium.createTileMapServiceImageryProvider({ url : url ...
Cesium view控件
07-13
Cesium提供了一些内置的视图控件，用于在场景中控制视角和相机的视图。以下是Cesium中常用的视图控件： 1. NavigationHelpButton（导航帮助按钮）：这个控件是一个帮助按钮，可以显示一些关于场景导航的基本操作...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值