Question

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

这是我的mapfile，名为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。

一些线索，我们之后会看到，因为我至少发现了一个以上的问题。

在WEB块和LAYER块中更改Mapserver部分

"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'  
})

以下代码可以删除为＆＃34; EPSG：3857＆＃34;已经是默认投影

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])与您之前的代码相同但使用十进制度设置中心（更简单地从人类观点改变IMHO）

OpenLayers从MapServer显示多个栅格

1 个答案: