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

【问题标题】：Saving drawn layer and updating the layer switcher without reloading page保存绘制的图层并更新图层切换器而无需重新加载页面
【发布时间】：2018-01-31 15:46:45
【问题描述】：

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

每当加载地图页面时，我都会使用 php 脚本生成以下 javascript 文件，该脚本运行一个循环并定义所有现有图层（如 drw1、drw2、..）以从地理服务器获取图层，我使用 @987654321 @ 列出所有已加载的层。

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 文件的方式。有人可以告诉我问题出在哪里，或者我需要做什么才能在不重新加载页面的情况下更新图层切换器？

【问题讨论】：

标签： javascript jquery ajax openlayers openlayers-3

【解决方案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");
                    }
                });
            }
        }); 
    });

更好的方法仍然有用。

【讨论】：