我尝试使用openlayer显示geoserver tif,但显示不正确。这是我的步骤:
1.我从本地geoserver中选择一个tif,例如(topp:states)
2.然后尝试使用openlayer api加载它
const tifMap = (target) => {
new Map({
target,
pixelRatio: 1,
layers: [
new TileLayer({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/topp/wms',
params: {'LAYERS': 'topp:states',
'BBOX': '-124.73142200000001,24.955967,-66.969849,49.371735',
'CRS': 'EPSG:4326',
'FORMAT': 'image/jpeg',
'VERSION': '1.1.0'
},
serverType: 'geoserver'
})
})
],
view: new View({
center: [741189, -3741196],
zoom: 4
})
})
};
3。不幸的是,div上显示了几个相同的图像,我不知道为什么,实际上我试图通过浏览器打开链接(openlayer试图获取),它显示正常。
答案 0 :(得分:0)
OpenLayers根据源选项中设置的投影以及TileWMS的图块网格或ImageWMS的视口,自动创建BBOX和CRS参数。可以在tilegrid中(以服务器投影为单位)或在图层中(以视图投影为单位)设置最大范围。假设服务器仅支持EPSG:4326,并且您希望将切片输出显示为EPSG:3857,那么以下两种方法都可以:
new TileLayer({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/topp/wms',
params: {'LAYERS': 'topp:states',
'FORMAT': 'image/jpeg',
'VERSION': '1.1.0'
},
serverType: 'geoserver',
projection: 'EPSG:4326'
}),
extent: transformExtent([-124.73142200000001,24.955967,-66.969849,49.371735], 'EPSG:4326', 'EPSG:3857')
})
。
new TileLayer({
source: new TileWMS({
url: 'http://localhost:8080/geoserver/topp/wms',
params: {'LAYERS': 'topp:states',
'FORMAT': 'image/jpeg',
'VERSION': '1.1.0'
},
serverType: 'geoserver',
projection: 'EPSG:4326',
tilegrid: createXYZ({extent: [-124.73142200000001,24.955967,-66.969849,49.371735]})
})
})