OpenLayers 库渲染 MapServer WMS 图层时出现错误答案

【问题标题】：OpenLayers library renders MapServer WMS layer with errorsOpenLayers 库渲染 MapServer WMS 图层时出现错误
【发布时间】：2017-04-02 13:48:09
【问题描述】：

我已经设置了带有点图层的 MapServer WMS 服务。现在我正在尝试使用 OpenLayers 库编写一个简单的 WMS 客户端。一般来说，我得到了一些结果，但也有一些问题。有些点比其他点小。我尝试使用 QGIS 和 Leaflet 库连接到我的 WMS 服务。结果是完美的！ OpenLayers lib 存在一些问题。这个例子有什么问题？

客户端：

Openlayers v4.0.1
Windows 7 x64 SP1
Chrome 57.0.2987.133 [Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36]
IE 11.0.9600 [Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) 像 Gecko]
Firefox 51.0.1 [Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0]

服务器端：

ms4w 3.1.4

现场示例：http://vector-sol.ru/apps/ol.html
下载带有 shape 文件、html 页面和配置映射文件的 zip：http://map31.ru:8888/example.zip

html页面：

<!doctype html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
    <style>
    html, body { 
        margin: 0; 
        padding: 0; 
        height:100%; 
    }
    #info { 
        position:absolute; 
        z-index:10; 
        background-color:yellow; 
        right: 0;
    }
    #map { 
        height:100%; 
    }
    </style>
    <script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map">
        <div id="info">OpenLayers example</div>
    </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.Tile({
              source: new ol.source.TileWMS(({
                  projection: 'EPSG:4326',
                  url: 'http://map31.ru:8888/cgi-bin/mapserv.exe?map=../htdocs/mydemo/wms_ol.map',
                  params: { 'LAYERS': 'pop_places', 'TILED': true },
                  serverType: 'mapserver'
              }))
          })          
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

地图文件：

MAP

  NAME "WMS"
  IMAGETYPE      PNG
  EXTENT -180 -90 180 90 # Geographic
  SIZE 800 400
  IMAGECOLOR 220 221 239  

  SYMBOL
    NAME 'circle'
    TYPE ELLIPSE
    POINTS 1 1 END
    FILLED TRUE
  END 

  WEB
    METADATA
        wms_title                  "WMS Demo"
        wms_abstract               "Demo WMS Server"
        wms_onlineresource         "http://map31.ru:8888/cgi-bin/mapserv.exe?map=../htdocs/mydemo/wms_ol.map&"
        wms_srs                    "EPSG:4326"
        wms_getfeatureinfo         "http://map31.ru:8888/cgi-bin/mapserv.exe?map=../htdocs/mydemo/wms_ol.map&"
        wms_featureinfoformat      "text/plain"
        wms_enable_request          "*"
    END
  END  

  PROJECTION
    "init=epsg:4326"
  END

    LAYER
      NAME "pop_places"
      TYPE POINT
      STATUS ON
      DATA 'shape/ne_10m_populated_places.shp'
      PROJECTION
        "init=epsg:4326"
      END
      CLASS
        NAME "Pop Places"
        STYLE
          COLOR 10 100 50
          SYMBOL 'circle'
          SIZE 6        
        END
      END

      METADATA
        wms_title "Populated Places"
        wms_abstract "Populated places of the world"
        wms_srs "EPSG:4326"
        wms_include_items "all"
        wms_enable_request "*"
        #wms_extent "-180 -90 180 90"
      END     

    END # layer  

END

【问题讨论】：

标签： openlayers wms mapserver

【解决方案1】：

projection: 'EPSG:4326' 设置触发客户端光栅重投影，因为默认视图投影为'EPSG:3857'。您可能想让您的地图在该投影中工作，只需从您的 ol.source.TileWMS 配置中删除 projection: 'EPSG:4326' 行。

【讨论】：

非常感谢！但我不得不将我的 WMS 服务器输出投影更改为“EPSG:3857”。在这一步移除投影之后：'EPSG:4326' 行产生了影响。所以，这是服务器端解决方案。但是 OpenLayers 重投影有什么问题？
没有错。但是在 EPSG:4326 和 EPSG:3857 之间重新投影时，目标分辨率会随着纬度的变化而变化。否则你会得到模糊的图像。
或者您可以将wms_srs "EPSG:4326" 更改为wms_srs "EPSG:4326 EPSG:3857" 以获得服务器端重投影