OpenLayers示例代码：IGN WMTS
OpenLayers示例代码：IGN WMTS
<!DOCTYPE html>
<html>
<head>
<title>IGN WMTS</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
target: 'map',
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: 'https://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: '<a href="http://www.geoportail.fr/" target="_blank">' +
'<img src="https://api.ign.fr/geoportail/api/js/latest/' +
'theme/geoportal/img/logo_gp.gif"></a>'
})]
});
var ign = new ol.layer.Tile({
source: ign_source
});
map.addLayer(ign);
</script>
</body>
</html>
说明：
OpenLayers示例代码：IGN WMTS
