Add an IGN WMTS example
This commit is contained in:
Éric Lemoine
1
examples/data/IGNWMTSCapabilities.xml
Normal file
1
examples/data/IGNWMTSCapabilities.xml
Normal file
File diff suppressed because one or more lines are too long
64
examples/wmts-ign.html
Normal file
64
examples/wmts-ign.html
Normal file
@@ -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"> </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>
|
||||||
83
examples/wmts-ign.js
Normal file
83
examples/wmts-ign.js
Normal file
@@ -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();
|
||||||
Reference in New Issue
Block a user