Gespeicherte Ebene speichern und Ebenenwechsel aktualisieren, ohne Seite neu zu laden

Question

Ich benutze die OpenLayers 3.9 Zeichenfunktion, um Ebenen zu erstellen und sie in einer PostgreSQL Datenbank zu speichern und mit Geoserver zu veröffentlichen, damit ich die gespeicherten Ebenen mit dem WMS anzeigen kann.

Immer wenn die Map-Seite geladen wird, erzeuge ich die folgende Javascript-Datei mit einem PHP-Skript, das eine Schleife ausführt und alle vorhandenen Layer (wie drw1, drw2, ..) definiert, um die Layer von Geoserver zu bekommen und ol3-layerswitcher um alle geladenen Layer aufzulisten.

var drw1 = new ol.layer.Tile({ 
    title: 'draw_test_1', 
     source: new ol.source.TileWMS(({ 
      url: 'http://localhost:8080/geoserver/TEST/wms', 
      params:{ 
       'LAYERS': 'draw_test_1', 
       'TILED': true 
      }, 
      serverType: 'geoserver' 
     })), 
}); 

Derzeit bin ich Auffrischen der Kartenseite, wenn eine neue Schicht gespeichert wird, so dass die js-Datei aktualisiert wird und die neue Schicht hinzugefügt werden und wird in layerswitcher angezeigt.

Ich möchte den Layer speichern und den Layer Switcher aktualisieren, ohne die Karte neu zu laden. Ich habe versucht, Ajax zu verwenden, um die Ebene zu speichern und die js-Datei im Hintergrund zu aktualisieren und die aktualisierte js-Datei erneut hinzuzufügen.

<script> 
    $('#savelayer').click(function() { 
     $.ajax({ 
      type: 'POST', 
      url: 'savelyr.php', 
      data: 'slyrname='+$('#slyrname').val()+'&getdrawn='+$('#getdrawn').val(), 
      success: function(msg) { 
       console.log(msg); 
      } 
     }); 
     $.ajax({ 
      url: 'maplayers.php', 
      success: function() { 
       var s1 = document.createElement("script"); 
       s1.src = "src/ol/map.js"; 
       s1.innerHTML = null; 
       document.getElementById("scripts").innerHTML = ""; 
       document.getElementById("scripts").appendChild(s1); 
       console.log("Success 2"); 
      } 
     }); 
    }); 
</script> 

Die js-Datei wird aktualisiert und wird auf die Kartenseite hinzugefügt, aber ich bin nicht sicher, wie die Schicht Switcher zu aktualisieren, um die neue Ebene in der Liste anzuzeigen. Ich glaube, dass die Funktion renderPanel() in ol3-layerswitcher automatisch die Liste jedes Mal aktualisiert, wenn sie geschlossen und geöffnet wird. Aber es scheint nicht zu funktionieren.

Also ich denke, das Problem ist mit der Art, wie ich die js-Datei nach dem Speichern hinzufügen. Kann mir jemand sagen, wo das Problem liegt oder was ich tun muss, um den Layer-Switcher zu aktualisieren, ohne die Seite neu zu laden?

Answer 1

Nach ein bisschen Mühe, herauszufinden, was das Problem ist, gab ich auf und änderte meinen Code so. Dies definiert nur die neue Ebene und fügt sie dem Map- und Layer-Switcher hinzu.

var num = 0; 
    var tmp = "tmp"+num; 
    var s = "s"+num; 

    $('#savelayer').click(function() { 
     var slyrname = $('#slyrname').val(); 
     $.ajax({ 
      type: 'POST', 
      url: 'savelyr.php', 
      data: 'slyrname='+$('#slyrname').val()+'&getdrawn='+$('#getdrawn').val(), 
      success: function(msg) { 
       console.log(msg); 
       $.ajax({ 
        url: 'map.php', 
        success: function() { 
         var s = document.createElement("script"); 
         s.innerHTML = 
         "var "+tmp+" = new ol.layer.Tile({"+ 
          "title: '"+slyrname+"',"+ 
          "source: new ol.source.TileWMS({"+ 
          "url: 'http://localhost:8080/geoserver/WS/wms',"+ 
          "params:{'Layers':'"+slyrname+"'}}),"+ 
          "zIndex:'1'});"; 
         document.getElementById("scripts").appendChild(s); 
         map.addLayer(tmp); 
         num++; 
         console.log("Success 2"); 
        } 
       }); 
      } 
     }); 
    }); 

Ein besserer Ansatz kann immer noch nützlich sein.