CESIUM 配置发布 Getting Started

最新推荐文章于 2024-05-20 11:01:35 发布

「已注销」

最新推荐文章于 2024-05-20 11:01:35 发布

阅读量2.7k

点赞数

分类专栏： Cesium 文章标签： Cesium Javascript

Cesium 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

本教程将让开发人员的技能水平与他们的第一个Cesium应用程序启动并运行。

最简单的方法来验证Cesium在您的web浏览器中工作是运行的Hello World示例点击这里(打开一个新窗口)。如果你看到类似下面的图像,那么恭喜你,你的系统可以运行Cesium和您可以安全地跳到下一部分;否则,继续阅读。

Cesium是建立在一些新的HTML5技术,最重要的是WebGL。尽管这些新标准正迅速成为广泛采用,一些浏览器和系统需要更新支持他们。如果示例应用程序不为你工作,这里有几件事情可以试一试。

更新您的web浏览器。大部分的Cesium团队使用Google Chrome,但Firefox、Internet Explorer 11 和opear也会工作。如果你已经使用一种以上浏览器,确保它是更新到最新版本。
更新您的视频卡驱动程序,以更好地支持3 d。如果你知道什么类型的视频卡,您可以检查供应商网站的更新。这三个最受欢迎的是:英伟达,AMD,英特尔。
如果你仍然有问题,尝试访问http://get.webgl.org/提供更多的解决问题的建议。你也可以寻求帮助的Cesium论坛。

如果你已经经验丰富的开发人员,你很可能有一个最喜欢的编辑器或开发环境;例如,大多数的铯团队使用 Eclipse 。如果你刚开始,一个伟大的免费和开源编辑器是记事本+ +,你可以下载他们的网站。最终任何文本编辑器都可以,所以你是最舒服的。

如果您还没有这样做,点击这个按钮以获取最新的Cesium发布:

http://cesiumjs.org/releases/Cesium-1.26.zip点击打开链接

下载完成后,将zip文件解压缩到您所选择的一个新目录,我将把这整个教程Cesiumroot目录中。下面的内容应该类似。

它可能容易双击index.html,但我们只会带来失望。为了让应用程序实际工作,它需要在web服务器中运行。

为了运行Cesium应用程序,我们需要一个本地web服务器主机文件。我们将使用节点。 js和其他教程。如果你已经有你想要使用一个web服务器,这样也很好,只是一定要主机根目录,我们在前一节中创建的。铯没有服务器需求;它完全是客户端。这意味着任何web服务器主机静态内容也可以主机铯。

设置一个web服务器节点。 js是容易的,只需要3个步骤。 1。安装节点。 js从他们网站,您可以使用默认的安装设置。 2。打开一个命令shell铯根目录和下载/安装所需的模块通过执行npm install。这将创建一个“node_modules”目录的根目录。 3所示。最后,开始您的web服务器通过执行node server.js在根目录中。 4所示。您应当会看到类似下面的

现在,我们已经创建了一个web服务器启动并运行,我们可以启动一个浏览器,并导航到http://localhost:8080 /应用程序/ HelloWorld.html。这是我们相同的Hello World应用程序用来测试WebGL的教程,但是现在自己的系统上运行,而不是Cesium的网站。如果我们打开HelloWorld.html在一个编辑器,我们可以找到以下简单的应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

这些是四行需要向应用程序添加Cesium:

第一步是包括Cesium.js在脚本标记。它定义了Cesium对象,它包含了我们需要的一切。

 <script src="../Build/Cesium/Cesium.js"></script>

2. 为了使用Cesium Viewer小部件,我们需要包括CSS。

@import url(../Build/Cesium/Widgets/widgets.css);

3. 在HTML的身体,我们创建一个div的观众。

4. 最后,我们创建查看器的一个实例。

var viewer = new Cesium.Viewer('cesiumContainer');

恭喜,你正在运行与Cesium和准备好开始编写自己的Cesium应用程序和web页面。根据类型的学习者,你可能会感兴趣查看教程 ,介绍主要的铯的特性。如果你是一个多面手,Cesium Sandcastle 是一个实时编码应用程序,不仅将允许您查看几十个例子,但查看和编辑他们的源代码,运行应用程序中与你的更新变化。最后,不管你怎么学习, 参考文档包含API的细节和对每个人来说都是一个无价的资源。

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CESIUM 配置发布 Getting Started

教程开始本教程将让开发人员的技能水平与他们的第一个Cesium应用程序启动并运行。最简单的方法来验证Cesium在您的web浏览器中工作是运行的Hello World示例点击这里(打开一个新窗口)。如果你看到类似下面的图像,那么恭喜你,你的系统可以运行Cesium和您可以安全地跳到下一部分;否则,继续阅读。Cesium是建立在一些新的HTML5
复制链接

扫一扫