openlayers載入天地圖WMTS服務
阿新 • • 發佈：2019-02-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol.js"></script> <style type="text/css"> #map { position: absolute; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; } </style> </head> <body> <div id="map" class="map"></div> <script> var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent(); var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = []; for (var z = 2; z < 19; ++z) { resolutions[z] = size / Math.pow(2, z); } var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.WMTS({ name: "中國向量1-4級", url: "http://t{0-6}.tianditu.com/vec_c/wmts", layer: "vec", style: "default", matrixSet: "c", format: "tiles", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), //resolutions: res.slice(0, 15), resolutions: resolutions, matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] }) }), }), new ol.layer.Tile({ source: new ol.source.WMTS({ name: "中國向量註記1-4級", url: "http://t{0-6}.tianditu.com/cva_c/wmts", layer: "cva", style: "default", matrixSet: "c", format: "tiles", wrapX: true, tileGrid: new ol.tilegrid.WMTS({ origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions, matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] }) }), }) ], target: "map", view: new ol.View({ center: [120.14805, 30.26971], projection: projection, zoom: 3, maxZoom: 17, minZoom: 1 }) }); </script> </body> </html>
