Arcgis For JavaScript Api 3.x(2)使用Query查询

esri.tasks.Query()
[Query].geometry = geometry // 为查询对象设置查询图形
[Query].returnGeometry = true // 是否允许查询到的结果返回图层
[Query].where = 'sql express' // 为查询对象设置查询的sql语句
[Query].outFields = ['*'] // 设置查询结果的返回字段
[Query].groupByFieldsForStatistics = ['*'] // 设置分组结果的字段
[Query].orderByFields = ['FIELD_NAME DESC'] // 设置查询结果的排序字段
[Query].outSpatialReference = SpatialReference // 设置返回图层的空间参考
[Query].outStatistics = [StatisticDefinition] // 设置统计字段对象
// ====== 统计字段类型示例 ======
esri.tasks.StatisticDefinition()
statisticDefinition.statisticType = "sum" // 统计字段的类型 sum count ...
statisticDefinition.onStatisticField = "POP2000" // 统计的字段
statisticDefinition.outStatisticFieldName = "TotalPop" // 输出的字段
[Query].outStatistics = [statisticDefinition] // 设置统计字段对象
// ====== 统计字段类型示例 ======
[Query].spatialRelationship = Query.SPATIAL_REL_INTERSECTS // 设置分析的空间关系
[Query].distance = 10 // 设置输入图层的缓冲区大小
[Query].units = 'meters' // 设置缓冲区大小的单位
要实现使用 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> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值