如此簡潔明瞭的WMTS客戶端實現-來自openlayers
阿新 • • 發佈:2018-12-29
時常看看官方文件,只有你想不到的驚喜,如此簡潔明瞭的WMTS操作,我也是佩服。下面是來自於openlayers官網的程式碼:
<!DOCTYPE html> <html> <head> <title>WMTS Layer from Capabilities</title> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/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> </head> <body> <div id="map" class="map"></div> <script> import Map from 'ol/Map.js'; import View from 'ol/View.js'; import WMTSCapabilities from 'ol/format/WMTSCapabilities.js'; import TileLayer from 'ol/layer/Tile.js'; import OSM from 'ol/source/OSM.js'; import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js'; var parser = new WMTSCapabilities(); var map; fetch('data/WMTSCapabilities.xml').then(function(response) { return response.text(); }).then(function(text) { var result = parser.read(text); var options = optionsFromCapabilities(result, { layer: 'layer-7328', matrixSet: 'EPSG:3857' }); map = new Map({ layers: [ new TileLayer({ source: new OSM(), opacity: 0.7 }), new TileLayer({ opacity: 1, source: new WMTS(/** @type {!module:ol/source/WMTS~Options} */ (options)) }) ], target: 'map', view: new View({ center: [19412406.33, -5050500.21], zoom: 5 }) }); }); </script> </body> </html>