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

Question

我正在使用 OpenLayers 3.9 绘制功能来创建图层并将它们保存在 PostgreSQL 数据库中并使用地理服务器发布它们，这样我就可以使用 WMS 来显示保存的图层。

每当加载地图页面时，我都会使用 php 脚本生成以下 javascript 文件，该脚本运行一个循环并定义所有现有层（如 drw1、drw2、..）从地理服务器获取图层，我使用 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 文件并添加新图层并在图层切换器中显示。

我想在不重新加载地图的情况下保存图层并刷新图层切换器。我尝试使用 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");
                    }
                });
            }
        }); 
    });

更好的方法仍然有用。

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

Saving drawn layer and updating the layer switcher without reloading page

javascript

ajax

jquery

openlayers

openlayers-3