Question

based on this tutorial (http://leafletjs.com/examples/layers-control.html), I've tried to add 2 layers for a WMS based solution. In the tutorial, they managed to add 2 layers (Street and GrayScales) and switch between them. My code: 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); In the function getDefaultWmsValues(), I have 2 valid layers, layer1 and layer2. If I let either => layer: [layer1] or layer: [layer2], my code will alternatively show the desired layer. However, when I try to configure both to be able to switch with layer: [layer1,layer2], only one of the layer will be shown and the widget to switch between layers like in the tutorial (Grayscale / Street) seems to be broken=> it will only show one of the layers... Any help would be very much appreciated! PS: I've replaced variables with dummy data, but my code is really built like this snippet...

Answer 1

这里很少有人注意到，您将这两个图层添加到单个变量中，因此它们不能被视为两个图层，因此无法在控制框中将其视为两个图层。

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

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

祝你好运

Leaflet: layers control for WMS

1 个答案: