diff --git a/examples/wmts-ign.html b/examples/wmts-ign.html new file mode 100644 index 0000000000..82d9e1c1b2 --- /dev/null +++ b/examples/wmts-ign.html @@ -0,0 +1,18 @@ +--- +template: example.html +title: IGN WMTS example +shortdesc: Demonstrates displaying IGN (France) WMTS layers. +docs: > + In this example an IGN WMTS layer is displayed. + For more information on IGN's WMTS service see the + IGN Géoportail API web page + and + + Descriptif technique des web services du Géoportail (french). +tags: "french, ign, geoportail, wmts" +--- +
+
+
+
+
diff --git a/examples/wmts-ign.js b/examples/wmts-ign.js new file mode 100644 index 0000000000..ae41c5b6ac --- /dev/null +++ b/examples/wmts-ign.js @@ -0,0 +1,65 @@ +goog.require('ol.Attribution'); +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.control'); +goog.require('ol.extent'); +goog.require('ol.layer.Tile'); +goog.require('ol.proj'); +goog.require('ol.source.WMTS'); +goog.require('ol.tilegrid.WMTS'); + + +var map = new ol.Map({ + target: 'map', + renderer: 'dom', + controls: ol.control.defaults({ + attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ + collapsible: false + }) + }), + view: new ol.View({ + zoom: 5, + center: ol.proj.transform([5, 45], 'EPSG:4326', 'EPSG:3857') + }) +}); + +var resolutions = []; +var matrixIds = []; +var proj3857 = ol.proj.get('EPSG:3857'); +var maxResolution = ol.extent.getWidth(proj3857.getExtent()) / 256; + +for (var i = 0; i < 18; i++) { + matrixIds[i] = i.toString(); + resolutions[i] = maxResolution / Math.pow(2, i); +} + +var tileGrid = new ol.tilegrid.WMTS({ + origin: [-20037508, 20037508], + resolutions: resolutions, + matrixIds: matrixIds +}); + +// API key valid for 'openlayers.org' and 'localhost'. +// Expiration date is 06/29/2018. +var key = '2mqbg0z6cx7ube8gsou10nrt'; + +var ign_source = new ol.source.WMTS({ + url: 'http://wxs.ign.fr/' + key + '/wmts', + layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS', + matrixSet: 'PM', + format: 'image/jpeg', + projection: 'EPSG:3857', + tileGrid: tileGrid, + style: 'normal', + attributions: [new ol.Attribution({ + html: '' + + '' + })] +}); + +var ign = new ol.layer.Tile({ + source: ign_source +}); + +map.addLayer(ign);