如何从 OpenLayers 上的 WMS 图层请求特定数据

Question

我是 Openlayers/Geoserver 的新手，我正在尝试添加一个面板，我可以在其中更改 "Price" 、 "Area size" 等设置 ... 并仅显示符合信息的数据在我的 HTML 页面中给出。

我已经可以使用 'cql_filter': 'sterr<(value)' 在我的 TileWMS 参数中执行此操作，但我不知道如何在我的 html 页面上手动更改它。

我也想知道这是否是实现我想要的目标的好方法？

[编辑] 我添加了我的代码的一些屏幕截图，index.js 我希望能够更改 cql_filter 参数 index.js

这是我的 index.html 表格 index.html

我最后想要的是一个面板，用户可以在其中更改值并获取所有特定数据（这里我们有 50 平方米到 200 平方米的公寓）index.html

Answer 1

你可以这样做，

index.html - 用这个改变形式，只是为了简单

Min:<br>
<input id="rmin" type="number" value="50">
<br>
Max:<br>
<input id="rmax" type="number" value="200">
<br><br>
<button onclick="update()">Update Layer</button>

index.js - 添加更新功能

var update = function() {
  var rmin = Number(document.getElementById('rmin').value);
  var rmax = Number(document.getElementById('rmax').value);
  mutnimesSource.updateParams({
    'LAYERS': 'ocimutnimes',
    'TILED': true,
    'cql_filter': `sterr BETWEEN ${rmin} AND ${rmax}`
  });
  console.log(rmin + ' - ' + rmax);
}

如何从 OpenLayers 上的 WMS 图层请求特定数据

How to request specific data from WMS layers on OpenLayers

cql

geoserver

openlayers