Cesium入门----5行代码快速搭建第一个Cesium App

最新推荐文章于 2024-09-18 23:20:34 发布

GISer小康

最新推荐文章于 2024-09-18 23:20:34 发布

阅读量1.4k

点赞数

文章标签： gis 3d渲染

本文链接：https://blog.csdn.net/weixin_38409555/article/details/105953397

版权

Cesium入门----5行代码快速搭建第一个Cesium App

工具：
Cesium 1.63.1
nodejs+npm+http-server
Vscode

安装Nodejs与http-server

官网下载nodejs，安装即可：

https://nodejs.org/en/

nodejs安装完成后自带npm，使用npm安装http-server
控制台：

npm install -g http-server

在cesium官网或其他渠道下载Cesium包并解压，复制Build目录下的Cesium目录到自己的项目目录下，新建一个script文件夹进行存储，并在项目目录下新建index.html文件。

分别引用Cesium/Cesium.js和Cesium／Widgets／widgets.css

 <script src="./scripts/Cesium/Cesium.js"></script>
 <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">

新建一个用于承载的容器div，设置行内样式

<div id="cesiumContainer" style="height: 100%;margin: 0px;padding: 0px;" ></div>

调用Cesium的Viewer类，构造函数中传div的id。

var viewer = new Cesium.Viewer('cesiumContainer');

使用中发现，Cesium目前加载数据需要token，遂到Cesium官网申请。方法详见博客：

https://blog.csdn.net/weixin_42448623/article/details/100284740

在index.html目录下Shift + 右键,选择powershell打开
运行命令启动服务:

http-server -p 8081

浏览器中输入访问地址:

http://127.0.0.1:8081

即可浏览最简单的Cesium App
在这里插入图片描述
附完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium App</title>
    <script src="./scripts/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
</head>
<body>
    <div id="cesiumContainer" style="height: 100%;margin: 0px;padding: 0px;" ></div>
    <script>
       Cesium.Ion.defaultAccessToken = '你自己申请的token';
       var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>