如何从 OpenLayers 上的 WMS 图层请求特定数据
How to request specific data from WMS layers on OpenLayers
我是 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
你可以这样做,
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/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
你可以这样做,
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);
}