I'm facing an issue in changing the extents of the map in my openlayers 3 code. I'm using EPSG:4326 as the projection format and I intent to change the bounds to my 'bounds' variable. I'm using
map.getView().fitExtent(bounds, map.getSize());
for changing the extent of the map. The issue is that first I'm providing bounds values to be [76.9501571655273, 76.9501571655273,78.5841217041016, 78.5841217041016], and after fitting the extent of the map to this value, when I enquire the map extents using
map.getView().calculateExtent(map.getSize());
I'm getting [76.39384841918945, 76.39384841918945, 79.14043045043945, 79.14043045043945] as output. I have a feeling that this might be a projection issue, but I can't figure out where I have done wrong. Can someone please let me know what am I doing wrong?
Here is the Full Code (I've removed unnecessary code to make it more readable):
<!doctype html>
<html lang="en">
<head>
<script src="http://openlayers.org/en/v3.5.0/build/ol-debug.js"></script>
<title>OpenLayers map preview</title>
</head>
<body>
<div id="map" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
var format = 'image/png';
var bounds = [76.9501571655273, 76.9501571655273,
78.5841217041016, 78.5841217041016];
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: 'http://localhost:9000/geoserver/TargetWorkspace/wms',
params: {'FORMAT': format,
'VERSION': '1.1.1',
LAYERS: 'TargetWorkspace:hyderbadtargets',
STYLES: '',
}
})
});
var projection1 = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [
untiled
],
view: new ol.View({
projection: projection1,
center: [77.7671394348, 77.7671394348],
zoom: 0
})
});
var ext = map.getView().calculateExtent(map.getSize());
console.log("Map Bound Before: " + ext[0] + " " + ext[1] + " "+ ext[2] + " "+ ext[3] + " ");
map.getView().fitExtent(bounds, map.getSize());
var ext2 = map.getView().calculateExtent(map.getSize());
console.log("Map Bound After: " + ext2[0] + " " + ext2[1] + " "+ ext2[2] + " "+ ext2[3] + " ");
</script>
</body>
</html>
Thank You,
Sourabh
WMS provides images with predefined scales/resolutions, for example zoom 8 can have resolution 1222.992452 and scale 1:3000000. How is possible to adapt discrete zoom values to the bounds that you provides? OL3 finds for you the best zoom level whose bound coordinates are closed to the bounds that you wants.
Additionally, i have noticed in your code that you redefine projection EPSG:4386 with:
new ol.proj.Projection({......However, OL3 contains already in the library itself this projection. Better to use:new ol.proj.get('EPSG:4326');