【简单的Cesium界面搭建】（一）如何在html文件中使用Cesium

改名字了我

已于 2024-09-09 11:18:16 修改

阅读量3.2k

点赞数 1

分类专栏： Cesium使用文章标签： html javascript 前端

于 2022-12-27 17:12:39 首次发布

本文链接：https://blog.csdn.net/qq_41085087/article/details/128458469

版权

Cesium使用专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文章目录

1 创建一个html文件

可以看到初始创建的html文件主要内容以及主要的标签如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

标签	说明
!DOCTYPE	定义文档类型。（一般情况下不需要修改。）
html	定义 HTML 文档。（一般情况下不需要修改。）
head	定义关于文档的信息。（可进行文件的引用等操作。）
body	定义文档的主体。（在其中可进行自定义的内容添加。）
meta	定义关于 HTML 文档的元信息。（在页面中可通过js进行获取。）
title	定义文档的标题。(打开html文件后，显示在浏览器上方的标题。)

可以看到，一个html文件主要是很多的标签以及标签中的内容组成。要在html文件中使用Javascript或者css，只需要在html文件中添加script标签或其他标签进行引入即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    function hi(){
        alert("Hi!")
    }
</script>

</body>
</html>

当然上面的方式是直接将代码在script标签内写入，还有一种方式是另写一个js文件，然后在使用script标签进行引用，如下图所示（注意文件的引用路径）。具体的一些js语法和使用需要自己积累和查看。
在这里插入图片描述

2 初始化Cesium地球

根据以上消息，我们知道在html文件中如何引入js。那如何使用Cesium呢？
首先，初始化一个简单的地球的函数如下（各种参数设置可参考官网或其他人写的详细设置）：

/**
 * 初始化Cesium地球
 * @param mapContainer 放置cesium地球界面的div的ID*/
function constructGlobe(mapContainer = "") {
    let option = {
        homeButton: false,  // 是否显示首页按钮
        geocoder: false,    // 是否显示输入地名查找控件
        sceneModePicker: false,     // 是否显示投影方式控件（包含二维及三维投影）
        baseLayerPicker: false,     // 是否显示选择地形影像等的控件
        navigationHelpButton: false,    // 是否显示帮助控件
        creditDisplay: false,
        timeline: true,
        infoBox: false,             // 是否显示点击要素之后显示的信息
        selectionIndicator: false,
        imageryProvider: false,
        fullscreenButton: false
    };
    let viewer = new Cesium.Viewer(mapContainer, option);
    return viewer
}

然后根据需求在我们创建的html文件上创建一个div，用于放置初始化的地球。

<div id="mapContainer"></div>

然后将Cesium需要的文件进行引入。

 <script src="./js/cesium/Cesium.js"></script> <!--引入cesium的接口文件-->
 <link href="./js/cesium/Widgets/widgets.css" rel="stylesheet"> <!--引入cesium的样式文件-->

然后引入我们自己写的包含了初始化地球功能的js文件。

<script src="./hello.js"></script>

然后使用js文件中的初始化地球功能。

<script>
    constructGlobe("mapContainer")
</script>

最后我们的html文件就变成了这样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CesiumProject</title>
    <script src="./js/cesium/Cesium.js"></script><!--引入cesium的接口文件-->
    <link href="./js/cesium/Widgets/widgets.css" rel="stylesheet"><!--引入cesium的样式文件-->
    <script src="./hello.js"></script>

</head>
<body>
<div id="mapContainer"></div>
<script>
    constructGlobe("mapContainer")
</script>
</body>
<style>

</style>
</html>

最后在浏览器打开该html文件就可以得到如下所示结果。一个最简单的Cesium地球就初始化好了。
在这里插入图片描在这里插入图片描述
述

3 注意点

因为使用的是静态文件（相当于将Cesium库相关的内容全部下载到本地使用），所以在使用的时候关于Cesium所有文件都需要包含，如果是使用Web服务的形式可以按需引入，使用npm install Cesium，然后使用import引入即可，但是在html（或者项目总入口文件，例如Vue项目的index.html）中也需要将Widgets/widgets.css文件引入，以确保Cesium界面的样式正确，所以当界面展示样式不正确时，可检查是否该文件引入错误。
下图是我的文件路径（learn为项目名称），可供参考。在html文件中引入其他js、css文件时注意引入路径是否正确。
在这里插入图片描述