Add an IGN WMTS example

2013-06-20 15:56:52 +02:00
parent a19cb9ca64
commit 943bad6e17
3 changed files with 148 additions and 0 deletions
--- a/examples/data/IGNWMTSCapabilities.xml
+++ b/examples/data/IGNWMTSCapabilities.xml
--- a/examples/wmts-ign.html
+++ b/examples/wmts-ign.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <title>IGN WMTS example</title>
+    <style>
+      .ol-logo ul li {
+        margin-right: 3px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./">OpenLayers 3 Examples</a>
+          <ul class="nav pull-right">
+            <li><iframe class="github-watch-button" src="http://ghbtns.com/github-btn.html?user=openlayers&repo=ol3&type=watch&count=true"
+  allowtransparency="true" frameborder="0" scrolling="0" height="20" width="90"></iframe></li>
+            <li><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="openlayers">&nbsp;</a></li>
+            <li><div class="g-plusone-wrapper"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span12">
+          <h4 id="title">IGN WMTS example</h4>
+          <p id="shortdesc">Demonstrates displaying IGN (France) WMTS layers.</p>
+          <div id="docs">
+            <p>In this example two IGN WMTS layers are displayed: <em>Ortho imagery and Cadastral parcels.</em>.
+            For more information on IGN's WMTS service see the
+            <a href="http://professionnels.ign.fr/api-sig">IGN Géoportail API web page</a> (french).</p>
+            <p>See the <a href="wmts-ign.js" target="_blank">wmts-ign.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">french, ign, geoportail, wmts</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
+    <script src="loader.js?id=wmts-ign" type="text/javascript"></script>
+    <script src="../resources/social-links.js" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/examples/wmts-ign.js
+++ b/examples/wmts-ign.js
@@ -0,0 +1,83 @@
+goog.require('ol.Attribution');
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.parser.ogc.WMTSCapabilities');
+goog.require('ol.source.WMTS');
+
+
+// The WMTS Capabilities document includes IGNF:WGS84G as a supported
+// CRS. We include the Proj4js definition of that projection to prevent
+// Proj4js from requesting that definition from spatialreference.org.
+
+Proj4js.defs['IGNF:WGS84G'] = '+title=World Geodetic System 1984 ' +
+    '+proj=longlat +towgs84=0.0000,0.0000,0.0000,0.0000,0.0000,0.0000,' +
+    '0.000000 +a=6378137.0000 +rf=298.2572221010000 +units=m +no_defs <>';
+
+// API key valid for "localhost" and "ol3js.org". Expiration date
+// is 21/06/2014.
+var key = 'crrypaoz7j1ifbalcobnumb0';
+
+var map = new ol.Map({
+  renderer: ol.RendererHint.CANVAS,
+  target: 'map'
+});
+
+var xhr = new XMLHttpRequest();
+
+// data/IGNWMTSCapabilities.xml downloaded from
+// http://wxs.ign.fr/cle/geoportail/wmts?SERVICE=WMTS&REQUEST=GetCapabilities
+// Stored locally because of the Same Origin Policy.
+xhr.open('GET', 'data/IGNWMTSCapabilities.xml', true);
+
+
+/**
+ * onload handler for the XHR request.
+ */
+xhr.onload = function() {
+  if (xhr.status == 200) {
+    var parser = new ol.parser.ogc.WMTSCapabilities();
+    var capabilities = parser.read(xhr.responseXML);
+
+    var wmtsUrl = 'http://wxs.ign.fr/' + key + '/geoportail/wmts';
+
+    var layerIdentifiers = [
+      'ORTHOIMAGERY.ORTHOPHOTOS',
+      'CADASTRALPARCELS.PARCELS'
+    ];
+    var layerLogos = [
+      'http://gpp3-wxs.ign.fr/static/logos/PLANETOBSERVER/PLANETOBSERVER.gif',
+      'http://gpp3-wxs.ign.fr/static/logos/IGN/IGN.gif'
+    ];
+
+    var attribution = new ol.Attribution(
+        '<a href="http://www.geoportail.fr/" target="_blank">' +
+        '<img src="http://api.ign.fr/geoportail/api/js/latest/' +
+        'theme/geoportal/img/logo_gp.gif"></a>');
+
+    var sourceOptions;
+    var source;
+    var layer;
+    var i;
+
+    for (i = 0; i < layerIdentifiers.length; ++i) {
+      sourceOptions = ol.source.WMTS.optionsFromCapabilities(
+          capabilities, layerIdentifiers[i]);
+      // we need to set the URL because it must include the key.
+      sourceOptions.urls = [wmtsUrl];
+      source = new ol.source.WMTS(sourceOptions);
+      source.setAttributions([attribution]);
+      source.setLogo(layerLogos[i]);
+      layer = new ol.layer.TileLayer({source: source});
+      map.addLayer(layer);
+    }
+
+    var view = new ol.View2D();
+    view.fitExtent([257596.65942095537, 262082.55751844167,
+      6250898.984085131, 6251854.446938695], map.getSize());
+    map.setView(view);
+  }
+};
+
+xhr.send();