1. 程式人生 > >openlayers載入天地圖WMTS服務

openlayers載入天地圖WMTS服務

<!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>