CesiumJS 中未出现的实体

Entities not Appearing in CesiumJS

我想在 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>

问题是应该出现在地球仪上的绿框没有出现。我没有从 Developer Tools window 收到任何错误。不过,我确实收到了一些警告和消息:

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

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:// 协议 运行ning Cesium,因为 Cesium 严重依赖于纹理、网络工作者脚本、JSON 文件等资产.典型的浏览器会阻止 JavaScript 从一个文件访问其他文件。因此,Cesium 附带了一个小 server.js 文件,您可以 运行 使用 NodeJS 获得一个小型开发服务器,在本地托管 Cesium 的副本。有关详细信息,请参阅 Cesium Up and Running

遵循此建议后,您原始问题中的 "green box" 代码应该 运行 就好了。