Openlayers 不重新投影 WMS 查询
Openlayers not re-projecting WMS queries
我的项目中有一个 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没有用好的投影生成调用。
而不是像这样的东西(从另一个没有使用 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
中。还有其他问题,如高度和宽度,但这是另一回事。如果我 copy/paste 从工作 link 到第一个的边界框,它就可以工作。
你的代码对我有用(在添加 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>
我的项目中有一个 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没有用好的投影生成调用。
而不是像这样的东西(从另一个没有使用 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
中。还有其他问题,如高度和宽度,但这是另一回事。如果我 copy/paste 从工作 link 到第一个的边界框,它就可以工作。
你的代码对我有用(在添加 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>