55

我对Leaflet Map API非常感兴趣。

但是，我需要能够使用 Google 卫星层。我找不到有关如何将 Google Satellite Layer 添加到 Leaflet 的示例。我知道我仍然需要加载 Google Maps API 来执行此操作（OpenLayers 有一个示例）。

4

6 回答 6

172

您不需要插件或 Google API，您可以将其添加为 XYZ 平铺层。

街道

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

杂交种：

googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

卫星：

googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});

地形

googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
});


Note the difference in the "lyrs" parameter in the URL:
Hybrid: s,h;
Satellite: s;
Streets: m;
Terrain: p;
于 2015-09-04T06:57:48.020 回答
10

它有一个第三方插件：演示：http ://psha.org.ru/leaflet/bel.html （使用切换器切换到谷歌地图）来源： http: //psha.org.ru/leaflet/Google .js

于 2012-02-22T21:24:40.833 回答
6

这个存储库包含几个瓦片层谷歌和其他非常有用的其他插件： https ://github.com/shramov/leaflet-plugins

于 2012-08-06T06:37:57.427 回答
5

Leaflet 有一个发布所有可用插件的官方页面：http: //leafletjs.com/plugins.html

您会在那里找到用于将 Google 图层支持添加到 Leaflet 的插件。

于 2013-01-23T21:46:46.847 回答
4

带交通的 Google 标题层 

var googleTraffic = L.tileLayer('https://{s}.google.com/vt/lyrs=m@221097413,traffic&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        minZoom: 2,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    });

请参阅他们的一般条款

希望有人帮助这个

于 2019-06-26T09:41:31.837 回答
3

卫星层的 Google Maps API 替代方案：Leaflet.js 与 Esri World Imagery 瓦片

<script>

    var map = L.map('map').setView([-41.2858, 174.78682], 14);

    var mapLink = '<a href="http://www.esri.com/">Esri</a>';
    var wholink = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';

    L.tileLayer(
        'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: '&copy; '+mapLink+', '+wholink,
        maxZoom: 18,
        }).addTo(map);

</script>
于 2019-09-26T18:45:44.897 回答