不改变以下代码基础上添加上面的功能：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-1 findtask</title>
<!-- 用来引入esri.css和tundra.css
样式表 -->
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/esri/css/esri.css"/>
<!-- 用来引入init.js，即可引入ArcGIS API for Javascript-->
<script src="https://js.arcgis.com/3.45/init.js"></script>
<!-- style标签用来设定页面显示外观，其中width和hight分别用来设置组件mapDiv的宽和高，border用来设置mapdiv的边框
样式
.mapclass根据元素的id属性值，来精准的选中元素-->
<style>
.MapClass{
width:100%;
height: 500px;
border: 1px solid #000;
}
</style>
</head>
<body class="tundra">
<div id="mapDiv" class="MapClass"></div>
<!-- 通过input标签，设置文本输入框 -->
Name:<input id="searchInput" type="text">
<!-- 设置button按钮 -->
<button id="btn">查询</button>
<!-- 利用table标签写表格，thead标签表示表头，tr表示一行，th表示单元格，tbody表示表身 -->
<table >
<thead>
<tr>
<th width="100px">名称</th>
<th width="100px">类型</th>
<th width="100px">面积</th>
</tr>
</thead>
<tbody id="infoBody"></tbody>
</table>
<!-- script标签用来书写Javascript代码 -->
<script>
/**
*思路：
* 1. 创建查询对象FindTask，对查询对象实例化
2. 创建属性查询参数
3.给findTask查询按钮添加一个click事件
（1）获取HTML页文本框所输入的查询名称。
（2）实例化FindParameters参数
(3）调用execute函数，执行查询
4.处理查询结果
（1）将获得的要素定位高亮显示，在回调函数中新建图形符号，设置获得fintask查询得到的geometry。
（2）在table面板中展示信息，利用数组获得查询信息，并在 table中展示信息
*/
require(["esri/map",
"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",
],
// function用来表示回调函数，function中的参数要与require中的类一一对应。
function(Map,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,Point,Color,Graphic){
//添加动态地图服务图层
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer");
map.addLayer(layer);
//创建属性查询对象，对查询对象实例化，FindTask构造函数需要一个ArcGIS Server地图服务的URL
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer");
//实例化查询参数，
var findParams = new FindParameters();
//给属性查询按钮添加一个click事件
document.getElementById("btn").onclick=function funFind(){
var name=document.getElementById("searchInput").value;//获得输入框的值，即当点击id="btn"的查询按钮时，获取到id=searchInput输入框的输入值。
map.graphics.clear();//清除上一次的高亮显示,若不写这个代码，选中的图层不会清空
findParams.returnGeometry = true; //注意 returnGeometry被设置为true以便结果能被显示在地图上。
//FindParameters指出哪些图层和字段将被搜索。如果多个图层包含相同的字段名称（例如"NAME"）两个字段都要被搜索。
findParams.layerIds = [0,1];//对省级行政区和省级行政区-线查询
findParams.searchFields = ["name"];//匹配图层中的name属性
findParams.searchText = name;//searchText参数是任务将要搜索什么。这个文本来自输入框并且当单击查询，按钮时被发送到execute函数。
//name为点击查询按钮时获得的输入框的值
findParams.returnGeometry = true; //注意 returnGeometry被设置为true以便结果能被显示在地图上。
/*进行查询,当任务执行结束，showResults函数循环访问FindResult里的graphics数组，
并增加每个图形到地图。函数也增加每个结果的属性到表格。
*/
findTask.execute(findParams,showFindResult)
// console.log(findParams);
}
//处理属性查询返回给我们的数据
function showFindResult(findResult)
{
//初始化信息暂存数组
nameArr=[];//用于存储查询地点名称
shapeArr=[];//用于存储查询shape
AREAArr=[];//用于存储查询shape
console.log(findResult);
if (findResult.length === 0) {
alert("查询无结果");
return;
}
for (var i = 0; i < findResult.length; i++) {
nameArr[i]=findResult[i].feature.attributes.name;
shapeArr[i]=findResult[i].feature.attributes.Shape;
AREAArr[i]=findResult[i].feature.attributes.AREA;
//定义高亮图形的符号
var lineSymbol= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1); //定义面的边界线符号
var PolygonSymbol = new
SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 1])); //定义面符号
//获得图形graphic
var graphic=findResult[i].feature;
//赋予相应符号
graphic.setSymbol(PolygonSymbol);
//将graphic添加到地图中，从而实现高亮效果
map.graphics.add(graphic);
}
//通过循环写入表格主体数据，tr标签为行，td标签为单元格。
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>";
}
//将属性绑定在infoBody的表格上，即修改表格主体的内容。
document.getElementById("infoBody").innerHTML =html;
}
}
)
</script>
</body>
</html>
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
