Skip to content

Instantly share code, notes, and snippets.

@oscarfonts

oscarfonts/.block

Last active December 4, 2017 13:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oscarfonts/77fe468a64ae0075c4e4c9d5f5dffaa7 to your computer and use it in GitHub Desktop.
Save oscarfonts/77fe468a64ae0075c4e4c9d5f5dffaa7 to your computer and use it in GitHub Desktop.
Download ZIP
Ejemplo WMTS en OpenLayers
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo WMTS en OpenLayers</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<style type="text/css">
html, body, #map {
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script>
var projection = ol.proj.get("EPSG:3857");
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(31);
var matrixIds = new Array(31);
for (var z = 0; z <= 31; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:900913:" + z;
}
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: ol.proj.transform([-6.372, 39.476], 'EPSG:4326', 'EPSG:3857'),
zoom: 16
}),
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
url: 'https://ide.caceres.es/geoserver/gwc/service/wmts',
layer: 'callejero:Callejero_Caceres',
matrixSet: 'EPSG:900913',
format: 'image/png8',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
})
]
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment