jQuery, Leaflet: как обновить слой wms при изменении события?
Я использую jQuery, GeoServer и Leaflet.
У меня есть JSON, содержащий имена SLD. С выпадающим списком я поставил имя СЛД в параметрах слоя. Когда я выбираю стиль, карта не обновляется, но стиль назначается слою.
Так что это работает за исключением того, что у меня нет динамического обновления. Вы должны увеличить, чтобы увидеть изменения.
У вас есть идея обойти эту проблему? У меня сложилось впечатление, что в Leaflet нет функции update().
Я пробовал некоторые обходные пути, как с функцией invalidateSize(), но он не работает. Может быть, моя методология не очень хорошая. Как вы думаете?
Спасибо!
ниже sld.json (с id и 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
Также вы можете попробовать это.
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