Despite the projection setting, the map is skewed. I tried the example from the openlayers 5 documentation and it works, I don't know what I'm doing wrong.
initializeMap() {
const projection = getProjection("EPSG:4326");
const projectionExtent = projection.getExtent();
let size = getWidth(projectionExtent) / 256;
let resolutions = new Array(14);
const matrixIds = new Array(14);
for (let z = 0; z < 14; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
this.map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
new TileLayer({
crossOrigin: true,
source: new WMTS({
url:
"http://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO",
matrixSet: ["EPSG:4326"],
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
})
],
target: "map",
view: new View({
center: fromLonLat([19.4569911, 51.7687323]),
zoom: 4
})
});
}
Here is screen with problem.
I've checked the GetCapabilities for that service and the tilegrid isn't based on the global projection extent (instead it uses [13.8, 48.8, 24.4, 55] and the tile size is 512). While you could update your code to reflect that it is easier to let OpenLayers parse the GetCapabilities to create the source options:
var parser = new ol.format.WMTSCapabilities();
var url = 'https://mapy.geoportal.gov.pl/wss/service/WMTS/guest/wmts/ORTO?SERVICE=WMTS&REQUEST=GetCapabilities';
fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
var result = parser.read(text);
var options = ol.source.WMTS.optionsFromCapabilities(result, {
layer: 'ORTOFOTOMAPA',
matrixSet: 'EPSG:4326',
crossOrigin: true,
});
//console.log(options);
this.map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
source: new ol.source.WMTS(options),
opacity: 0.5
})
],
target: "map",
view: new ol.View({
center: ol.proj.fromLonLat([19.4569911, 51.7687323]),
zoom: 4
})
});
});
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>