CesiumJS 中没有出现的实体答案

【问题标题】：Entities not Appearing in CesiumJSCesiumJS 中没有出现的实体
【发布时间】：2017-11-18 01:33:06
【问题描述】：

我想在 Cesium 中可视化一些 3d 数据点，但不想设置服务器。我下载了 Cesium-1.34.zip 并将其解压缩到我的桌面。然后，我制作了一个 .html 文件，该文件也位于我的桌面上，并从 Cesium-1.34 解压缩文件夹中提取资源。我包含了来自http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=PolylineVolume.html&label=Geometries 的一些示例代码来测试它。我的全部代码如下：

<!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,
        maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="Cesium-1.34/Build/Cesium/Cesium.js"></script>
  <style>
      @import url(Cesium-1.34/Apps/Sandcastle/templates/bucket.css);
      @import url(Cesium-1.34/Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>

<div class="fullSize" id="cesiumContainer"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

  <script>



    var viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        imageryProvider: new Cesium.BingMapsImageryProvider({
                    url : 'http://dev.virtualearth.net',
            key : 'al3lvBftgu3T17GnraSB~sDScxf9wA4dopWEvK2swfA~AlwqHWs4LzhiC2oOHAFYe9dZMVQtYCQHRGyC8Y6Hyq9-109ibBI9suhwFj0RoRAp'
                })
    });

var greenBox1 = viewer.entities.add({
    name : 'Green box with beveled corners and outline',
    polylineVolume : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-90.0, 32.0, 0.0,
                                                               -90.0, 36.0, 100000.0,
                                                               -94.0, 36.0, 0.0]),
        shape :[new Cesium.Cartesian2(-50000, -50000),
                new Cesium.Cartesian2(50000, -50000),
                new Cesium.Cartesian2(50000, 50000),
                new Cesium.Cartesian2(-50000, 50000)],
        cornerType : Cesium.CornerType.BEVELED,
        material : Cesium.Color.GREEN.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});

viewer.zoomTo(viewer.entities);

  </script>
</body>
</html>

问题是应该出现在地球上的绿色框不存在。我没有从开发者工具窗口中得到任何错误。我确实收到了一些警告和消息：

警告：DOM7011：此页面上的代码禁用了前后缓存。
消息：HTML1300：发生导航。
消息：WEBGL11258：暂时切换到软件渲染以显示 WebGL 内容。此应用程序使用 Cesium 的默认 Bing Maps 键。请尽快为应用创建新密钥...

关于密钥的消息很奇怪，因为我肯定在代码中使用了我自己的密钥，尽管我认为这不会干扰实体不出现而完全没有错误。在这一点上我很困惑，我想如果一个实体不能被显示就会有一个错误，但我什么也没得到。这可能是因为它确实需要在服务器上运行。关于我缺少什么或如何仅使用本地配置在 CesiumJS 上绘制实体的任何提示？

【问题讨论】：

标签： javascript cesium

【解决方案1】：

Bing 密钥错误消息仍在显示，因为您在查看器上（默认情况下）显示了 Geocoder 小部件，并且 Geocoder 使用 Bing API 进行地理编码。您可以在构造 Cesium.Viewer 之前通过预先指定密钥来修复它，如下所示：

Cesium.BingMapsApi.defaultKey = 'your_key_here';

var viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: false,
    imageryProvider: new Cesium.BingMapsImageryProvider({
        url : 'http://dev.virtualearth.net'
    })
});

此外，不支持直接从file:// 协议运行 Cesium，因为 Cesium 严重依赖于纹理、Web Worker 脚本、JSON 文件等资产。典型的浏览器会阻止文件中的 JavaScript 访问其他文件。因此，Cesium 附带了一个小的 server.js 文件，您可以使用 NodeJS 运行该文件，以让小型开发服务器在本地运行以托管 Cesium 的副本。详情请见Cesium Up and Running。

遵循此建议后，原始问题中的“绿框”代码应该可以正常运行。

【讨论】：

谢谢！我不确定通过在本地运行整个设置是如何沙盒化的。现在我不必浪费时间试图让它在没有服务器的情况下工作。