时间戳

首页 > 解决方案 > Openlayers 不重新投影 WMS 查询

javascript - Openlayers 不重新投影 WMS 查询

问题描述

我的项目中有一个 openlayers 地图，我想在其中添加 WMS 切片。这是我的代码：

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      name: 'wmstiles',
      source: new ol.source.TileWMS({
        url: 'https://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php',
        serverType: 'geoserver',
        version:"1.1.1",
        params: {
          LAYERS: 'PLU%2Fplu',
          VERSION: '1.1.1',
          TRANSPARENT: false,
          HEIGHT: 256,
          WIDTH: 256
        },
        pixelRatio: 1,
        projection: 'EPSG:2154'
      }),
      visible: false
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([3.1666, 50.6167]),
    zoom: 13,
    maxZoom: 20,
  })
});

如您所见，我正在尝试将坐标投影到EPSG:2154（法国），以便将它们发送到 WMS 服务器。但是我的地图是空白的，因为 openlayers 没有生成具有良好投影的调用。

它为我生成了这个：https ://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&IN=PLU%2Fplu&LAYERS=PLU%252Fplu&HEIGHT=919&WIDTH= 2881&SRS=EPSG%3A3857&STYLES=&BBOX=324977.41473478096%2C6544989.716173889%2C380031.18435717915%2C6562551.1234224085

而不是这样的东西（从另一个不使用openlayers的网站生成）：https ://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php?in=PLU/plu&service=WMS&request=GetMap&version=1.1.1&layers=PLU %2Fplu&styles=&format=image%2Fjpeg&transparent=false&height=256&width=256&srs=EPSG%3A2154&bbox=704615.2885901299,7064111.541254971,705393.894388002,7064886.656737898

如您所见，它没有重新投影EPSG:2154到EPSG:3857. 还有其他问题，例如高度和宽度，但这是另一回事。如果我将边界框从工作链接复制/粘贴到第一个，它就可以工作。

标签： javascriptopenlayers-3map-projectionsepsg

解决方案

您的代码对我有用（在添加 IN 参数之后）。您是否定义了投影（如果使用 OpenLayers 5 则注册它）？我添加了一个半透明的 OSM 层来检查重投影是否正确对齐。您不需要指定瓦片大小，OpenLayers 会根据默认瓦片网格和其他参数自动设置。

proj4.defs('EPSG:2154', '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ');
if (ol.proj.proj4 && ol.proj.proj4.register) { ol.proj.proj4.register(proj4); }

const map = new ol.Map({
  layers: [
new ol.layer.Tile({
  name: 'wmstiles',
  source: new ol.source.TileWMS({
    url: 'https://ssl-geowms.lillemetropole.fr/dynmapr/dynmapr.php',
    serverType: 'geoserver',
    version:"1.1.1",
    params: {
      IN: "PLU/plu",
      LAYERS: 'PLU%2Fplu',
      VERSION: '1.1.1',
      TRANSPARENT: false,
    },
    pixelRatio: 1,
    projection: 'EPSG:2154',
  }),
  visible: true,
}),
new ol.layer.Tile({
    source: new ol.source.OSM(),
    opacity: 0.5
}),
  ],
  target: 'map',
  view: new ol.View({
center: ol.proj.fromLonLat([3.1666, 50.6167]),
zoom: 13,
maxZoom: 20,
  })
});
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<div id="map" class="map"></div>

推荐阅读