cesium从头开始一个项目-无人机飞行-1-html框架搭建_cesium html

作者：繁依Fanyi0 | 2024-04-09 06:56:24

踩

cesium html

这个小项目是我花了两个晚上时间亲自写出来了，边学边写，在此以本项目为例，将学习过程中的收获记录，希望能够帮助以后的自己以及后来人。

1.建立框架

要想成功将项目跑出来，最开始的要求是讲框架搭好，涉及前端开发，不过我们所需要的只是些许皮毛，能够做好复制粘贴就ok。

1.移植项目所需要的关联包

在下载下来Cesium文件中，有两个文件夹，一个名为"source"包含了cesium的源码，一个名为"build"，打开文件夹build→复制文件夹Cesium→到我们创建项目的文件夹中创建一个名为scripts的文件夹→将复制的文件夹Cesium粘贴到scripts中

2.创建.html的基本框架

建议使用vs code，将我们项目的整个文件拖入。

加入html模板


<!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>UAV</title>
    
    <script src="./scrips/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scrips/Cesium/Widgets/widgets.css">
    <style>
        html, body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%;"<div>
    <script>
 
        
        var viewer = new Cesium.Viewer('cesiumContainer');
 
            
    </script>
    
</body>
</html>

效果如图

框架搭建好了，之后我们所写的代码就直接写在<body><script></script></body>中就ok了

3.解决可能出现的地球不显示问题

但是有的时候，我们把那些代码粘贴过后往往出现这种情况

即。地球并不能显示出来，有两种解决思路

1.更新为最新版本的cesium（这是不需要加token）

2.不更新。可以去 cesium官网申请自己的token，然后添加上去就行了

复制使用

Cesium.Ion.defaultAccessToken = '你的 token'

案例

接下来，就进入到了下一个阶段

如何完成自己的项目？

其中

引入cesium.js
<script src="./scrips/Cesium/Cesium.js"></script>
引入widgets.css文件
<link rel="stylesheet" href="./scrips/Cesium/Widgets/widgets.css">

创建一个窗口
<div id="cesiumContainer" style="height: 100%;"<div>
将创建的窗口与cesium关联起来
var viewer = new Cesium.viewer('cesiumContainer');

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/391008