openlayers学习三:切换底图(天地图)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底图切换title>
    <script src="dist/ol.js">script>
    <link rel="stylesheet" href="dist/ol.css">
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=d0cf74b31931aab68af181d23fa23d8d">script>
    <style>
        .map {
            height: 400px;
            width: 100%;
        }
    style>
head>
<body>
    <div id="map" class="map">div>
    <button onclick="changed_img()">切换影像底图button>
    <button onclick="changed_vec()">切换街道底图button>
    <button onclick="changed_ter()">切换地形底图button>
    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([116.24, 39.55]),//将坐标从经度,纬度转换为不同的投影,默认为'EPSG:3857'。
                zoom: 6
            })
        });
        function changed_img() {
            var img= new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
                })
            })
            map.addLayer(img);
        };

        function changed_vec() {
            var map_cva= new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
                })
            })

            var map_vec =new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
                })
            })
            map.addLayer(map_vec);
            map.addLayer(map_cva);
        };
        function changed_ter() {
            var map_ter =new ol.layer.Tile({
                        source: new ol.source.XYZ({
                            url:  "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
                            })
                        })
            var map_cta =new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
                })
            })
            map.addLayer(map_ter);
            map.addLayer(map_cta);
        }

    script>
body>
html>

你可能感兴趣的:(openlayers)