Как добавить WMS в OpenLayers 5.3.0?

Я пытаюсь интегрировать наложение WMS на мою карту OpenLayers по умолчанию. Используя только слой ol.source.OSM({}), карта отображается нормально, но когда я добавляю слой WMS в массив layers: [], он просто дает мне пустую карту. Я использую следующий код, но он не работает, что мне нужно изменить?

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 100%;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>WMS Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile(
                {
                    source: new ol.source.OSM({})
                }),
            new ol.layer.ImageWMS(
                {
                    source: new ol.source.ImageWMS(
                    {
                        url: 'http://www.igeo.pt/WMS/Geologia/CGP1M'
                    })
                })
        ],
        view: new ol.View(
            {
                center: ol.proj.fromLonLat([37.41, 8.82]),
                zoom: 4
            })
      });
    </script>
  </body>
</html>

openlayers wms
person Steffan    schedule 23.01.2019    source источник
comment
Вам нужно будет указать параметры WMS (объект, указывающий как минимум СЛОИ) см. пример openlayers.org/en/v4.6.5/examples/wms-image.html   -  person Mike    schedule 23.01.2019
comment
Понимаю. Как узнать, что это за слои? Все, что у меня есть, это ссылка на WMS.   -  person Steffan    schedule 23.01.2019
comment
его ol.layer.Image для источника ImageWMS.   -  person Bharti Mohane    schedule 24.01.2019

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете просмотреть GetCapabilities для этого URL-адреса http://www.igeo.pt/WMS/Geologia/CGP1M?SERVICE=WMS&REQUEST=GetCapabilities Имеется 17 слоев с именами от 1 до 20 (3, 13 и 18 отсутствуют) с описаниями на португальском языке. В маловероятном случае, если вы захотите, чтобы все настройки были такими, как показано ниже (обратите внимание, что конструктор слоя просто ol.layer.Image, порядок долгота/широта, и я сделал его полупрозрачным, чтобы фон все еще был виден)

        new ol.layer.Tile(
            {
                source: new ol.source.OSM({})
            }),
        new ol.layer.Image(
            {
                source: new ol.source.ImageWMS(
                {
                    url: 'http://www.igeo.pt/WMS/Geologia/CGP1M',
                    params: { LAYERS: '1,2,4,5,6,7,8,9,10,11,12,14,15,16,17,19,20'}
                }),
                opacity: 0.5
            })
    ],
    view: new ol.View(
        {
            center: ol.proj.fromLonLat([-8.82, 37.41]),
            zoom: 4
        })

На полноэкранной карте обычно более эффективно запрашивать WMS в мозаичных областях, чтобы избежать постоянного запроса всей области при панорамировании.

        new ol.layer.Tile(
            {
                source: new ol.source.TileWMS(
                {
                    url: 'http://www.igeo.pt/WMS/Geologia/CGP1M',
                    params: { LAYERS: '1,2,4,5,6,7,8,9,10,11,12,14,15,16,17,19,20'}
                }),
                opacity: 0.5
            })
person Mike    schedule 23.01.2019
comment
Этот код вызывает у меня проблемы. Я не могу пропустить импорт {Map, View} из 'ol'; библиотеку и используйте ol.Map или ol.View, используя прямую ссылку. Также ol.proj.fromLonLat не работает, возможно, по тем же причинам. Кажется, мне нужно напрямую включать библиотеки, что доставляет неудобство, потому что в итоге у меня получается многострочный заголовок. - person Steffan; 24.01.2019
comment
Он работает при замене кода в вашем вопросе, который использует полную библиотеку сборки. Если вы хотите использовать NPM, синтаксис будет зависеть от того, как вы импортируете. - person Mike; 24.01.2019
comment
Я понимаю. В настоящее время я использую NPM. Мне сказали, что более эффективно использовать модули явно. Я по-прежнему не могу использовать ваш код View, даже если я импортирую из LonLat с помощью iimport { fromLonLat } из 'ol/proj';. Это вызывает пустую карту. Есть идеи, почему? - person Steffan; 24.01.2019
comment
Вот пример использования fromLonLat через NPM openlayers.org/en/latest/examples/xyz -esri.html Также примеры ImageWMS и TileWMS NPM openlayers.org/ en/latest/examples/wms-image.html openlayers.org /en/latest/examples/wms-tiled.html - person Mike; 24.01.2019
comment
Проблема @Mike с официальными примерами OpenLayers заключается в том, что все они написаны как import ... и т. д. и т. д., где синтаксис сценария отличается от того, когда вы работаете с загруженной копией библиотек javascript. - person Theo F; 29.04.2020