包含用户输入的传单 cql_filter

Leaflet cql_filter with user input

我已经使用 PostGIS、Geoserver 和 Leaflet.However 构建了一个网络地图,我绝望地坚持应用接受用户输入并更新显示的 WMS 图层的 cql_filter。地图使用静态 cql_filter 正确加载。我的图层 javascript 如下所示,位于函数 myMap():

var contours = L.tileLayer.wms('http://gis01-dbn:8080/geoserver/Inyaninga_243-198/wms', {
            layers: 'Inyaninga_243-198:contours_3857',
            format: 'image/png',
            transparent: true,
        });

contours.setParams({CQL_FILTER:"elevation = 100"});

然后我创建了一个函数作为更新的 cql_filter 传递,它将覆盖和更新之前声明的过滤器参数:

function updateParams() {
    var x = document.getElementById("myInput").value;
    var filter = "elevation = '" + x + "'";
    return contours.setParams({CQL_FILTER:filter});
}

我的 HTML 创建了一个表单,该表单旨在接受用户输入并将其应用于 cql_filter 但我无法使其相应地工作:

<body>
    <form>
        Elevation(m):<br>
        <input type="text" id="myInput">
        <input type="button" value="Elevation" onclick="updateParams()">
    </form>
    <div id="map" class="map"</div>
    <script type="text/javascript">
        myMap();
    </script>
</body>

我是新手,这是第一次尝试,我是不是漏掉了什么?在正确方向上的任何帮助将不胜感激。

我最终设法解决了这个问题,并让过滤器与按钮一起工作。

我不得不将 var contours 从 myMap() 函数中移出,并将其放在 HTML 的脚本部分中。不是最干净的方法,而是我可以开始工作的唯一选择。

我假设这是在另一个函数中调用一个函数的问题。