品牌网站建设福州,网站出租目录做菠菜 有什么坏处,天津网站开发公司,vps安装wordpress文章目录 0.引言1.Cesium环境搭建1.1安装Node.js环境1.2配置Cesium依赖 2.搭建第一个Cesium程序2.1引入源码编译结果2.2创建html文件2.3编写第一个Cesium程序2.4申请许可密钥2.5发布Cesium程序服务 3.界面介绍4.默认控件介绍 0.引言
现有的gis开发方向较流行的是webgis开发其中Cesium是一款开源的WebGIS库主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能并能实现三维可视化开发。Cesium适用于地球科学研究、军事情报分析、航空航天领域以及虚拟现实应用等方面。本文是基于Cesium教程进行实践操作后的总结以使新手能快速入门Cesium。
1.Cesium环境搭建
1.1安装Node.js环境
1下载Node.js安装包 进入Node.js官网的下载页面进行下载 https://nodejs.org/en/
2安装Node.js ①直接双击Node.js。 若安装时报错这说明需要以管理员身份运行cmd然后在cmd中运行Node.js安装程序。 ②安装Node.js后为检查是否安装成功在cmd中输入node -v出现版本号说明安装成功。
1.2配置Cesium依赖
1下载Cesium代码包 访问Cesium官网下载推荐代码包 https://cesium.com/downloads/
2安装Cesium依赖 安装包下载完成后将其解压进入解压缩后的目录输入“npm install”安装Cesium依赖。
成功安装Cesium依赖结果如下有少量缺陷报红色错误不影响依赖Cesium主要功能。
3启动服务 在Cesium依赖安装完成后先输入“node server.js”新版本为server.cjs来开启服务然后复制所开启的服务网址并在浏览器中打开浏览器必须支持WebGL推荐使用Chrome浏览器
4通过http-server发布服务 ①安装http-server 打开命令行输入“npm install http-server -g”进行安装。 ②在文件目录输入“http-server”即可发布服务复制发布后的网址并在浏览器打开查看发布的服务。 若文件目录位于D:\Cesium_Test在该目录下启动终端并输入指令发布服务。
以上两个地址都可访问访问结果如下。 若根目录中有index.html将默认打开该文件。
2.搭建第一个Cesium程序
2.1引入源码编译结果
Cesium程序开发的第一步就是创建一个新的文件夹并在文件夹中引入Cesium源码中的编译成果即Cesium源码中的Build文件夹。
2.2创建html文件
打开前端编辑器如Visual Studio Code首先选择并打开我们新建的文件夹然后新建文件名为index、后缀为.html的文件。
2.3编写第一个Cesium程序 !DOCTYPE html
html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个Cesium程序/title script src./Build/Cesium/Cesium.js/script link relstylesheet href./Build/Cesium/Widgets/widgets.css style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style
/head body div idcesiumContainer /div script Cesium.Ion.defaultAccessToken 你的密钥;//输入密钥 var viewer new Cesium.Viewer(cesiumContainer, { geocoder: true, //是否显示地名查找工具 homeButton: true, //是否显示首页位置工具 sceneModePicker: true, //是否显示视角模式切换工具 baseLayerPicker: true, //是否显示默认图层选择工具 navigationHelpButton: true, //是否显示导航帮助工具 animation: true, //是否显示动画工具 timeline: true, //是否显示时间轴工具 fullscreenButton: true, //是否显示全屏按钮工具 }); /script
/body /html2.4申请许可密钥
申请一个token登录网址注册并申请token https://cesium.com/ion/signin/tokens
2.5发布Cesium程序服务
在项目文件夹根目录启动cmd然后输入发布服务指令http-server。 访问第一个网址结果如下
3.界面介绍 相机漫游方式 ①住鼠标左键拖曳拖动相机在三维地球平面平移。 ②按住鼠标右键拖曳缩放相机。 ③按住鼠标右键拖曳缩放相机。 ④按住鼠标滚轮拖曳根据当前地球的屏幕中点旋转相机。
4.默认控件介绍
1Geocoder Geocoder是位置查找工具。使用该控件可以输入要查找的地址且在找到后会将相机跳转并对准找到的结果。
2HomeButton HomeButton是首页位置工具。单击该控件后会将相机跳转到默认全球视角也可以通过代码修改跳转位置。
3SceneModePicker SceneModePicker是视角模式切换工具。使用该控件可以设置视角模式为3D、2D及哥伦布视图CV。 当切换为2D视角模式时地图只可以平移不可以旋转 当切换为哥伦布视图视角模式时地图可以平移和旋转但是始终保持平面显示。
4BaseLayerPicker BaseLayerPicker是默认图层选择工具用于选择要显示的地图服务和地形服务这里选择修改底图数据源为ArcGIS World Imagery。
5NavigationHelpButton NavigationHelpButton是导航帮助工具用于显示默认的地图控制和帮助选项。
6Animation Animation是动画工具用于控制视图动画的播放速度可以设置地球暂停或运动及设置自转速度。
7TimeLine TimeLine是时间轴工具用于指示当前时间并且允许用户跳转到指定时间。
8FullscreenButton FullscreenButton是全屏按钮工具。单击该控件可以进入全屏模式再次单击该控件即可退出全屏模式。
参考资料 [1] 郭明强. 《WebGIS之Cesium三维软件开发》; 2023-04-01 [accessed 2024-01-23]. [2] 狮子座的男孩. 安装 node 过程中解决The installer has encountered an unexpected errorinstalling this package 的问题; 2023-06-08 [accessed 2024-01-18].
