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

最新推荐文章于 2024-05-21 23:21:19 发布

Zacharium_

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量1.6k

点赞数 1

分类专栏： cesium 无人机飞行集群效果展示文章标签：前端 html5 node.js javascript

本文链接：https://blog.csdn.net/weixin_45656079/article/details/121278273

版权

cesium 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

无人机飞行

4 篇文章 0 订阅

订阅专栏

集群效果展示

4 篇文章 0 订阅

订阅专栏

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

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');

Zacharium_

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
cesium从头开始一个项目-无人机飞行-1-html框架搭建

这个小项目是我花了两个晚上时间亲自写出来了，边学边写，在此以本项目为例，将学习过程中的收获记录，希望能够帮助以后的自己以及后来人。1.建立框架要想成功将项目跑出来，最开始的要求是讲框架搭好，涉及前端开发，不过我们所需要的只是些许皮毛，能够做好复制粘贴就ok。1.创建项目所需要的关联包在下载下来Cesium文件中，有两个文件夹，一个名为"source"包含了cesium的源码，一个名为"build"，打开文件夹build→复制文件夹Cesium→到我们创建项目的文件夹中创建一个名为scri
复制链接

扫一扫