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

时间:2017-08-23 07:23:15

标签: javascript jquery ajax openlayers openlayers-3

我正在使用OpenLayers 3.9绘图功能创建图层并将它们保存在PostgreSQL数据库中并使用geoserver发布它们,这样我就可以使用WMS显示保存的图层。

每当加载地图页面时,我使用php脚本生成以下javascript文件,该脚本运行循环并定义所有现有层(如drw1,drw2,..)以从geoserver获取图层并使用{{ 1}}列出所有已加载的图层。

ol3-layerswitcher

目前,每当保存新图层时,我都会刷新地图页面,以便更新js文件并添加新图层并显示在layerswitcher中。

我想保存图层并刷新图层切换器而不重新加载地图。我尝试使用ajax保存图层并在后台更新js文件并再次添加更新的js文件。

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文件已更新并正在添加到地图页面,但我不知道如何更新图层切换器以在列表中显示新图层。我相信ol3-layerswitcher中的renderPanel()函数会在每次关闭和打开时自动更新列表。但它似乎不起作用。

所以我认为问题在于我在保存后添加js文件的方式。有人可以让我知道问题出在哪里或我需要做些什么来更新图层切换器而不重新加载页面?

1 个答案:

答案 0 :(得分:0)

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

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

更好的方法仍然有用。