传单使用卫星视图，drupal 8？

Question

我需要卫星视图而不是传单中的基本视图（它是世界地图），但我仍然需要能够在它们之间切换？这是如何工作的，谁能给我解释一下？

已安装的模块：

https://www.drupal.org/project/gmap

https://www.drupal.org/project/leaflet_more_maps

Answer 1

不使用任何外部插件:

gpxpod.map = new L.Map('map', {
    zoomControl: true
});

var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttribution = 'Map data &copy; 2013 <a href="http://openstreetmap'+
'.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

var esriAerialUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services'+
'/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esriAerialAttrib = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, '+
'USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the'+
' GIS User Community';
var esriAerial = new L.TileLayer(esriAerialUrl,
    {maxZoom: 18, attribution: esriAerialAttrib});

var gUrl = 'http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}';
var gAttribution = 'google';
var googlesat = new L.TileLayer(gUrl, {maxZoom: 18, attribution: gAttribution});

var baseLayers = {
    'OpenStreetMap': osm,
    'ESRI Aerial': esriAerial,
    'Google map sat': googlesat
}

L.control.layers(baseLayers, {}).addTo(map);

这段代码添加了一个标准控件，用于在图块提供程序层之间切换。它包括两个卫星图块提供程序。

更多信息：http://leafletjs.com/reference-1.0.3.html#control-layers

Answer 2

我对我的问题做了一个更详细的例子，但@JulienV 接近我的意思，但这并不完全是我想要的，而且我已经在另一个 post 中找到了他的确切答案。我想知道如何向视图添加更多或更少的地图：

var osmLink = '<a href=\"https://openstreetmap.org\">OpenStreetMap</a>',
    thunLink = '<a href=\"https://thunderforest.com/\">Thunderforest</a>';

var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; ' + osmLink + ' Contributors',
    landUrl = 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
    thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;

var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
    landMap = L.tileLayer(landUrl, {attribution: thunAttrib});

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

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

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

然后我像这样将每个地图添加到数组中：

if($map_layouts['get_roads']) {
    $roads = "\"Roads\": roadmap";

    if($baselist == "") {
        $baselist = $roads;
    } else {
        $baselist = $baselist . "," . $roads;
    }
}

然后我需要检查 $baselist 是否不为空：

if($baselist) {
    $base_layout = "var baseLayers = {".$baselist."};";
} else {
    $base_layout = "";
}

然后当然是将图层添加到地图中：

L.control.layers(baseLayers).addTo(map);

我编写了包含 google maps 的代码。 osm 和 thun 地图是一个很好的例子，但基本上这段代码的作用是：

首先我在 php 中创建 if 语句以查看道路是否包含在我创建的按钮中。我将 get_roads 传递到数组中，使 if 语句 returns 为真，然后将 $roads 设置为 roadmap 值，该值在map examples 在此答案的第一个代码中。
然后我检查 $baselist 是否不为空，因为如果它为空则不需要 ,，但如果它不为空，则它会得到 $baselist，这将是以前的设置值，然后是一个逗号，然后是新值。
这是层的标记，然后我将传递 baseLayers 作为这些值，如果选中按钮，这将在 leaflet 视图内创建地图。

传单使用卫星视图，drupal 8？

leaflet use satellite view, drupal 8?

javascript

php

drupal-8

leaflet