javascript - 使用铯的最轻巧的方法是什么?

标签 javascript cesium

我对使用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的最简便的方法是什么?

最佳答案

该教程肯定需要更新,我将做一个注释进行清理。 (对于初学者来说,它的底部有一个错误,因为Cesium.CesiumViewer应该只是Cesium.Viewer。)话虽如此,这是zip中包含的内容以及实际开发中您需要/需要的东西的最底层。

  • 应用程序->示例应用程序。
  • ->用于基于模块开发(requirejs,browserify等)的AMD模块,示例应用程序也使用。
  • 规格->单元测试。
  • ThirdParty ->上面需要的第三方库。
  • 构建/应用程序->生成并缩小了示例应用程序的版本。
  • 构建/文档->引用文档。

  • 剩下两个目录, Build / Cesium Build / CesiumUnminified ,我将在稍后讨论。

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

    以这种方式构建的应用程序示例是Build \ Apps \ CesiumViewer中的Cesium Viewer示例(源在Apps \ CesiumViewer中)。整个构建的应用程序(未压缩)为8.77兆,几乎涵盖了所有Cesium功能。 3.65兆是默认情况下附带的Natural Earth图像和其他数据文件,如果您使用触发它的功能,则应用程序仅会按需下拉该数据文件。通过在服务器端gzip压缩压缩,可以大大减少其余JavaScript的大小。要亲自查看,请运行最新的Cesium Viewer link,然后在浏览器开发工具中打开“网络”标签。整个应用仅吸收2.2兆(包括从Bing加载的初始图像。铯部分仅约426kb。如果您开始加载GeoJSON或KML文件,它可能会吸收一些额外的kb,但不会太多)。

    由于基于模块的方法需要额外的设置,并且在Web开发总体上仍然不常见,因此我们还提供了Build / Cesium和Build / CesiumUnminified文件夹。其中包括完全缩小和串联的Cesium版本,这些版本将所有模块吸收到一个文件中。但是,您不仅需要Cesium.js文件进行部署。以下是这些文件夹的细分:
  • 构建/ Assets -> Cesium附带的默认图像/ Assets (用于ICRF转换的图像/图标/星标/数据)。根据需要,将根据您配置Cesium应用程序的方式下拉此数据。它是3.65兆,但杂音是您的应用程序只能使用的部分kb(取决于您使用的功能)。建议不要部署整个目录,而建议尝试部署整个目录(但正如我所说,客户端可能永远不会检索其中的大部分目录)。
  • Build / Workers Build / ThirdParty ->其中包含Cesium使用的串联Web worker 。这包括图像/地形,几何细分和zip文件处理所使用的代码。它被按需拉低,即使您做了一些要求所有这些操作,它仍然处于压缩状态。由于WebWorkers的本质,这些文件不能包含在主要的Cesium.js中(在我们看来,这是规范中的一个难点)。
  • 构建/小部件->包含级联的CSS,既有单独的小部件形式,也有合并的widgets.css文件。我建议只包含widgets.css并完成它(压缩后的4kb);但是,如果您真的担心大小,可以调低单个css文件。此文件夹还包含各种小部件使用的图标。再一次,仅在需要时才从服务器检索它们。

  • 顾名思义,Build/CesiumBuild/CesiumUnminified几乎是同一件事。主要区别在于Build / Cesium已缩小并且更小。它也更快,因为它删除了许多调试代码以提高性能。我们的官方建议是针对CesiumUnminified开发并使用Cesium进行部署。这将使开发更容易,因为如果代码中有问题,您将获得更好的错误处理和调用堆栈。

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

    因此,这个答案比我希望的要长得多,但是Web Development千差万别,Cesium尝试尽最大努力来支持其所有不同的方法。 Cesium本身也雄心勃勃,因此我们不得不克服许多其他项目从未遇到过的障碍。绝对有改进的余地,但是我们会尽力确保Cesium在提供其功能的同时尽可能轻便。我认为在2.0版本中,我们可能会更进一步,并尝试使模块更具模块化。

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

    关于javascript - 使用铯的最轻巧的方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31186819/

    相关文章:

    javascript - Node.js HTTP/NET -- 连接和请求的区别

    javascript - setTimeOut 回调函数什么时候获取参数?

    javascript - 如何重写这个简单的 switch 语句使其更加简洁?

    3d - Cesium JS 保存相机位置

    javascript - 在函数内部使用变量作为参数

    javascript - AngularJS 下拉菜单在提交前需要验证

    gis - 铯的高度值是高度?或者,高于海平面?

    gis - 获取 Cesium Map 的中心

    javascript - 在 cesium.js 中使用 heatmap.js