我使用 jQuery、GeoServer 和 Leaflet。
我有一个包含 SLD 名称的 json。通过下拉菜单,我将 SLD 的名称放入图层的参数中。当我选择样式时,地图不会刷新,但样式会分配给图层。
所以它可以工作,只是我没有动态刷新。你必须放大才能看到变化。
你有解决这个问题的想法吗?我的印象是 Leaflet 没有 update() 函数。
我已经尝试了一些与 invalidateSize() 函数一样的解决方法,但它不起作用。也许我的方法论不好。你怎么看 ?
谢谢!
下面是 sld.json (带有存储在 Geoserver 中的 SLD 的 id 和 nom=name (如果您知道恢复我感兴趣的 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>