荐 ArcGIS API for JavaScript中要素图层查询（地图外搜索点击查询）的方法总结
程序员文章站
2022-08-09 15:56:24
1.Arcgis API for JavaScript中常见的三种查询方式在Arcgis API for JavaScript中常见的属性查询有三种方式：QueryTask，FindTask,IdentifyTask.【具体用法请参考官网示例】QueryTask:只可在要素服务（featurelayer）或者某个地图服务（MapImageLayer）的某个子图层进行查询(如下图，你发布的地图服务必须要可以支持query才可以，发布服务如果为featurelayer其本身就支持，如果发布为MapI...
1.Arcgis API for JavaScript中常见的三种查询方式
在Arcgis API for JavaScript中常见的属性查询有三种方式：QueryTask，FindTask,IdentifyTask.【具体用法请参考官网示例】
- QueryTask:只可在要素服务（featurelayer）或者某个地图服务（MapImageLayer）的某个子图层进行查询(如下图，你发布的地图服务必须要可以支持query才可以，发布服务如果为featurelayer其本身就支持，如果发布为MapImageLayer则需要访问其子图层才可以)，它查询的地图服务并不必须加载到Map中进行显示，执行QueryTask需要两个先决条件：1.需要查询的图层的url ，精确到layerId；2.查询的过滤条件
- FindTask：在某个地图服务中进行属性查询的功能类，FindTask以FindParameters对象为参数，能查询同一个地图服务的一个或多个图层，并且可以在多个字段中进行查询，FindTask仅仅用于属性信息的查询，在FindTask执行结束后，可以从其返回结果中获取查询的对象来自哪个图层和哪个字段
- IdentifyTask:在某个地图服务中进行空间查询，IdentifyTask以IdentifyParameters对象作为参数，能查询同一个地图服务的一个或者多个图层，IdentifyTask仅仅用于空间信息查询
2.要素图层查询的过程
2.1数据源：
这个数据可以发布到Portal上也可以发布到Online上，笔者将全国矢量数据发布到了Portal中并使用要素图层的“全国矢量1”数据作为数据源，如下图：
2.1编写代码：
引入全国矢量数据的URL地址（portal或online上的数据），无论部署到IIS还是Tomcat，只要找到对应的FeatureServer，并选择你要的图层索引即可。
var china =
"https://*********/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";
设置popup弹出模板，{nl_name_1}为字段值，选择你要展示的若干字段，不要用别名（如下图）
var popupTemplate = {
title: "{nl_name_1},{nl_name_2},{nl_name_3}", //全国矢量（省、市、县）
fieldInfos: [
{
fieldName: "nl_name_3",
label: "Elevation (feet)",
}
],
content: "<br><b>县级行政区:</b> {nl_name_3} ft "
};
创建用于显示查询结果的图形层和符号，并允许在地图/视图中显示结果 ，最后向地图中添加此图层
//创建用于显示查询结果的图形层和符号
var resultsLayer = new GraphicsLayer();
/*****************************************************************
* 特征服务的地址
*****************************************************************/
var qTask = new QueryTask({
url: china //全国矢量
});
/******************************************************************
* 设置查询参数以始终返回几何图形和所有字段。
* 返回几何图形允许我们在地图/视图中显示结果
******************************************************************/
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "osm",
layers: [resultsLayer] // 向地图添加绘图图层
});
根据你要查询的字段值编写正确的SQL语句，笔者根据底图编写了根据县级行政区进行模糊查询的SQL语句
//每次按钮点击时执行的函数
function doQuery() {
// 清除以前图层的查询
resultsLayer.removeAll();
//拼写查询全国矢量的 SQL语句（设置的只针对县进行检索）
params.where = "nl_name_3 like '" + value.value + "%'";
//成功执行查询并调用getresult方法，
//查询失败调用promiserejected方法
qTask
.execute(params)
.then(getResults)
.catch(promiseRejected);
}
对编写SQL语句的正确性，可以使用此工具校验
以上就是关键的几个点，下面附上源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>QueryTask - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
background-color: dimgray;
color: white;
padding: 10px;
width: 350px;
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/Map",
"esri/views/MapView",
"esri/Basemap"
], function(
Map,
SceneView,
GraphicsLayer,
QueryTask,
Query,
Map,
MapView,
Basemap
) {
//全国矢量数据的URL地址（portal或online上的数据）
var china = "https://**************/arcgis/rest/services/Hosted/%E5%85%A8%E5%9B%BD%E7%9F%A2%E9%87%8F1/FeatureServer/0";
// 为每一个结果定义弹出框，设置弹出模板
var popupTemplate = {
title: "{nl_name_1},{nl_name_2},{nl_name_3}", //全国矢量（省、市、县）
fieldInfos: [
{
fieldName: "nl_name_3",
label: "Elevation (feet)",
}
],
content: "<br><b>县级行政区:</b> {nl_name_3} ft "
};
//创建用于显示查询结果的图形层和符号
var resultsLayer = new GraphicsLayer();
//特征服务的地址
var qTask = new QueryTask({
url: china //全国矢量
});
//设置查询参数以始终返回几何图形和所有字段。
//返回几何图形允许我们在地图/视图中显示结果
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
var map = new Map({
basemap: "osm",
layers: [resultsLayer] // 向地图添加绘图图层
});
//添加二维（全国矢量）
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 4,
center: [108, 33],
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
// 当按钮点击的时候执行doquery方法
view.when(function() {
//对button不做设置，其在地图外面
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var value = document.getElementById("valSelect"); //获取输入值
//每次按钮点击时执行的函数
function doQuery() {
// 清除以前图层的查询
resultsLayer.removeAll();
//拼写查询全国矢量的 SQL语句（设置的只针对县进行检索）
params.where = "nl_name_3 like '" + value.value + "%'";
//成功执行查询并调用getresult方法，
//查询失败调用promiserejected方法
qTask
.execute(params)
.then(getResults)
.catch(promiseRejected);
}
// 成功调用时执行的方法
function getResults(response) {
// 循环每一个结果并标记符号和弹出框模板
// 并使它们每一个都在地图上显示出来
var peakResults = response.features.map(function(feature) {
feature.popupTemplate = popupTemplate;
return feature;
});
//向结果图层中添加刚找到的全部特征要素图层
resultsLayer.addMany(peakResults);
//将图形添加到地图上之后展示弹框
view
.goTo(peakResults)
.then(function() {
view.popup.open({
features: peakResults,
updateLocationEnabled: true
});
})
.catch(function(error) {
if (error.name != "AbortError") {
console.error(error);
}
});
// 打印结果数量返回给使用者
document.getElementById("printResults").innerHTML =
peakResults.length + " results found!";
}
// 访问失败时候执行
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div class="esri-widget" id="optionsDiv">
<!--手动输入要找的县级行政区-->
<input id="valSelect" placeholder="请输入" value="" />
<button class="esri-widget" id="doBtn">点击查询</button> <br />
<p><span id="printResults"></span></p>
</div>
<div id="viewDiv"></div>
</body>
</html>
执行完效果图（根据模糊查询“大”，共匹配28个符合要求的数据，点击缩放可分别查看）
前端美化后如下：
参考链接：
popup使用:https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#fieldInfos
querytask沙盒样板: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=tasks-query
querytask使用：https://developers.arcgis.com/javascript/latest/api-reference/esri-tasks-QueryTask.html
如果有遗漏，和描述错误的地方，欢迎留言私信指正
本文地址：https://blog.csdn.net/qq_42539194/article/details/107244982
上一篇： vue中插槽的使用详解