duanque19820925
2017-04-06 10:22
采纳率: 0%
浏览 63

小册子使用卫星视图,drupal 8?

Satellite view

I need instead of a basic view in leaflet (it's a map of the world), the satellite view, but I still need to be able to switch between them? How does this work, can anyone explain this to me?

Installed modules:

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

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

图片转代码服务由CSDN问答提供 功能建议

我需要代替传单中的基本视图(它是世界地图),卫星视图,但我仍然需要能够在它们之间切换? 这是如何工作的,有人可以解释一下吗?

已安装的模块:

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • doucang5542 2017-06-06 09:18
    已采纳

    I made a more detailed example of my question, but @JulienV came close to what I meant, But it wasn't entirely what I wanted, plus I already found his exact answer in another post. What I wanted was to know how to add more or less maps to the view:

    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']
    });
    

    And then I added each map to the array like this:

    if($map_layouts['get_roads']) {
        $roads = "\"Roads\": roadmap";
    
        if($baselist == "") {
            $baselist = $roads;
        } else {
            $baselist = $baselist . "," . $roads;
        }
    }
    

    Then I needed to check if the $baselist wasn't empty:

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

    And then of course add the layers to the map:

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

    I worked out the code with the google maps included. The osm and thun map was a nice example, but basically what this code does:

    • First I make if statements in php to see if the roads are included in the button I made. I pass the get_roads inside the array, so that the if statement returns true and then it sets $roads as the roadmap value, which is given in the map examples in the first code of this answer.
    • Then I check if $baselist isn't empty, because if it's empty it doesn't need a ,, but if it isn't empty, then it gets the $baselist, which would be the previous set value, then a comma and then the new value.
    • This was the markup of the layers and then I will pass the baseLayers as those values, which will create the maps inside the leaflet view, if the buttons are checked.
    点赞 评论
  • dounanyin3179 2017-04-06 19:47

    Without using any external plugin :

    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);
    

    This piece of code adds a standard control to switch between tile provider layers. It includes two satellite tile providers.

    More info : http://leafletjs.com/reference-1.0.3.html#control-layers

    点赞 评论

相关推荐 更多相似问题