我需要的不是传单中的基本视图(它是世界地图),卫星视图,但我仍然需要能够在它们之间切换?这是如何工作的,任何人都可以向我解释这一点?
安装模块:
https://www.drupal.org/project/gmap
https://www.drupal.org/project/leaflet_more_maps
我需要的不是传单中的基本视图(它是世界地图),卫星视图,但我仍然需要能够在它们之间切换?这是如何工作的,任何人都可以向我解释这一点?
安装模块:
https://www.drupal.org/project/gmap
https://www.drupal.org/project/leaflet_more_maps
我做了我的问题的更详细的例子,但@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 = '© ' + osmLink + ' Contributors',
landUrl = 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+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
语句返回true,然后将$roads
设置为roadmap
值,该值在此答案的第一个代码中的map examples
中给出。$baselist
是不是空的,因为如果它是空的,它不需要,
,但如果它不是空的,那么它会得到$baselist
,这将是以前的设置值,然后逗号然后是新的价值。baseLayers
作为这些值,这将创建leaflet
视图内的地图,如果按钮被选中。在不使用任何外部插件:
gpxpod.map = new L.Map('map', {
zoomControl: true
});
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttribution = 'Map data © 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 © Esri — 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
问题是,这不是它在drupal-8中的工作原理,可悲的是,您在这里创建的东西已经在gmap/more maps模块中生成(对不起,我忘了提及这些模块),但的确如此没有任何插件,它完美的工作。昨天幸运的问题已经解决了,不过谢谢你的帮助! –
请参阅http://leafletjs.com/plugins.html#basemap-providers – IvanSanchez
谢谢!找不到那个。帮助了很多。 –