【问题标题】:What is the lightest possible method of using Cesium?使用铯最轻的方法是什么?
【发布时间】:2015-07-02 14:06:51
【问题描述】:

我对使用 Cesium 构建带有自定义图块的 3D 地球很感兴趣,但根据 "get started" instructions here,似乎您必须下载一个 30mb 的大目录并将整个内容包含在您的项目中才能拥有它正确运行。这是真的?我可以不只包含 Cesium.js 并像那样运行吗?反正我不需要它们包含的 80% 的 UI 元素。

在“入门”教程的结尾,它们似乎表明您需要开始运行这些位:

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

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

<div id="cesiumContainer"></div>

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

但是当我设置这些位时,我得到了这个错误:“未定义定义”和“未定义铯”。

运行 Cesium 的最轻量级方法是什么?

【问题讨论】:

    标签: javascript cesium


    【解决方案1】:

    该教程肯定需要更新,我会做一个笔记来清理它。 (对于初学者来说,它的底部有一个错误,因为 Cesium.CesiumViewer 应该只是 Cesium.Viewer。)话虽如此,这里是 zip 中包含的内容以及您实际想要/需要的内容的低调发展。

    • 应用程序 -> 示例应用程序。
    • 来源 -> 用于基于模块的开发的 AMD 模块(requirejs、browserify 等)也被示例应用程序使用。
    • 规格 -> 单元测试。
    • 第三方 -> 上述所需的第三方库。
    • 构建/应用程序 -> 示例应用程序的构建和缩小版本。
    • 构建/文档 -> 参考文档。

    这会留下两个目录,Build/CesiumBuild/CesiumUnminified,我稍后会讲到。

    但首先,您的问题在技术上正确的答案是使用我们提供的 AMD 模块创建最轻的基于铯的应用程序。这意味着您只需要在开发时包含 Source 文件夹,然后您的构建过程将创建应用程序的缩小和连接版本以进行部署。使用模块确保您只包含您正在使用的 Cesium 功能。这与通过页面底部的脚本标签以正确顺序包含所有代码和库的缩小版本的“传统”Web 开发实践不同。模块每天都在增长,ES6 以及像 Babel 这样的构建系统正在慢慢接管 Web 开发领域。我们自己使用requirejs,但有很多选择。

    以这种方式构建的应用程序的一个示例是 Build\Apps\CesiumViewer 中的 Cesium Viewer 示例(源代码在 Apps\CesiumViewer 中)。整个构建的应用程序(未压缩)为 8.77 兆,并且几乎公开了所有 Cesium 特性和功能。其中 3.65 兆是默认发送的自然地球图像和其他数据文件,如果您使用触发它的功能,该应用程序只会按需下拉。通过在服务器端进行 gzip 压缩,剩余的 JavaScript 大大减小了大小。要亲自查看,请运行最新的 Cesium Viewer link 并在浏览器开发工具中打开网络选项卡。整个应用程序只占用 2.2 兆字节(其中包括从 Bing 加载的初始图像。Cesium 部分只有大约 426kb。如果您开始加载 GeoJSON 或 KML 文件,它可能会占用一些额外的 kb,但不会太多。

    由于基于模块的方法需要额外设置,并且在整体 Web 开发中仍然不常见,因此我们还提供了 Build/Cesium 和 Build/CesiumUnminified 文件夹。其中包括完全缩小和连接的 Cesium 版本,将所有模块吸到一个文件中。但是,您需要的不仅仅是 Cesium.js 文件进行部署。以下是这些文件夹的细分:

    • Build/Assets -> Cesium 附带的默认图像/资产(用于 ICRF 转换的图像/图标/星号/数据)。根据您配置 Cesium 应用程序的方式,这些数据会根据需要下拉。它是 3.65 兆,但您的应用程序只会触及其中的几 kb(取决于您使用的功能)。我建议部署整个目录,而不是尝试确定要部署到服务器的内容(但正如我所说,客户端可能永远无法检索到其中的大部分内容)。
    • Build/WorkersBuild/ThirdParty -> 这些包含 Cesium 使用的串联网络工作者。这包括图像/地形、几何镶嵌和 zip 文件处理使用的代码。它是按需拉下的,即使你做了一些需要所有这些的事情,它仍然在一个 gzip 压缩之下。由于 WebWorkers 的性质,这些文件不能包含在主要的 Cesium.js 中(我们认为这是规范中的一个缺陷)。
    • Build/Widgets -> 包含连接的 CSS,包括单独的小部件形式和组合的 widgets.css 文件。我建议只包含 widgets.css 并完成它(4kb gzipped);但如果你真的关心大小,你可以减少单个 css 文件。此文件夹还包含各种小部件使用的图标。同样,它们仅在需要时从服务器检索。

    正如他们的名字所暗示的那样,Build/CesiumBuild/CesiumUnminified 几乎是一回事。主要区别在于 Build/Cesium 已被缩小并且更小。它也更快,因为它删除了很多调试代码以提高性能。我们的官方建议是针对 CesiumUnminified 进行开发并使用 Cesium 进行部署。这将使开发更容易,因为如果代码中出现问题,您将获得更好的错误处理和调用堆栈。

    以这种方式构建的应用程序的一个示例是 Hello World 应用程序link。实际上与我上面链接的构建的 Cesium Viewer 应用程序的大小差异不大,但那是因为它们本质上是相同的应用程序,以两种不同的方式构建。

    所以这个答案最终比我想要的要长得多,但是 Web 开发是多种多样的,Cesium 会尽力支持其所有不同的方法。 Cesium 本身也非常雄心勃勃,因此我们必须克服许多其他项目从未遇到过的障碍。绝对有改进的余地,但我们竭尽全力确保 Cesium 在提供它所具有的功能的同时尽可能轻。我认为在 2.0 版本中,我们可能会更进一步,并尝试让事情变得更加模块化。

    我希望能回答您的问题和疑虑。

    【讨论】:

    • 谢谢,这确实很有帮助。还有一个问题:是否可以更改 Cesium 查找 Assets/Widgets/Workers 的目录位置?目前它正在我的 js 文件夹中寻找它们,我宁愿将它们放在一个子目录中。
    • 另外,你有布局定制的链接吗?我不需要这些 UI 小部件中的大多数,并且希望一开始就不能加载它们,而不是使用 destroy()
    • 如果您正在使用查看器小部件,您可以通过在构建时传递选项对象来禁用您不想要的任何小部件。该文档有完整的选项集和一个示例cesiumjs.org/Cesium/Build/Documentation/Viewer.html 不建议事后调用destroy,这可能会导致以后出现问题。默认情况下,Cesium 使用 Cesium.js 文件的位置作为存储其余文件的位置。您可以设置一个全局 CESIUM_BASE_URL 变量,也可以调用 Cesium.buildModuleUrl.setBaseUrl 将其指向不同的位置。
    • 谢谢您,您提供了非常棒的帮助。这足以让我开始。我在删除左下角时钟元素并将背景设置为透明(而不是黑色)时遇到了问题,但我会利用 Cesium 论坛来解决这些问题。干杯。
    • 不幸的是,即使我禁用某些东西,例如baseLayerPicker: false,我在删除资产时仍然会出错:BaseLayerPicker.css not found。在不使用小部件而不必求助于 RequireJs 和模块时,有没有办法消除这些依赖关系?
    猜你喜欢
    • 1970-01-01
    • 2016-08-13
    • 1970-01-01
    • 2012-10-14
    • 2016-02-08
    • 2018-03-21
    • 2011-05-26
    • 2012-08-06
    • 2011-03-07
    相关资源
    最近更新 更多