OpenLayers 显示来自 MapServer 的多个栅格

Question

我想在 OpenLayers 中可视化栅格并使用 WMS 从 MapServer 检索它。我的地图文件在地图和浏览模式下工作正常，但当我尝试在我的 OpenLayers 中实现它时，它是一张静态图像，我无法放大。我尝试使用 ol.layers.Image 并在左上角得到一个光栅在底图之上。当我使用 ol.layer.Tile 时，我会得到多个相邻的图像。我也试过用不同的投影（原始数据在 4326）没有任何区别，也用不同的 URL 编译，但也没有区别。我真的不知道我的错误在哪里，很高兴得到任何帮助和建议。

这是我的地图文件 interact.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>

Answer 1

主要问题是您正在尝试使用 OpenLayers 3 及更高版本不支持的 Mapserver 浏览模式。您应该改用 WMS。

一些线索，我们会在之后看到，因为我至少确定了不止一个问题。

Mapserver 部分的变化，在 WEB 块和 LAYER 块中都如此

"wms_srs"             "EPSG:4326"

和

"wms_srs"             "EPSG:3857 EPSG:4326"

现在尝试更改您的代码以正确管理来自 OpenLayers 的 WMS 图层调用

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])，与之前的代码相同，但使用十进制度数设置中心（恕我直言，从人的角度来看更容易更改）

OpenLayers 显示来自 MapServer 的多个栅格

OpenLayers showing multiple raster from MapServer

mapserver

wms

openlayers