保存繪製圖層並更新圖層切換器而無需重新加載頁面

我使用OpenLayers 3.9繪圖功能來創建圖層並將它們保存在PostgreSQL數據庫中，並使用geoserver發佈它們，以便我可以使用WMS顯示保存的圖層。保存繪製圖層並更新圖層切換器而無需重新加載頁面

每當加載地圖頁面時，我使用一個運行循環並定義所有現有圖層（如drw1，drw2，...）的php腳本生成以下JavaScript文件，以便從geoserver獲取圖層並使用ol3-layerswitcher列出所有加載的圖層。

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' 
     })), 
});

目前，我刷新每當一個新層，保存，這樣的js文件被更新，新層將被添加和被顯示在layerswitcher地圖頁面。

我想保存圖層並刷新圖層切換器而不重新加載地圖。我嘗試使用ajax保存圖層並在後臺更新js文件並再次添加更新後的js文件。

<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>

JS文件更新，並且被添加到地圖頁面，但我不知道如何更新層切換到顯示在列表中的新層。我相信ol3-layerswitcher中的renderPanel（）函數會在每次關閉並打開時自動更新列表。但它似乎並不奏效。

所以我認爲問題是我在保存後添加js文件的方式。有人能讓我知道問題出在哪裏，或者我需要做什麼才能在不重新加載頁面的情況下更新圖層切換器？

來源

2017-08-23 pavankguduru

經過一番努力找出問題所在，我放棄了並修改了我的代碼。這只是定義了新圖層並將其添加到地圖和圖層切換器中。

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"); 
        } 
       }); 
      } 
     }); 
    });

更好的方法仍然有用。

來源

2017-08-23 13:49:06 pavankguduru

保存繪製圖層並更新圖層切換器而無需重新加載頁面

回答

相關問題