在 Leaflet 中合并使用谷歌中国卫星图和高德地图

最新推荐文章于 2024-03-17 20:34:33 发布

who_become_gods

最新推荐文章于 2024-03-17 20:34:33 发布

阅读量2.7k

点赞数 1

原文链接：http://kubooo.cn/?id=591

版权

高德的卫星图在中国大陆以外地区无法放大到较高精度，显示该区域无卫星图；而谷歌中国的卫星图上没有街道信息。

高德的卫星图分为两个图层：卫星图层和街道图层。而且，高德和谷歌中国的地图都使用了天朝的火星坐标系加密，也就是两者的地图可以直接叠加而不会错位。将高德的街道层和谷歌中国的卫星层合并，就有了一张既能高精度放大、又有街道信息的电子地图。

效果如下
在这里插入图片描述

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>Leaflet Example</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin=""></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map("map", {
            center: [39.904983, 116.427287],
            zoom: 3,
            zoomControl: false
        }).setMaxBounds([[-90, 0], [90, 360]]);
        var mapLayers = {
            '谷歌高德杂交/卫星': L.layerGroup([
                L.tileLayer('http://mt3.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', {
                    maxZoom: 20,
                    minZoom: 3,
                    attribution: "谷歌提供卫星图，高德提供街道图"
                }),
                L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
                    maxZoom: 20,
                    maxNativeZoom: 18,
                    minZoom: 3,
                    attribution: "谷歌提供卫星图，高德提供街道图",
                    subdomains: "1234",
                    opacity: 0.5
                })
            ]).addTo(map),
            '高德/卫星': L.layerGroup([
                L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
                    maxZoom: 20,
                    maxNativeZoom: 18,
                    minZoom: 3,
                    attribution: "高德地图 AutoNavi.com",
                    subdomains: "1234"
                }),
                L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
                    maxZoom: 20,
                    maxNativeZoom: 18,
                    minZoom: 3,
                    attribution: "高德地图 AutoNavi.com",
                    subdomains: "1234",
                    opacity: 0.5
                })
            ]),
            '高德/街道': L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                maxNativeZoom: 18,
                minZoom: 3,
                attribution: "高德地图 AutoNavi.com",
                subdomains: "1234"
            }),
            '谷歌/卫星': L.tileLayer('http://mt3.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                minZoom: 3,
                attribution: "谷歌 Google.cn"
            }),
            '谷歌/街道': L.tileLayer('http://mt3.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', {
                maxZoom: 20,
                minZoom: 3,
                attribution: "谷歌 Google.cn"
            }),
            '智图/街道': L.tileLayer('https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
                maxZoom: 20,
                maxNativeZoom: 16,
                minZoom: 3,
                attribution: "智图 GeoQ.cn"
            })
        }
        var layerControl = L.control.layers(mapLayers, {}, {
            position: 'topright',
            collapsed: true
        }).addTo(map);
        L.control.zoom({
            zoomInTitle: '放大',
            zoomOutTitle: '缩小'
        }).addTo(map);
    </script>
</body>

</html>

who_become_gods

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
在 Leaflet 中合并使用谷歌中国卫星图和高德地图

高德的卫星图在中国大陆以外地区无法放大到较高精度，显示该区域无卫星图；而谷歌中国的卫星图上没有街道信息。高德的卫星图分为两个图层：卫星图层和街道图层。而且，高德和谷歌中国的地图都使用了天朝的火星坐标系加密，也就是两者的地图可以直接叠加而不会错位。将高德的街道层和谷歌中国的卫星层合并，就有了一张既能高精度放大、又有街道信息的电子地图。效果如下<!DOCTYPE HTML><html><head> <meta charset="UTF-8
复制链接

扫一扫