OpenLayers показывает несколько растров из MapServer - PullRequest
Новая
       67

OpenLayers показывает несколько растров из MapServer

0 голосов
/ 16 мая 2018

Я хотел бы визуализировать растр в OpenLayers и извлечь его из MapServer с WMS. Мой map-файл работает нормально в режиме карты и просмотра, но когда я пытаюсь реализовать его в OpenLayers, это статическое изображение, которое я не могу увеличить. Я попытался использовать ol.layers.Image и получил один растр в верхнем левом углу. в верхней части базовой карты. Когда я использую ol.layer.Tile, я получаю несколько изображений рядом друг с другом. Я также попробовал это с другими проекциями (исходные данные в 4326) без каких-либо различий, а также с различными компиляциями URL, но также без различий. Я действительно не знаю, где моя ошибка, и рады любой помощи и предложениям.

Вот мой mapfile, который называется interactive.map

. 
MAP
    NAME "testMap"
    IMAGETYPE png24
    STATUS ON
    SIZE 1300 600
    EXTENT -180 -90 180 90
    STATUS ON
    SHAPEPATH "../data"
    IMAGECOLOR 189 201 225

    PROJECTION
      "init=epsg:4326"
    END

WEB
    TEMPLATE 'test1.html'
    IMAGEPATH "/ms4w/tmp/ms_tmp/"
    IMAGEURL "/ms_tmp/"
    METADATA
      "wms_title"          "WMS Demo Server for MapServer"
      "wms_onlineresource" "http://127.0.0.1/cgi-bin/mapserv.exe?map=wms.map&" 
      "wms_srs"            "EPSG:4326"
      "wms_enable_request" "*"  # necessary
    END
END # WEB

LAYER
    NAME "pop"
    METADATA
      "wms_title"         "World population"
      "wms_srs"           "EPSG:4326" 
      "gml_include_items" "all" 
      "gml_featureid"     "ID" 
      "wms_enable_request" "*"
    END
    TEMPLATE "layertmp.html" 
    TYPE raster
    STATUS DEFAULT
    DATA "Pop10.tiff"

    PROJECTION
      "init=epsg:4326"
    END

    CLASS
      NAME "0-100"
      EXPRESSION ([pixel] >= 0 and [pixel] < 100)
      STYLE
        COLOR 255 255 178
      END
    END

    CLASS
      NAME "100-500"
      EXPRESSION ([pixel] >= 100 and [pixel] < 500)
      STYLE
        COLOR 254 204 92
      END
    END

    CLASS
      NAME "500-1000"
      EXPRESSION ([pixel] >= 500 and [pixel] < 1000)
      STYLE
        COLOR 253 141 60
      END
    END

    CLASS
      NAME "1000-2000"
      EXPRESSION ([pixel] >= 1000 and [pixel] < 2000)
      STYLE
        COLOR 240 59 32
      END
    END

    CLASS
      NAME ">= 5000"
      EXPRESSION ([pixel] >= 5000)
      STYLE
        COLOR 189 0 38
      END
    END
  END # LAYER
END # MAP

и это мой файл OpenLayer: 

    <!DOCTYPE html>
<html>
  <head>
    <title>Single Image WMS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
  .ol-custom-overviewmap,
  .ol-custom-overviewmap.ol-uncollapsible {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
  }

  .ol-custom-overviewmap:not(.ol-collapsed)  {
    border: 1px solid black;
  }

  .ol-custom-overviewmap .ol-overviewmap-map {
    border: none;
    width: 300px;
  }

  .ol-custom-overviewmap .ol-overviewmap-box {
    border: 2px solid red;
  }

  .ol-custom-overviewmap:not(.ol-collapsed) button{
    bottom: auto;
    left: auto;
    right: 1px;
    top: 1px;
  }

  .ol-rotate {
    top: 170px;
    right: 0;
  }
</style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

    var projection = new ol.proj.Projection({
          code: 'EPSG:3857',
          units: 'm'
        });
        ol.proj.addProjection(projection);

    var overviewMapControl = new ol.control.OverviewMap({

           className: 'ol-overviewmap ol-custom-overviewmap',
           layers: [
             new ol.layer.Tile({
               source: new ol.source.OSM()
             })
           ],
           collapseLabel: '\u00BB',
           label: '\u00AB',
           collapsed: false
         });
      var layers = [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: 'http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/pop/htdocs/interact.map&layers=pops&mode=map',
        serverType: 'mapserver'  
          })
        })
      ];
      var map = new ol.Map({
        controls: ol.control.defaults().extend([
                  overviewMapControl
                ]),
        layers: layers,
        target: 'map',
        view: new ol.View({
          projection: projection,
          center: [2269873, 5087648],
          zoom: 2
        })
      });
    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 25 мая 2018

Основная проблема заключается в том, что вы пытаетесь использовать режим просмотра Mapserver, который не поддерживается OpenLayers 3 и более поздними версиями.Вместо этого вы должны использовать WMS.

Некоторые подсказки, которые мы увидим после того, как я определил более одной проблемы, по крайней мере.

Изменение в части Mapserver, в обоих WEB-блокеи блок LAYER 

"wms_srs"             "EPSG:4326"

с 

"wms_srs"             "EPSG:3857 EPSG:4326"

Попробуйте на данный момент изменить свой код для правильного управления вызовом уровня WMS из OpenLayers 

new ol.source.ImageWMS({
  url: 'http://127.0.0.1/cgi-bin/mapserv.exe?map=/ms4w/apps/pop/htdocs/interact.map&layers=pops&mode=map',
  serverType: 'mapserver'  
})

с помощью 

new ol.source.ImageWMS({
  url: 'http://127.0.0.1/cgi-bin/mapserv.exe',
  params: {
    'LAYERS': 'pop',
    'MAP': '/ms4w/apps/pop/htdocs/interact.map'
  },
  serverType: 'mapserver'  
})

Код ниже можно удалить, так как "EPSG: 3857" уже является проекцией по умолчанию 

var projection = new ol.proj.Projection({
  code: 'EPSG:3857',
  units: 'm'
});
ol.proj.addProjection(projection);

Следовательно, projection: projection, можно удалить.

Изменить[2269873, 5087648] с ol.proj.fromLonLat([20.390616089102306, 41.50857324328069]), которые делают то же самое, что и предыдущий код, но используют десятичные градусы для установки центра (более просто изменить с человеческой точки зрения ИМХО)

...