Question

我下载了Cesiumjs-1.11并运行了官方的Hello World教程。

我想在不依赖nodejs作为服务器的情况下运行相同的示例。我尝试使用./Build/Cesium并将其与同一目录中的示例一起使用。

CesiumJS运行，但我收到此错误：

SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
Error: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:://path/to/Cesium/Assets/Textures/moonSmall.jpg may not be loaded.
    at Error (native)
    at new p (file:://path/to/Cesium/Cesium.js:433:19773)
    at et.createTexture2D (file:://path/to/Cesium/Cesium.js:449:19216)
    at H.update (file:://path/to/Cesium/Cesium.js:434:9600)
    at S.update (file:://path/to/Cesium/Cesium.js:452:1298)
    at m.update (file:://path/to/Cesium/Cesium.js:455:27828)
    at vt (file:://path/to/Cesium/Cesium.js:458:15322)
    at Ct (file:://path/to/Cesium/Cesium.js:458:18817)
    at bt.render (file://path/to/Cesium/Cesium.js:458:25057)
    at P.render (file:://path/to/Cesium/Cesium.js:464:4108)

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!-- 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="Cesium/Cesium.js"></script>
  <style>
      @import url(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>

此代码有什么问题？

Answer 1

您的代码在技术上没有任何问题，Cesium可以脱机嵌入到应用程序中而不会出现任何问题。这里的问题是Web浏览器安全性。如果您只是在浏览器中打开HTML文件，那么您仍然在沙箱内运行，该沙箱限制对本地文件的访问，尤其是涉及Web worker和WebGL之类的内容时。这样可以防止加载所需的文件，从而导致错误。在所有浏览器中都是如此，您可以通过暂时禁用浏览器安全性来自行验证。

例如，在Chrome中，您可以使用--disable-web-security运行，并且页面将加载而不会出现任何错误。请注意，为了实现此目的，您必须确保没有Chrome实例正在运行。如果您在启动时收到警告，则表示您已选择该选项。其他浏览器有不同的选项（例如IE只是提示您允许阻止内容）。

您仍然会遇到缺少图像的问题，因为默认配置应该在服务器上运行。要解决此问题，您可以明确定义图像提供程序。这是一个在禁用Web安全性时有效的完整示例。

<!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="../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', {
        baseLayerPicker: false,
        imageryProvider: new Cesium.BingMapsImageryProvider({
                    url : 'http://dev.virtualearth.net'
                })
    });
  </script>
</body>
</html>

我认为你的最终目标是尝试在应用程序中使用Cesium吗？如果是这样，则不会应用这些安全限制。许多人在嵌入式浏览器控件中使用Cesium并取得了成功。

在没有服务器要求的情况下运行CesiumJS

1 个答案: