vue 实现ArcGIS API For JavaScript3.X版本 使用 QueryTask 实现绘制多边形查询 并将查询结果以表格形式返回
时间: 2024-02-03 10:04:31 浏览: 27
要实现使用 QueryTask 绘制多边形查询并将查询结果以表格形式返回,需要进行以下步骤:
1. 引入 ArcGIS API For JavaScript 3.X 版本和 Vue 框架。
2. 在 Vue 实例中创建地图,并添加绘图工具和表格。
```javascript
// 创建地图
var map = new esri.Map("map", {
basemap: "streets"
});
// 添加绘图工具
var tb = new esri.toolbars.Draw(map);
tb.on("draw-end", doQuery);
// 添加表格
new Vue({
el: '#table',
data: {
features: []
}
});
```
3. 在绘制完成后触发 doQuery 函数进行查询。
```javascript
function doQuery(evt) {
tb.deactivate();
var query = new esri.tasks.Query();
query.geometry = evt.geometry;
query.outFields = ["*"]; // 查询所有字段
var queryTask = new esri.tasks.QueryTask("your service url");
queryTask.execute(query, showResults); // 执行查询
}
```
4. 在 showResults 函数中处理查询结果,并将结果渲染到表格中。
```javascript
function showResults(featureSet) {
var features = featureSet.features;
var data = [];
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var attributes = feature.attributes;
var row = [];
for (var j in attributes) {
row.push(attributes[j]);
}
data.push(row);
}
// 渲染表格
var app = new Vue({
el: '#table',
data: {
features: data
}
});
}
```
完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>QueryTask Demo</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
<style>
#map {
width: 100%;
height: 500px;
}
#table {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="table">
<table>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
</thead>
<tbody>
<tr v-for="feature in features">
<td>{{feature[0]}}</td>
<td>{{feature[1]}}</td>
<td>{{feature[2]}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://js.arcgis.com/3.38/"></script>
<script>
var map = new esri.Map("map", {
basemap: "streets"
});
// 添加绘图工具
var tb = new esri.toolbars.Draw(map);
tb.on("draw-end", doQuery);
// 添加表格
new Vue({
el: '#table',
data: {
features: []
}
});
function doQuery(evt) {
tb.deactivate();
var query = new esri.tasks.Query();
query.geometry = evt.geometry;
query.outFields = ["*"]; // 查询所有字段
var queryTask = new esri.tasks.QueryTask("your service url");
queryTask.execute(query, showResults);
}
function showResults(featureSet) {
var features = featureSet.features;
var data = [];
for (var i = 0; i < features.length; i++) {
var feature = features[i];
var attributes = feature.attributes;
var row = [];
for (var j in attributes) {
row.push(attributes[j]);
}
data.push(row);
}
// 渲染表格
var app = new Vue({
el: '#table',
data: {
features: data
}
});
}
</script>
</body>
</html>
```