Question

我有3张地图Osm，Lidar和Aerial。我想选择一个作为基础层，一个作为叠加层。例如。 osm + Aerial，osm + Lidar，Aerial + lidar。 LayerControl几乎可以实现我想要的功能，但是当启用了一个也是baselayer选项的覆盖时，会激活baselayerchanged。关于如何对此进行排序的任何想法都将受到欢迎。

Answer 1

使用两个L.Control.Layers个实例，每个实例都有一组不同的3个“baselayers”。

“baselayers”和“overlays”的命名可能令人困惑。就L.Control.Layers而言，基层是互斥的，而叠加则不是。您可以使用看似图形叠加的内容，但将其定义为控件中的基础层。

Answer 2

这是我最终得到的代码。重要的是，当选择覆盖层更改基础层时，必须卸载覆盖层以在z顺序的底部加载新的基础。

$(document).ready(function () {

    var map = L.map('map').setView([-14.0349289249, -171.438639761], 14);

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

    var aerial =L.tileLayer('aerial/{z}/{x}/{y}.png', {
        maxZoom: 18,
        tms: false,
        attribution: 'Aerial from Centre for Samoan Studies (CSS)'
    });

    var lidar =L.tileLayer('lidar/{z}/{x}/{y}.png', {
        maxZoom: 18,
        tms: false,
        attribution: 'LIDAR from Centre for Samoan Studies (CSS)'
    });

    // our set of layers
    var layers = [osm, aerial, lidar];

    // initial base layer
    osm.addTo(map)

    // to enable base/overlay swapping, add extra properties with unlikely to clash names
    osm.isSamoaBase = true;
    osm.isSamoaOverlay = false;
    osm.samoaName = 'Base';
    lidar.isSamoaBase = false;
    lidar.isSamoaOverlay = false;
    lidar.samoaName = 'LIDAR';
    aerial.isSamoaBase = false;
    aerial.samoaName = 'Aerial';
    aerial.isSamoaOverlay = false;

    // set true when the existing base layer is to be replaced
    var baseChange = false;

    // layer selector for both base and overlays, 
    // sorted to preserve order as layers move between base and overlay sections
    var layerControl = L.control.layers(null, null, {sortLayers:true});
    layerControl.addTo(map);
    loadLayerControl(layerControl);

    map.on('layerremove', function(le){     

        if (le.layer.isSamoaBase) {
            le.layer.isSamoaBase = false;
            // a new base will be selected next
            baseChange = true;
        }   
        if (le.layer.isSamoaOverlay) {
            le.layer.isSamoaOverlay = false;
        }

        loadLayerControl(layerControl);         
    });

    map.on('layeradd', function(le){

        if (baseChange) {                       

            baseChange = false;                             
            // tag as new base          
            le.layer.isSamoaBase = true;
            le.layer.isSamoaOverlay = false;                        
            // restore full base layer opacity
            le.layer.setOpacity(1);                                                 
        }

        if (!le.layer.isSamoaBase) {
            le.layer.isSamoaOverlay = true;
        }

        loadLayerControl(layerControl);

        //set opacity from slider for any selected overlays
        var val = $('#basemapslider').slider("option", "value");
        map.eachLayer(function(layer){
            if (layer.isSamoaOverlay) {
                layer.setOpacity(val);
            }           
        }); 

    });

    function loadLayerControl(lc) {

        //remove twice in case both layer both a base and overlay option
        for (var i = 0; i < layers.length; i++) {
            lc.removeLayer(layers[i]);
            lc.removeLayer(layers[i]);
        }

        // must add base first to get base at bottom of z order
        for (var i = 0; i < layers.length; i++) {
            if (!layers[i].isSamoaOverlay) {
                lc.addBaseLayer(layers[i], layers[i].samoaName);
            }
        }

        // finally add overlays
        for (var i = 0; i < layers.length; i++) {
            if (!layers[i].isSamoaBase) {
                lc.addOverlay(layers[i], layers[i].samoaName);
            }
        }           
    }

})

Leaflet Layer控制与base和overlay相同的映射

2 个答案: