Cesium 入坑记(一)

本文指导如何从零开始安装Cesium,涉及Node.js、npm管理、依赖安装,重点介绍了Document和Sandcastle的作用。适合初学者快速上手前端可视化项目。

Cesium入门及其相关环境搭配

我也不知道研究生生活第一个项目居然是搞这个,研究半天才发现就是前端有关js的东西,我也是醉了… 所以还是需要一些前端的基础的,话不多说,开始第一个项目的练习!

Cesium个人认为主要是用来进行展示的,类似可视化,入门Cesium首先要去搭建相关环境,安装node和npm,npm相当于一个包管理器,npm太慢的话可以换成cnpm,这些网上百度有很多教程,我就不多说了。

再去Cesium官网或者github网站下载官方包。

获取到安装包之后

  1. 解压
  2. 从命令行中进入当前目录 (非常非常重要,当时就被这个弄糊涂了)
  3. 开始安装依赖,输npm install,安装的cnpm就用cnpm install,之后看文件目录里面是server.js还是server.cjs,再输入node server.js或者node server.js,非常重要,新版的是server.cjs 当时网上教程全是node server.js,当时给我整自闭了,好吧,还是我太菜了。

打开浏览器(推荐chrome),输入http://localhost:8080/,如果出现类似界面,就代表成功。运行成功截图
其中感觉最重要的是Document和Sandcastle

Document

就是查询Cesium提供的API的文档

Sandcastle

这个顾名思义是个沙盒,功能很强,不仅有相关的官方示例还可以自己在线编辑,查看相关效果

最后顺便说一下自己用的编辑器是vs code,感觉还不错。

Cesium个强大的开源JavaScript库,用于创建高度交互式的三维地图和地球模拟应用。如果你想通过Cesium在地图上展示第岛链(即日本列岛、琉球群岛和菲律宾群岛等位于太平洋西部的系列岛屿),你可以按照以下步骤操作: 1. **设置Cesium环境**:首先,你需要在HTML页面中引Cesium库,并创建cesiumViewer容器。 ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.css" /> </head> <body> <div id="cesiumContainer"></div> <script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script> </body> </html> ``` 2. **初始化Cesium Viewer**: ```javascript <script> var viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider : Cesium.createWorldTerrain(), baseLayerPicker : false }); </script> ``` 这将加载整个世界地形作为基础。 3. **添加地理信息**: 为了显示特定区域,如第岛链,可以使用Cesium的`PolygonGraphics`绘制多边形。你需要准备每个岛屿对应的经纬度数据,然后创建个`PolygonGraphics`实例并添加到场景中。 ```javascript var islandData = [ // 日本列岛、琉球群岛和菲律宾群岛的具体经纬度数组... ]; for (var i = 0; i < islandData.length; i++) { var polygon = viewer.entities.add({ name : 'First Island Chain - ' + islandData[i].name, polygon : { hierarchy : islandData[i].vertices } }); } ``` 4. **运行应用**: 保存并运行HTML文件,Cesium Viewer将会显示包含第岛链的地图。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值