Блог

Главная - Вопросы по программированию - jQuery, листовка: как обновить слой wms при изменении события?

jQuery, листовка: как обновить слой wms при изменении события?

dictionary #leaflet #gis #geoserver

#jquery #листовка #геосервер #wms #sld

Вопрос:

Я использую jQuery, ГеоСервер и листовку.

У меня есть json, содержащий имена SLD. С помощью выпадающего списка я помещаю имя SLD в параметры слоя. Когда я выбираю стиль, карта не обновляется, но стиль присваивается слою.

Итак, это работает, за исключением того, что у меня нет динамического обновления. Вы должны увеличить масштаб, чтобы увидеть изменения.

У вас есть идея обойти проблему? У меня сложилось впечатление, что в листовке нет функции update().

Я пробовал некоторые обходные пути, как с функцией invalidateSize(), но она не работает. Возможно, моя методология не очень хороша. Что вы думаете?

Спасибо!

ниже, sld.json (с идентификатором и nom = имя SLD, хранящегося на Geoserver (если вы знаете более динамичный метод восстановления SLD, который меня интересует!))

 [{"id" : "1", "nom" : "demo_secteur_statut"}, {"id" : "2", "nom" : "demo_secteur_statut_"}, {"id" : "3", "nom" : "demo_secteur_1"}]

JS

 function Zone() {
    $.ajax({
        type: "GET",
        url: "sld.json",
        dataType: "json",
        success: function(data) {
            $('#select-sld').empty();
            $('#select-sld').append("<option value='0'>-- Choisir une analyse --</option>");
            $.each(data, function(i, item) {
                $('#select-sld').append('<option value='   data[i].id   '>'   data[i].nom   '</option>');
            });

            $("#select-sld").change(function(){
                var selectId = $("#select-sld option:selected").val();
                var getSLD = [];

                for (var i in data){     
                    if(data[i].id == selectId){  
                        getSLD  = data[i].nom;
                        if(data[i].id != selectId){
                            return false;
                        }
                    }
                };
                //map2.removeLayer(secteur);
                //secteur.addTo(map2);
                //map2.invalidateSize();
                secteur.wmsParams.styles = getSLD;
            }); 
        },
                          complete: function() {}
    });

    var map2 = L.map('map2', { zoomControl:false, attributionControl:false }).setView([48.11, -1.67], 14);
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png').addTo(map2);

    var secteur = L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms", {
        layers: 'cite: secteur',
        format: 'image/png',
        transparent: true
    });
    secteur.addTo(map2);
}

$(document).ready(function() {
    Zone();
});

HTML

 <select id="zone-select"></select>

<div id="container-map">
       <div id="map2"></div>   
</div>

Ответ №1:

Используйте setParams метод L.TileLayer.WMS , например, так:

 var secteur = L.tileLayer.wms("http://localhost:8080/geoserver/cite/wms", {
    layers: 'cite: secteur',
    format: 'image/png',
    transparent: true
}).addTo(map);

var wmsStyles = 'foo, bar';

// Do NOT:
// secteur.options.styles = wmsSyles;

// Instead, do:
secteur.setParams({ styles: wmsSyles });

Кроме того, обратите внимание на документацию о доступных параметрах для L.TileLayer.WMS

Ответ №2:

Также вы можете попробовать это.

   var wmsLayerKey = Object.keys(map._layers)[1]; //whatever, your wmslayerkey
  var randomValue = Math.floor(Math.random() * 100000001); 
  map._layers[wmsLayerKey].setParams({random : randomValue});//dummy property: random
Метки: ,