Cesium：使用自己的 OpenStreetMap 服务器。 : '未能获取图像平铺' 错误答案

【问题标题】：Cesium : Using own OpenStreetMap server. : 'Failed to obtain image tile' ErrorCesium：使用自己的 OpenStreetMap 服务器。 : '未能获取图像平铺' 错误
【发布时间】：2015-11-29 22:47:24
【问题描述】：

在guide at switch2osm.org 之后，我能够运行我自己的 OSM 磁贴服务器。

我确实使用浏览器验证了我的 OSM 磁贴服务器的状态。例如在http://localhost/osm_tiles/0/0/0.png 我得到小图片 od world。 Evertthing 似乎在我的服务器端工作。

Cesium 连接到在线地图资源也可以正常工作。

当我尝试将 Cesium 连接到本地 OSM 服务器时出现问题。在 Firefox 控制台中，我收到此错误：

““发生错误：获取图像平铺失败X：1 Y：1级别：1。”铯.js:381:25514 ““发生错误：获取图像平铺失败 X：1 Y：0 级别：1。”铯.js:381:25514 ““发生错误：获取图像瓦片失败 X：0 Y：0 级别：1。”铯.js:381:25514 ““发生错误：获取图像瓦片失败 X：0 Y：1 级别：1。” Cesium.js:381:25514

我被这个问题困扰了好几天。搜索网络并没有为我提供任何有用的线索。

这是我正在运行 Cesium 的网页的源代码：

<!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="../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>

//Initialize the viewer widget with several custom options and mixins.
var viewer = new Cesium.Viewer('cesiumContainer', {
//Hide the base layer picker
baseLayerPicker : false,
//Use OpenStreetMaps
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
    url : 'http://localhost/osm_tiles/'
  //url : '//a.tile.openstreetmap.org/'
}),

// Show Columbus View map with Web Mercator projection
//    mapProjection : new Cesium.WebMercatorProjection()
});

//Add basic drag and drop functionality
viewer.extend(Cesium.viewerDragDropMixin);

//Show a pop-up alert if we encounter an error when processing a dropped file
viewer.dropError.addEventListener(function(dropHandler, name, error) {
console.log(error);
window.alert(error);
});
</script>
</body>
</html>

【问题讨论】：

这些来自 Cesium 的请求是否显示在您的网络服务器日志中？它们看起来与 Firefox 发送的请求不同吗？
您是否也在 localhost 上托管您的 Cesium 应用程序？（和相同的端口）如果答案是否定的，那么您需要启用 CORS 才能使其工作：enable-cors.org
@scai 我的 DEFAULT_ERRORLOG 设置为“logs/error_log”，但我的系统上没有这样的文件。通过 apache.org 上的文档，我能够找到 /var/log/apache2/error.log 文件。每个请求都会弹出一个相同的行：debug: init_storage_backend: initialising file storage backend at: /var/lib/mod_tile。在来自 Cesium 和 webbrowser 的请求之间，我在 Apache 端的日志中找不到任何差异。
@MatthewAmato 他们不在同一个端口上运行。试过那个选项。可惜Cesium无法启动，报Error: Port 8080 is already in use, select a different port. Example: node server.js --port 8081 { [Error: listen EADDRINUSE] code: 'EADDRINUSE', errno: 'EADDRINUSE', syscall: 'listen' }现在我要试试cors了。
在 Chrome 中，为 DevTools 按 F12 并转到“网络”选项卡。然后重新加载您的页面以捕获网络请求。其中一些线会变红吗？ “状态”栏中的文字在这样一行上说了什么？点击红线最左侧的一列以显示标题和响应是否可以获得更多信息？

标签： javascript linux ubuntu openstreetmap cesium

【解决方案1】：

您是否在磁贴服务器上启用了 CORS（跨域资源共享）？源定义为 URI 方案、主机名和端口号。即使您的 tileserver 和 Cesium 都在 localhost 上运行，您需要配置服务器以提供 CORS 标头，以便 Cesium 使用图像。有关如何在 osm apache 服务器上配置 CORS 的说明，请参阅 http://enable-cors.org/server_apache.html。

【讨论】：

感谢您的提示。不幸的是，这并没有解决我的问题。这是我所做的：通过a2enmod headers 启用 mod_headers，然后在 /etc/apache2/apache.conf 修改 Apache2 配置文件。在配置文件中，我将Header set Access-Control-Allow-Origin "*" 写入、、部分。最后一个是我从头开始创建的。从我在问题中提到的指南猜测，这是渲染和 mod_tile 的输出目录。重新加载 Apache.... 对我来说没有任何改变。

【解决方案2】：

我仍然遇到这个问题（Cesium mailing list 上报告了同样的问题）并且我正在使用 Python 的 SimpleHTTPServer 来提供磁贴。当我切换到CORS-enabled webserver时，问题就消失了。

真正令人困惑的是，普通的 SimpleHTTPServer（非 CORS）正在打印来自 Cesium 的带有 HTTP 200 成功代码的请求，因此看起来它正在为 Cesium 的请求提供服务，但 Cesium 会报告您发现的错误。切换到 CORS 仍然是解决方案。

【讨论】：