傳單使用衛星視圖，drupal 8？

Question

我需要的不是傳單中的基本視圖（它是世界地圖），衛星視圖，但我仍然需要能夠在它們之間切換？這是如何工作的，任何人都可以向我解釋這一點？

安裝模塊：

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

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

Answer 1

我做了我的問題的更詳細的例子，但@JulienV走近了我的意思，但它並不完全是我想要的，再加上我已經找到了自己確切的答案中另一篇文章。我想要的是知道如何或多或少的地圖添加到視圖：

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地圖是一個很好的例子，但基本上是這個代碼：

• 首先是讓看到phpif語句如果道路被包含在我所做的按鈕。我將get_roads傳遞給數組，以便if語句返回true，然後將$roads設置爲roadmap值，該值在此答案的第一個代碼中的map examples中給出。
• 然後我檢查$baselist是不是空的，因爲如果它是空的，它不需要,，但如果它不是空的，那麼它會得到$baselist，這將是以前的設置值，然後逗號然後是新的價值。
• 這是圖層的標記，然後我將通過baseLayers作爲這些值，這將創建leaflet視圖內的地圖，如果按鈕被選中。

Answer 2

在不使用任何外部插件：

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