传单：WMS 的图层控制

Question

根据本教程 (http://leafletjs.com/examples/layers-control.html)，我尝试为基于 WMS 的解决方案添加 2 层。在教程中，他们设法添加了 2 个图层（街道和灰度）并在它们之间切换。

我的代码：

function getDefaultWmsValues() {

    var layer1, layer2;
    layer2= 'Street';
    layer1= 'Satellite';

    return {
        url: "http://dummy.com/wms/service",
        mapCenter: [1, 2],
        startZoom: 15,
        layer: [layer1,layer2],
        imageFormat: 'image/jpeg',
        autor: "WMS Dummy",
        maxZoom: 17,
        minZoom: 12,
        version: '1.1.0',
        interactiveMapBoundaries: [[123, 1234], [1245.164611, 17890.023279]],
        usedProjection: L.CRS.EPSG4326
    };
}

function getWmsConfig(wmsDefaultValues) {
    return L.tileLayer.wms(wmsDefaultValues.url, {
        layers: wmsDefaultValues.layer,
        format: wmsDefaultValues.imageFormat,
        version: wmsDefaultValues.version,
        maxZoom: wmsDefaultValues.maxZoom,
        minZoom: wmsDefaultValues.minZoom,
        crs: wmsDefaultValues.usedProjection,
        attribution: wmsDefaultValues.autor
    });
}
function createLeafletMap(wmsDefaultValues) {

    var map = L.map('map', {center: wmsDefaultValues.mapCenter, zoom: wmsDefaultValues.startZoom});
    var wmsConfig = getWmsConfig(wmsDefaultValues);
    wmsConfig.addTo(map);
    L.control.scale().addTo(map);
    map.setMaxBounds(wmsDefaultValues.interactiveMapBoundaries);
    L.marker(wmsDefaultValues.mapCenter).addTo(map);
    var baseMaps = {
        "Layer Name 1": 'Satellite',
        "Layer Name 2": 'Street'
    };
    L.control.layers(baseMaps).addTo(map);
    return map;
}

var wmsDefaultValues = getDefaultWmsValues();
var leafletMap = createLeafletMap(wmsDefaultValues);

在函数 getDefaultWmsValues() 中，我有 2 个有效层，即 layer1 和 layer2。如果我让 => layer: [layer1] 或 layer: [layer2]，我的代码将交替显示所需的图层。

但是，当我尝试将两者配置为能够切换时 layer: [layer1,layer2]，只会显示其中一个图层，并且在教程（灰度/街道）中切换图层的小部件似乎已损坏=> 它只会显示其中一层...

任何帮助将不胜感激！

PS：我已经用虚拟数据替换了变量，但是我的代码真的是这样构建的 sn-p...

Answer 1

这里有几件事需要注意， 您将两个图层都添加到一个变量中，因此它们不能被视为两个图层，因此不能在控制框中被视为两个图层。

此外，您指定要在图层之间切换，即您希望一次只看到一个图层，因此，默认情况下，只有当我们将图层设置为基础层时才能实现此功能，如 @987654321 所述@

因此，您首先需要更改getDefaultWmsValues() 函数，如下所示

function getDefaultWmsValues() {

var layer1, layer2;
    layer2= 'Street';
    layer1= 'Satellite';

    return {
        url: "http://dummy.com/wms/service",
        mapCenter: [1, 2],
        startZoom: 15,
        layer1: [layer1],
        layer2: [layer2],
        imageFormat: 'image/jpeg',
        autor: "WMS Dummy",
        maxZoom: 17,
        minZoom: 12,
        version: '1.1.0',
        interactiveMapBoundaries: [[123, 1234], [1245.164611, 17890.023279]],
        usedProjection: L.CRS.EPSG4326
    };
}

同样，你需要创建修改getWmsConfig()函数，并单独传递图层属性如下图

function getWmsConfig(wmsDefaultValues, layer) {
    return L.tileLayer.wms(wmsDefaultValues.url, {
        layers: layer,
        format: wmsDefaultValues.imageFormat,
        version: wmsDefaultValues.version,
        maxZoom: wmsDefaultValues.maxZoom,
        minZoom: wmsDefaultValues.minZoom,
        crs: wmsDefaultValues.usedProjection,
        attribution: wmsDefaultValues.autor
    });
}

现在，调用getWmsConfig() 两次，每次通过一层

var wmsConfig1 = getWmsConfig(wmsDefaultValues,wmsDefaultValues.layer1);
var wmsConfig2 = getWmsConfig(wmsDefaultValues,wmsDefaultValues.layer2);
wmsConfig1.addTo(map);
wmsConfig2.addTo(map);

现在，添加这两个wmsConfig 变量来控制

var baseMaps = {
    "Layer Name 1": wmsConfig1,
    "Layer Name 2": wmsConfig2
};

祝你好运