How to change openlayer 6 view center?

Question

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 99%;
        height: 95%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div> 
<div id="mouse-position"></div>

    <script>

proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);
ol.proj.get("EPSG:32643").setExtent([291627, 904686, 958569, 1426831]);

var projection = new ol.proj.Projection({
  code: 'EPSG:32643',
  extent: [291627,904686,958569,1426831],
});
  
var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: projection,//'EPSG:32643',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: '&nbsp;',
});
var scaleLine = new ol.control.ScaleLine({
units: 'metric',
});
 
var map = new ol.Map({
  controls: ol.control.defaults().extend([mousePositionControl,scaleLine]),
  target: 'map',
  layers: [    
    new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://103.10.168.74:8081/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png",
                projection:projection,
                tileGrid: ol.tilegrid.createXYZ({
                  extent: [291627, 904686, 958569, 1426831],
                  maxResolution: 2605.2421875,
                  tileSize: [256, 256],
                  maxZoom: 10,
                }),
          }),
    }),
    new ol.layer.Vector({
        source: new ol.source.Vector({  
            features: [new ol.Feature({
                  geometry: new ol.geom.Point([614971.473,1218630.894]),
            })],
        }),
        renderBuffer: 200,
        style: new ol.style.Style({
            image: new ol.style.Icon({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'https://openlayers.org/en/latest/examples/data/icon.png'
            })
        })
  }),
  new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
        geometry: new ol.geom.Point([716446.977962414,942574.737260181]),

             })
         ]
     })
  }) 
  ],
  view: new ol.View({
    projection: projection, 
    units:"metric",
    zoom:1,
    maxResolution:2605.2421875,
    center:[654496.136597752,1155181.26900064],
    numZoomLevels:13,        
    constrainOnlyCenter: true,
    maxZoom:10,
    minZoom:1,
  })
});
  
mousePositionControl.setProjection(projection);
   </script>
  </body>
</html>

I have added a vector layer & a tile layer in ol6 (mapnik & mapproxy). But there is issue with the projection, both layers are far apart. My code is

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/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://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 99%;
        height: 99%;
    border:1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>

proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);

 //-----vector lyr-----
var london = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([8.5149092,76.9527723])),
}); 
london.setStyle(
  new ol.style.Style({
    image: new  ol.style.Icon({
      color: '#4271AE',
      crossOrigin: 'anonymous',
      src: 'https://openlayers.org/en/latest/examples/data/icon.png',
      scale: 0.5,
    }),
  })
);
var vectorSource = new ol.source.Vector({
  features: [london],
  projection: "EPSG:32643",
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
});
  //-----vector lyr-----
         
var map = new ol.Map({
  target: 'map',
  layers: [    
    new ol.layer.Tile({
            source: new ol.source.XYZ({
           url: "http://127.0.01:8080/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png",
           projection: "EPSG:32643",
       }),
     }), 
     vectorLayer    
  ],
  view: new ol.View({
    projection: "EPSG:32643",
    units:"m",
    zoom:1,
    maxZoom:10,
    minZoom:1,
    center:[8.5149092,76.9527723],

  })
});

map.getView().fit(vectorSource.getExtent());
map.getView().setZoom(map.getView().getZoom() - 10);

//map.getView().setCenter(ol.proj.transform([8.5149092,76.9527723], 'EPSG:32643', 'EPSG:32643'));

    </script>
  </body>
</html>

I have tried to change center of map, but its not working. My map is in 'meters' UTM 43N & EPSG: 32643. The extent I used in ol2 was 291627,904686,958569,1426831 & maxResolution:2605.2421875. I also tried to add tileGrid to tile layer,but it also not working.

var resolutions = [
    2605.2421875,
    // don't know how to find resolution
];
tileGrid: new ol.tilegrid.TileGrid({
      extent: [291627,904686,958569,1426831],
      resolutions: resolutions,
      tileSize: [256, 256],
}),

Mike Mike · Accepted Answer · 2020-09-09T12:48:05

Your geometry and center need to be in the same projection as the view

  geometry: new ol.geom.Point(ol.proj.fromLonLat([8.5149092, 76.9527723], "EPSG:32643")),


  center: ol.proj.fromLonLat([8.5149092, 76.9527723], "EPSG:32643"),

You do not need to set projection on vectorSource.

If your tile grid has zoom levels 0 to 10 tileGrid could be set using

tileGrid: ol.tilegrid.createXYZ({
      extent: [291627, 904686, 958569, 1426831],
      maxResolution: 2605.2421875,
      tileSize: [256, 256],
      maxZoom: 10,
}),

Your might also want to set the projection extent to match

ol.proj.get("EPSG:32643").setExtent([291627, 904686, 958569, 1426831]);

For a TMS source where the origin is at the bottom left of the tile grid OpenLayers expects the maxResolution to match the height of the grid extent, but in your case it matches the width. One way to fix that is to use a larger extent where the height is equal to the width. Adding an OSM layer shows it is now in the correct position.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
    <link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 99%;
        height: 95%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div> 
<div id="mouse-position"></div>

    <script>

proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);
ol.proj.get("EPSG:32643").setExtent([291627, 904686, 958569, 1426831]);

var projection = new ol.proj.Projection({
  code: 'EPSG:32643',
  extent: [291627,904686,958569,1426831],
});
  
var mousePositionControl = new ol.control.MousePosition({
  coordinateFormat: ol.coordinate.createStringXY(4),
  projection: projection,//'EPSG:32643',
  // comment the following two lines to have the mouse position
  // be placed within the map.
  className: 'custom-mouse-position',
  target: document.getElementById('mouse-position'),
  undefinedHTML: '&nbsp;',
});
var scaleLine = new ol.control.ScaleLine({
units: 'metric',
});
 
var extent = [291627, 904686, 958569, 1426831];
var fullExtent = [extent[0], extent[1], extent[2], extent[1] + extent[2] - extent[0]];

var map = new ol.Map({
  controls: ol.control.defaults().extend([mousePositionControl,scaleLine]),
  target: 'map',
  layers: [   
     new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: "http://103.10.168.74:8081/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png",
                projection:projection,
                tileGrid: ol.tilegrid.createXYZ({
                  extent: fullExtent,
                  maxResolution: 2605.2421875,
                  tileSize: [256, 256],
                  maxZoom: 10,
                }),
          }),
    }),
    new ol.layer.Tile({
      source: new ol.source.OSM(),
      opacity: 0.5,
    }),
    new ol.layer.Vector({
        source: new ol.source.Vector({  
            features: [new ol.Feature({
                  geometry: new ol.geom.Point([614971.473,1218630.894]),
            })],
        }),
        renderBuffer: 200,
        style: new ol.style.Style({
            image: new ol.style.Icon({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'https://openlayers.org/en/latest/examples/data/icon.png'
            })
        })
  }),
  new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
        geometry: new ol.geom.Point([716446.977962414,942574.737260181]),

             })
         ]
     })
  }) 
  ],
  view: new ol.View({
    projection: projection, 
    units:"metric",
    zoom:1,
    maxResolution:2605.2421875,
    center:[654496.136597752,1155181.26900064],
    numZoomLevels:13,        
    constrainOnlyCenter: true,
    maxZoom:10,
    minZoom:1,
  })
});
  
mousePositionControl.setProjection(projection);
   </script>
  </body>
</html>

How to change openlayer 6 view center?

1 Answers