OpenLayers库呈现错误

时间:2017-04-02 13:48:09

标签: openlayers wms mapserver

我已经使用点图层设置了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,与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文件:

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 

1 个答案:

答案 0 :(得分:0)

projection: 'EPSG:4326'设置会触发客户端光栅重投影,因为默认视图投影为'EPSG:3857'。您可能希望在预测中使地图正常工作,只需从projection: 'EPSG:4326'配置中删除ol.source.TileWMS行。