Сервер Worldwind не отображается в OpenLayers 3

У меня есть сервер тайлов worldwind, который отлично работает в OpenLayers 2. Он использует простой слой BMNG, например: http://worldwind.arc.nasa.gov/java/server/readme.html. К сожалению, я не могу поделиться с вами тайловым сервером, потому что он находится в закрытой сети. Однако он аналогичен приведенному ниже примеру URL.

Однако я пытаюсь обновить нас до OpenLayers 3. По какой-то причине базовая карта не отображается, когда я использую OpenLayers 3.

Я вернулся на эту сторону света и провел следующие два теста. Теперь, когда у меня есть совпадающие URL-адреса и слои в обоих примерах, версия OL3 тоже не работает.

ОТКРЫТЫЕ СЛОИ 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>

И ОТКРЫТЫЕ СЛОИ 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 отправляет запросы на тайлы и получает ответы от сервера тайлов. Я исследовал 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>

person westandy    schedule 12.11.2015    source источник
comment
Ошибка говорит, что CRS не поддерживается, поэтому попробуйте другой. Например, EPSG:4326. vmap0.tiles.osgeo.org/wms/   -  person Grmpfhmbl    schedule 14.11.2015
comment
Grmpfhmbl - спасибо! Это помогло. Я публикую полный ответ внизу моего вопроса.   -  person westandy    schedule 16.11.2015


Ответы (1)


Поскольку вы не разместили URL-адрес своего сервера тайлов, я могу только догадываться. Это звучит как проблема CORS для меня. Если я вас правильно понял, когда в приведенном выше коде вы меняете 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 также должен работать.

person Grmpfhmbl    schedule 12.11.2015
comment
@Gmpfhmbl - Хороший улов! Во-первых, я сопоставил URL-адрес в OL2 с OL3. Версия OL3 больше не отображает карты (только элементы управления). Затем я запустил Chrome с параметром --disable-web-security и не получил карты с элементами управления. Однако я не получаю сообщение об ошибке XMLHttpRequest о Access-Control-Allow-Origin. Спасибо за ответ! - person westandy; 12.11.2015
comment
Вы смотрели на сетевой трафик? OL3 вообще пытается загрузить тайлы? Как получить доступ к HTML-файлу? Как file://path/to/file/index.html или вы поместили его на веб-сервер и получаете файл через HTTP? URL-адреса файлов также создают проблемы, когда речь идет об AJAX-вызовах. - person Grmpfhmbl; 12.11.2015
comment
Отличный момент! Я изучил сетевой трафик и использую mongoose-free-5.6, чтобы быстро создать веб-сервер из каталога. Я добавил информацию к своему первоначальному вопросу о сетевом трафике. - person westandy; 12.11.2015