传单：WMS 的图层控制

Question

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

我的代码：

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], 只会显示其中一个图层，并且像教程中那样在图层之间切换的小部件（灰度/ Street)好像坏了=>只会显示其中一层...

非常感谢任何帮助！

PS：我已经用虚拟数据替换了变量，但我的代码确实像这个片段一样构建...

Answer 1

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

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

因此，您首先需要更改 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
    };
}

同样需要创建modifygetWmsConfig()函数，并单独传入layer属性如下图

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

祝你好运

传单：WMS 的图层控制

Leaflet: layers control for WMS

layer

wms

leaflet