Openlayers 3 WMTS
Question
I am having an issue where I am trying to load a WMTS feed using Openlayers and seem not to be getting good results. For ArcGis services this seems to go through but not GeoServer's WMTS services. The code is as shown below. I keep getting a javascript error
TypeError: Argument 2 of CanvasRenderingContext2D.putImageData is not a finite floating-point value.
The code I am using is shown below. Regardless of changing the projection the error remains the same. Please advise. Raw Gist here
<!DOCTYPE html>
<html>
<head>
<title>WMTS example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.8.2/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.8.2/build/ol.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(21);
var matrixIds = new Array(21);
for (var i=0; i<21; ++i) {
matrixIds[i] = "EPSG:4326:" + i;
}
var attribution = new ol.Attribution({
html: 'Tiles © <a href="http://services.arcgisonline.com/arcgis/rest/' +
'services/Demographics/USA_Population_Density/MapServer/">ArcGIS</a>'
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.7
}),
new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.WMTS({
attributions: [attribution],
url: 'http://suite.opengeo.org/geoserver/gwc/service/wmts',
layer: 'opengeo:countries',
matrixSet: 'ESPG:4326',
format: 'image/png',
style : 'default',
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
center: [-13677832, 5213272],
//center: [-11158582, 4813697],
zoom: 1
})
});
</script>
</body>
</html>
2 answers
solution1
1 2015-09-09 18:20:29
Your resolutions array is just filled with undefined s, right? You should fill it with you desired resolutions.
solution2
0 2016-06-16 15:38:04
You should to init your resolution array like this:
for (var z = 0; z < 21; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:4326:" + z;;
}
Did you set map's projection to ol.proj.get('EPSG:4326')?
var view = new ol.View({
center: [0, 0],
zoom: 1,
projection: ol.proj.get('EPSG:4326')
});
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.