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: ' ', }); 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],
}),
1 answers
solution1
0 ACCPTED 2020-09-09 12: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: ' ', }); 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to change openlayer 2 marker to openlayer 3
How can I change the world view with an high quality jpg of a fantasy world in openlayer?
How to change circle radius using slider in openlayer
How to change zoom level text in Openlayer?
How can I change the style of the icons in a map with openlayer and a geoJson file
How do I re-center an Openlayer 6 map after an effect triggered by a React useEffect hook
openlayer change feature attributes with a strategy
How to set extent property in view after map initialize using openlayer3?
How to create openlayer map in iphone?
How to show polyline using OpenLayer
Related Tags