的Cesium界面搭建——一在html文件使用Cesium

不愿透露姓名的美女

2024-04-23 帮助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文件时注意引入路径是否正确。
学新通

这篇好文章是转载于：学新通技术网

的Cesium界面搭建——一在html文件使用Cesium

1 创建一个html文件

2 初始化Cesium地球

3 注意点

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐