前言
我们在使用ArcGIS JS API时,会遇到在文本框中输入名称,查询该要素,实现要素的查找功能。
准备
- 在本地部署ArcGIS JS API/调用在线的API
- 发布好的动态地图服务
思路
- HTML页文本框接收查询名称
- 点击事件触发API中的findTask查询
- 实例化findTask参数FindParameters并设置
- 实例化FindTask参数并调用execute函数
- 将获得的要素定位高亮显示
- 在回调函数中新建图形符号
- 设置获得findTask查询得到geometry
- 获得中心点坐标并进行定位
- 在table面板中展示信息
- 利用数组获得查询信息
- 在table中展示信息
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
<style>
*{
padding: 0px;
margin:0px;
}
table{
margin-top: 10px;
border-collapse: collapse;
overflow-y: scroll;
}
th,td{
padding: 0px;
border:1px solid #000;
}
</style>
</head>
<body class="tundra">
<div id="mapDiv" style="width:calc(100% - 2px); height:800px; border:1px solid #000;"></div>
Name:<input id="searchInput" type="text">
<input id="btn" type="button" value="查询">
<table >
<thead>
<tr>
<th width="100px">名称</th>
<th width="100px">类型</th>
<th width="100px">面积</th>
</tr>
</thead>
<tbody id="infoBody">
</tbody>
</table>
<script>
require(["esri/map",
"dojo/query",
"dojo/dom",
"dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Point",
"esri/Color",
"esri/graphic",
"dojo/domReady!"],
function(Map,query,dom,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleMarkerSymbol,
SimpleLineSymbol,SimpleFillSymbol,Point,Color,Graphic){
var nameArr=[];//用于存储查询地点名称
var shapeArr=[];//用于存储查询shape
var areaArr=[];//用于存储面积
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
map.addLayer(layer);
query("#btn").on("click",function(){
var name=dom.byId("searchInput").value;//获得输入框的值
map.graphics.clear();//清空graphics
//实例化查询参数
var findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0,2];//对地级城市和省记性查询
findParams.searchFields = ["name"];//匹配图层中的name属性
findParams.searchText = name;
//实例化查询对象
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
//进行查询
findTask.execute(findParams,showFindResult)
});
function showFindResult(queryResult)
{
//初始化信息暂存数组
nameArr=[];
shapeArr=[];
areaArr=[];
if (queryResult.length === 0) {
alert("查询无结果");
return;
}
for (var i = 0; i < queryResult.length; i++) {
nameArr[i]=queryResult[i].feature.attributes.NAME;
shapeArr[i]=queryResult[i].feature.attributes.Shape;
areaArr[i]=queryResult[i].feature.attributes.AREA;
//定义高亮图形的符号
var pointSymbol = new SimpleMarkerSymbol(//定义点符号
SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([255,0,0]));
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1); //定义面的边界线符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1])); //定义面符号
var graphic ={}; //创建graphic
var locationPoint ={};//创建定位点
var geometry = queryResult[i].feature.geometry;//获得该图形的形状
if(geometry.type ==="polygon"){
graphic = new Graphic(geometry, PolygonSymbol);
locationPoint=geometry.getCentroid();
}
else if(geometry.type ==="point"){
graphic = new Graphic(geometry, pointSymbol);
locationPoint=geometry;
}
//将图形添加到map中
map.graphics.add(graphic);
map.centerAndZoom(locationPoint,1);
}
var html="";
for(var i=0;i<nameArr.length;i++){
html+="<tr>" +
" <td >"+nameArr[i]+"</td>" +
"<td >"+shapeArr[i]+"</td>" +
"<td >"+areaArr[i]+"</td>"+
"</tr>";
}
dom.byId("infoBody").innerHTML =html;
}
})
</script>
</body>
</html>
运行结果
- 查询前
- 城市查询
- 省查询
注意问题
- 发布图层服务结构