Ufdjrw

I tried to use openlayer to show geoserver tif, but it shows not correctly. Here are my steps:

1. I choose a tif from local geoserver, for example(topp:states)

2. then trying to load it with 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. unfortunately, several same image show on the div, I don't know why, actually I tried to open the link (openlayer tried to get) via browser, it shows normal.

OpenLayers automatically creates BBOX and CRS parameters based on the projection set in the source options and the tile grid for TileWMS or viewport for ImageWMS. A maximum extent can be set either in the tilegrid (in server projection units) or on the layer (in view projection units). Assuming the server only supported EPSG:4326 and you wished to display a tiled output as EPSG:3857 either of these would work:

 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])
 )
 )