javascript - OpenLayers 5.3 How I can set a square BBOX in a ol.layer.Image?

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams origin: [-e, -e], extent: [-e, -e, e, e], resolutions: [168e3, 84e3, 42e3, 21e3, 14e3, 5600, 2800, 1400, 560, 280, 140, 70, 28, 14, 7, 5.6, 4.2, 2.8, 1.4, .56, .42, .28], var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() new ol.layer.Image({ source: new ol.source.ImageWMS({ url: 'hidelink', params: { 'LAYERS': 'pianificazione:v_ps_timewms_vinc_archeologico_vigente', 'SRS':'EPSG:900913', 'FORMAT': 'image/png; mode=8bit', 'VERSION': '1.1.0', 'WIDTH': '256', 'HEIGHT': '256' tileGrid: tileGrid return layers;

I need that this rest call return with a image in a square BBOX . How I can do?

ImageWMS will set the BBOX to fill the viewport, TileWMS sets the BBOX to fill a tile, in both cases any width WIDTH and HEIGHT you specify will be overridden. Since you have set up a tile grid I suspect you wanted tiles

        new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'hidelink',
                params: {
                    'LAYERS':  'pianificazione:v_ps_timewms_vinc_archeologico_vigente',
                    'SRS':'EPSG:900913',
                    'FORMAT': 'image/png; mode=8bit',
                    'VERSION': '1.1.0'
            tileGrid: tileGrid
What's not working?  With that layer parameter I presume you are using one of the Italian municipal services.  I found this one for Firenze and this code is returning 256 x 256 tiles for me 
<!DOCTYPE html>
    <title>WMS Test</title>
    <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.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  </head>
    <div id="map" class="map"></div>
    <script>
 function createLayer () {
        var e = 20037508.34;
        var tileGrid = new ol.tilegrid.TileGrid({
            origin: [-e, -e],
            extent: [-e, -e, e, e],
            resolutions: [168e3, 84e3, 42e3, 21e3, 14e3, 5600, 2800, 1400, 560, 280, 140, 70, 28, 14, 7, 5.6, 4.2, 2.8, 1.4, .56, .42, .28],
        var layers = [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            new ol.layer.Tile({
                source: new ol.source.TileWMS({
                    url: 'http://tms.comune.fi.it/geowebcache/service/wms',
                    params: {
                        'LAYERS':  'pianificazione:v_ps_timewms_vinc_archeologico_vigente',
                        'SRS':'EPSG:900913',
                        'FORMAT': 'image/png; mode=8bit',
                        'VERSION': '1.1.0'
                tileGrid: tileGrid
        return layers;
    var map = new ol.Map({
        layers: createLayer (),
        target: "map",
        view: new ol.View({
            center: ol.proj.fromLonLat([11.23, 43.77]),
            zoom: 12
    </script>
  </body>
</html>
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.