查询结果不想展示在控制台
时间: 2024-01-01 08:04:30 浏览: 22
如果你不想将查询结果展示在控制台,而是将其展示在其他地方,比如一个HTML元素中,你需要修改第3步的代码,将查询结果渲染到指定的HTML元素中。例如:
```javascript
map.on('singleclick', function(evt) {
var viewResolution = map.getView().getResolution();
var url = wmsLayer.getSource().getGetFeatureInfoUrl(
evt.coordinate,
viewResolution,
'EPSG:3857',
{'INFO_FORMAT': 'application/json'}
);
if (url) {
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(json) {
var features = json.features;
var html = '';
for (var i = 0, ii = features.length; i < ii; i++) {
var feature = features[i];
var properties = feature.properties;
var keys = Object.keys(properties);
html += '<ul>';
for (var j = 0, jj = keys.length; j < jj; j++) {
var key = keys[j];
var value = properties[key];
html += '<li><strong>' + key + ':</strong> ' + value + '</li>';
}
html += '</ul>';
}
document.getElementById('queryResult').innerHTML = html;
});
}
});
```
在这个例子中,我们使用了一个`div`元素(id为`queryResult`)来展示查询结果。在查询结果返回后,我们将结果渲染到该元素中。你可以根据自己的需要来修改HTML元素的样式和内容。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)