openlayers学习（八）加载天地图各种底图

加载天地图的各种在线地图资源

天地图在线地图资源地址：http://lbs.tianditu.gov.cn/server/MapService.html

1、初始化地图

var rootLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
    }) //加载谷歌影像地图
});

var view = new ol.View({
    center: [113, 23],//设置地图默认中心点
    projection: 'EPSG:4326',//坐标系
    zoom: 10//默认缩放级别
});
map = new ol.Map({
    layers: [rootLayer],
    target: 'map',
    view: view
});

2、加载天地图

let img_w_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

let img_w = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: img_w_url
    }) //
});
map.addLayer(img_w);

每次只需要修改地址就可以了

openlayers学习（八）加载天地图各种底图

3、加载0到7二级域名的地址的地图

let img_w_url1 = "http://t{0-7}.tianditu.gov.cn/img_w/wmts?" +
    "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
    "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";
var openStreetMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        //url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        url: img_w_url1
    })
});
map.addLayer(openStreetMapLayer);

需要修改url中的t{0-7}

openlayers学习（八）加载天地图各种底图

完整代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Shapes</title>
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
        .map {
            width: 100%;
            height: 400px;
        }
    </style>
    <link rel="stylesheet" href="../lib/openlayerv6.4.3/css/ol.css">
    <script src="../lib/openlayerv6.4.3/build/ol.js"></script>
</head>
<script>
    var map;
    function init() {
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
            }) //加载谷歌影像地图
        });

        var view = new ol.View({
            center: [113, 23],//设置地图默认中心点
            projection: 'EPSG:4326',//坐标系
            zoom: 10//默认缩放级别
        });
        map = new ol.Map({
            layers: [rootLayer],
            target: 'map',
            view: view
        });
    }

    function addLayer1() {

        let img_w_url = "http://t0.tianditu.gov.cn/img_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

        let img_w = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: img_w_url
            }) //
        });
        map.addLayer(img_w);
    }

    function addLayer2() {
        var imageURL = "http://t0.tianditu.gov.cn/cia_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer4() {
        var imageURL = "http://t0.tianditu.gov.cn/ter_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer5() {
        var imageURL = "http://t0.tianditu.gov.cn/ibo_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer3() {

        var imageURL = "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=自己的key";

        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer6() {
        var imageURL = "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=自己的key";
        //var imageURL = "http://t0.tianditu.gov.cn/ibo_w/wmts&x={x}&y={y}&l={z}&tk=自己的key";
        var rootLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: imageURL
            }) //加载谷歌影像地图
        });

        map.addLayer(rootLayer);

    }

    function addLayer7() {
        let img_w_url1 = "http://t{0-7}.tianditu.gov.cn/img_w/wmts?" +
            "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key";
        var openStreetMapLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                //url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                url: img_w_url1
            })
        });
        map.addLayer(openStreetMapLayer);
    }

</script>
<body οnlοad="init()">
<div id="map" class="map"></div>
<button οnclick="addLayer1()">影像地图</button>
<button οnclick="addLayer2()">影像注记</button>
<button οnclick="addLayer3()">矢量注记</button>
<button οnclick="addLayer4()">地形晕渲</button>
<button οnclick="addLayer5()">全球境界</button>
<button οnclick="addLayer6()">矢量底图</button>
<button οnclick="addLayer7()">影像地图使用0-7二级域名</button>
</body>
</html>

openlayers学习（八）加载天地图各种底图

相关推荐