Cesium:使用自己的OpenStreetMap服务器。:“无法获取图像瓦片”错误。

3

按照 switch2osm.org 的指南,我成功搭建了自己的OSM瓦片服务器。

我使用Web浏览器验证了我的OSM瓦片服务器状态。例如,在http://localhost/osm_tiles/0/0/0.png处,我可以看到世界的小图片。在我的服务器端一切似乎都正常工作。

Cesium连接到在线地图源也很好用。

当我尝试将Cesium连接到本地OSM服务器时,问题出现了。在Firefox控制台中,我得到了以下错误:

"An error occurred in "": Failed to obtain image tile X: 1 Y: 1 Level: 1." Cesium.js:381:25514 "An error occurred in "": Failed to obtain image tile X: 1 Y: 0 Level: 1." Cesium.js:381:25514 "An error occurred in "": Failed to obtain image tile X: 0 Y: 0 Level: 1." Cesium.js:381:25514 "An error occurred in "": Failed to obtain image tile X: 0 Y: 1 Level: 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>

1
你是否也在本地主机上托管Cesium应用程序?(并且使用相同的端口)如果答案是否定的,那么你需要启用CORS才能使其正常工作:http://enable-cors.org/ - Matthew Amato
@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。我无法在Apache端找到Cesium和Web浏览器之间请求日志的任何差异。 - Empty_Mind
您IP地址为143.198.54.68,由于运营成本限制,当前对于免费用户的使用频率限制为每个IP每72小时10次对话,如需解除限制,请点击左下角设置图标按钮(手机用户先点击左上角菜单按钮)。 - Empty_Mind
看起来非常奇怪,它会给你一个良好的“Content-Type”和一个漂亮的“Content-Length”,但仍然说无法加载图像。图片是损坏的吗?如果在网络选项卡中右键单击它并选择“在新标签页中打开”,您是否能得到有效的图像?显然,请确保您正在检查的行是有问题的瓷砖之一,而不是Cesium资产中的某个支持图像文件。 - emackey
通过在新标签页中打开该图像,我得到了期望的图像。这样做可以查看四个瓷砖,每个瓷砖都描绘了整个地球的1/4。 - Empty_Mind
显示剩余3条评论
2个回答

2
你是否在你的瓦片服务器上启用了CORS(跨域资源共享)?起源被定义为URI方案、主机名和端口号。即使您的瓦片服务器和Cesium都在本地主机上运行,您仍需要配置服务器以提供CORS头文件,以便Cesium使用图像。请参见http://enable-cors.org/server_apache.html,了解有关如何在osm apache服务器上配置CORS的说明。

谢谢您的提示,但是这并没有解决我的问题。我做了以下操作:通过a2enmod headers启用了mod_headers,然后修改了Apache2配置文件**/etc/apache2/apache.conf**。在配置文件中,我写入了Header set Access-Control-Allow-Origin "*"到<Directory />,<Directory /var/www/>和<Directory /var/lib/mod_tile/>这几个部分。最后一个文件夹是我自己从头创建的,根据我提问时提到的指南,我猜测这是renderd&mod_tile的输出目录。重新加载Apache...但对我来说什么都没变。 - Empty_Mind

0

我仍然遇到了这个问题(Cesium邮件列表上也报告了同样的问题),我正在使用Python的SimpleHTTPServer来提供瓦片服务。当我切换到一个启用CORS的Web服务器时,问题消失了。

真正令人困惑的是,香草SimpleHTTPServer(非CORS)会打印出带有HTTP 200成功代码的Cesium请求,因此它似乎正在为Cesium的请求提供服务,但Cesium将报告您发现的错误。切换到CORS仍然是解决方案。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接