三维GIS开发cesium智慧地铁教程（1）地球初始化

WebGIS开发

于 2025-05-08 09:45:18 发布

阅读量469

点赞数 6

分类专栏： GIS开发文章标签： webgis cesium 智慧地铁

本文链接：https://blog.csdn.net/2301_78220461/article/details/147767731

版权

GIS开发专栏收录该内容

96 篇文章

订阅专栏

一、HTML骨架搭建

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 元信息设置 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧地铁三维可视化</title>

    <!-- 引入Cesium库 -->
    <script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css">
  </head>

这里就像搭房子要先打地基：

meta标签确保中文正常显示和移动端适配
引入Cesium的JS文件和CSS样式表相当于搬来了建筑工具和装修材料

二、全屏地图容器

<style>
    * { margin: 0; padding: 0; }
    #cesiumContainer {
        width: 100vw;  /* 视窗宽度 */
        height: 100vh; /* 视窗高度 */
        overflow: hidden;
    }
</style>

这个样式设置就像给地图画框：

*选择器清除默认边距，避免出现滚动条
100vw/vh让地图容器占满整个浏览器窗口
overflow: hidden隐藏溢出内容，保持界面整洁

三、创建地图画布

<body>
    <div id="cesiumContainer"></div>
</body>

这个<div>就像一块空白画布：

我们通过idcesiumContainer给它贴标签
后续所有三维内容都会渲染在这个容器里

四、Cesium身份验证

<script>
    Cesium.Ion.defaultAccessToken = '你的Token';

这相当于进入Cesium世界的通行证：

Cesium需要联网加载卫星影像等资源

这里的token可以在官网申请

五、三维地球初始化

    const viewer = new Cesium.Viewer('cesiumContainer');
</script>

完整代码：

<!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>
    <script src="../cesium1.99/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../cesium1.99/Build/Cesium/Widgets/widgets.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        #cesiumContainer {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <div id="cesiumContainer">
    </div>
</body>

<script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYzhiZTM4ZC0yN2NiLTQ5MjQtOWRjMS1hOGY2Y2ZhMGQ3MzAiLCJpZCI6MTE1MTg3LCJpYXQiOjE2OTIzNDczMzh9.Ealj0HH4x_WU4fG5dI2XvnBNeNNhq5rXjBFsmDgt-mg'
    const viewer = new Cesium.Viewer('cesiumContainer')
</script>


</html>

加载出来的地图效果：