openlayers学习三：切换底图（天地图）

最新推荐文章于 2024-05-25 20:13:11 发布

锦岁

最新推荐文章于 2024-05-25 20:13:11 发布

阅读量3.9k

点赞数 3

分类专栏： openlayers

本文链接：https://blog.csdn.net/weixin_39520640/article/details/96479046

版权

openlayers 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

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

锦岁

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
openlayers学习三：切换底图（天地图）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>底图切换</title> <script src="dist/ol.js"></script> <link rel="styl...
复制链接

扫一扫