Worldwind 服务器不显示在 OpenLayers 3 中

Posted

技术标签:

【中文标题】Worldwind 服务器不显示在 OpenLayers 3 中【英文标题】:Worldwind server does not display in OpenLayers 3 【发布时间】:2016-02-13 07:10:32 【问题描述】:

我有一个在 OpenLayers 2 中运行良好的 worldwind tile 服务器。它使用一个简单的 BMNG 层,如下所示:http://worldwind.arc.nasa.gov/java/server/readme.html。不幸的是,我无法与您共享磁贴服务器,因为它位于封闭网络上。但是,它类似于下面提供的 URL 示例。

但是,我正在尝试将我们升级到 OpenLayers 3。由于某种原因,当我使用 OpenLayers 3 时,基本地图不会显示。

我回到了世界的这一边,进行了以下两个测试。现在我在两个示例中都有匹配的 URL 和层,OL3 版本也不起作用。

OPENLAYERS 2

<html>
<head>
<title>OpenLayers 2</title>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css" type="text/css">
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script type="text/javascript">

var map;

function init() 
    map = new OpenLayers.Map( 'map' );

    var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
              "http://vmap0.tiles.osgeo.org/wms/vmap0",
              layers: 'basic');
    map.addLayer(wmsLayer);

    map.setCenter(new OpenLayers.LonLat(0,0),4);
    map.zoomToMaxExtent();

</script>
</head>
<body onload="init()">
   <h1 id="title">WMS Example</h1>
   <p id="shortdesc">
      Shows the basic use of openlayers using a WMS layer
   </p>

    <div id="map" class="smallmap"></div>
</body>
</html>

还有 OPENLAYERS 3:

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.0/build/ol.js"></script>

</head>
<body>
    <div id="map"></div>
    <script>
    var layers = [
         new ol.layer.Tile(
         source: new ol.source.TileWMS(
            url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
            params: 'LAYERS': 'basic', 'TILED': true,
            serverType: 'geoserver'
         )
      )
    ];
    var map = new ol.Map(
      layers: layers,
      target: 'map',
      view: new ol.View(
         center: [0, 0],
         zoom: 2
      )
    );
    </script>
</body>
</html>

在我的网络上(不是世界的这一边),我在 OpenLayers 2 中完美显示地图的图块服务器无法使用 OpenLayers 3 中的相同代码。

有人知道 OL3 和 WorldWind 之间可以关闭哪些设置吗?

更多信息:

使用 mongoose-free-5.6,我将我的目录设置为临时网络服务器。现在,鉴于此,OL3 正在发出 tile 请求并从 tile 服务器获取响应。我调查了其中一个请求的请求标头中的 URL:

http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=basic&TILED=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=-2504688.542848654%2C0%2C1.3969838619232178e-9%2C2504688.5428486555

我在 Chrome 中得到了这个:

此 XML 文件似乎没有任何与之关联的样式信息。文档树如下所示。

<ServiceExceptionReport xmlns="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3.0" xsi:schemaLocation="http://www.opengis.net/ogc http://schemas.opengis.net/wms/1.3.0/exceptions_1_3_0.xsd">
    <ServiceException code="InvalidSRS">
        msWMSLoadGetMapParams(): WMS server error. Invalid CRS given : CRS must be valid for all requested layers.
    </ServiceException>
</ServiceExceptionReport>

最终答案: 将投影添加到 View 对象是让它在这里和我的封闭网络上工作的原因。

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.0/build/ol.js"></script>
</head>
<body>
    <div id="map"></div>
    <script>
    var layers = [
         new ol.layer.Tile(
         source: new ol.source.TileWMS(
            url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
            params: 'LAYERS': 'basic', 'TILED': true,
            serverType: 'geoserver'
         )
      )
    ];
    var map = new ol.Map(
        layers: layers,
        target: 'map',
        view: new ol.View(
            projection: ol.proj.get('EPSG:4326'),
            center: [0, 0],
            zoom: 2
      )
    );
    </script>
</body>
</html>

【问题讨论】:

错误提示,不支持 CRS,所以换一个试试。例如 EPSG:4326。 vmap0.tiles.osgeo.org/wms/… Grmpfhmbl - 谢谢!那成功了。我将在我的问题底部发布完整的答案。 【参考方案1】:

由于您没有发布磁贴服务器的 URL,我只能猜测。这对我来说听起来像是一个 CORS 问题。如果我理解正确的话,在上面的代码中,你更改了 tile 服务器的 URL,它将不再显示在 OL3 中,而在 OL2 中它可以工作。

您可能需要检查浏览器的控制台是否有类似的错误消息

XMLHttpRequest cannot load http://some.domain.com. Origin
http://other.domain.com is not allowed by Access-Control-Allow-Origin.

为了快速检查,您可以在浏览器中禁用跨源检查 (Firefox / Chrome)。 OL3 变体也应该可以工作。

【讨论】:

@Gmpfhmbl - 不错的收获!首先,我将 OL2 中的 URL 与 OL3 匹配。 OL3 版本不再显示地图(只是控件)。然后我用 --disable-web-security 启动了 Chrome,但我没有得到带有控件的地图。但是,我没有收到有关 Access-Control-Allow-Origin 的 XMLHttpRequest 错误。感谢您的回复! 您查看过网络流量吗? OL3 甚至试图加载图块吗?您如何访问 HTML 文件?作为“file://path/to/file/index.html”或者你把它放在网络服务器上并通过 HTTP 获取文件?当涉及到 AJAX 调用时,文件 URL 也会产生问题。 好点!我查看了网络流量,我正在使用 mongoose-free-5.6 从目录中创建一个快速的“网络服务器”。我在原始问题中添加了有关网络流量的信息。

以上是关于Worldwind 服务器不显示在 OpenLayers 3 中的主要内容,如果未能解决你的问题,请参考以下文章

WorldWind:地面高度

worldwind怎么下载?

在 World Wind 显示中获取 JPopupMenu

WorldWind源码剖析系列:WorldWind如何确定与视点相关的地形数据的LOD层级与范围

从 WorldWind Java 中删除默认 WMS 层

WorldWind源码剖析系列:WorldWind实时确定更新初始化和渲染地形和纹理数据