保存绘制的图层并更新图层切换器，而无需重新加载页面

Question

我正在使用WMS3.9绘图功能来创建图层，并将它们保存在PostgreSQL数据库中，然后使用geoserver发布它们，这样我就可以使用OpenLayers来显示保存的图层。

每当加载地图页面时，我都会使用php脚本生成以下javascript文件，该脚本运行一个循环并定义所有现有图层(如drw1、drw2、..)为了从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文件的方式。有人能让我知道问题出在哪里吗，或者我需要做些什么才能在不重新加载页面的情况下更新图层切换器？

Answer 1

经过一番努力试图找出问题所在，我放弃了，并像这样修改了我的代码。这只是定义了新的图层，并将其添加到地图和图层切换器。

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

更好的方法仍然是有用的。