<!DOCTYPE html>
<html lang="en">
<head>
<meta char
set="UTF-8">
<title>Feature Layer Integration</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.
25/esri/themes/light/main.css">
<!-- 引入ArcGIS API -->
<script src="https://js.arcgis.com/4.
25/"></script>
<style>
#viewDiv {
padding: 0;
margin: 0;
height: 600px;
width: 100%;
}
.measure
Buttons {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
Name:<input id="searchInput" type="text">
<
button id="btn">查询</
button>
<div class="measure
Buttons">
<
button id="measureLengthBtn">测量距离</
button>
<
button id="measureAreaBtn">测量面积</
button>
<
button id="clearMeasureBtn">清除测量</
button>
</div>
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>面积 (平方米)</th>
</tr>
</thead>
<tbody id="infoBody"></tbody>
</table>
<p><strong>总面积：</strong><span id="totalArea">0 平方米</span></p>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/tasks/support/Query",
"esri/tasks/QueryTask",
"esri/widgets/AreaMeasurement
2D",
"esri/widgets/DistanceMeasurement
2D",
"esri/Graphic",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"
dojo/domReady!"
], function(
Map, MapView, FeatureLayer, Query, QueryTask, AreaMeasurement
2D, DistanceMeasurement
2D,
Graphic, SimpleFillSymbol, SimpleLineSymbol, Color
) {
// 创建地图实例
var map = new Map({
basemap: "streets-navigation-vector"
});
// 创建视图实例
var view = new MapView({
container: "viewDiv",
map: map,
center: [105,
25], // WGS_1984_UTM_zone_48N 的中心点
zoom: 7,
spatialReference: { wkid: 3
2648 } // WGS_1984_UTM_zone_48N 投影坐标系
});
// 加载文件地理数据库要素类
var featureLayer = new FeatureLayer({
url: "http://localhost/arcgis/rest/services/gzlx_FeatureToPolygon1/FeatureServer/0",
outFields: ["*"]
});
map.add(featureLayer);
// 查询功能
document.getElementById("btn").onclick = function() {
var name = document.getElementById("searchInput").value.trim();
if (!name) {
alert("请输入查询名称");
return;
}
view.graphics.removeAll();
var query = new Query();
query.where = `name = '${name}'`;
query.returnGeometry = true;
query.outFields = ["*"];
var queryTask = new QueryTask({
url: featureLayer.url
});
queryTask.execute(query).then(function(response) {
if (response.features.length === 0) {
alert("查询无结果");
return;
}
var totalArea = 0;
response.features.forEach(function(feature) {
var area = feature.geometry.getArea();
totalArea += area;
var symbol = new SimpleFillSymbol({
color: [0,
255, 0, 0.5],
outline: {
color: [
255, 0, 0],
width:
2
}
});
var graphic = new Graphic({
geometry: feature.geometry,
symbol: symbol,
attributes: feature.attributes
});
view.graphics.add(graphic);
});
document.getElementById("totalArea").textContent = totalArea.toFixed(
2) + " 平方米";
var html = "";
response.features.forEach(function(feature) {
html += `<tr>
<td>${feature.attributes.name || "未知名称"}</td>
<td>${feature.geometry.type}</td>
<td>${feature.geometry.getArea().toFixed(
2)}</td>
</tr>`;
});
document.getElementById("infoBody").innerHTML = html;
});
};
// 测量距离功能
var distanceMeasurement = new DistanceMeasurement
2D({
view: view
});
view.ui.add(distanceMeasurement, "top-right");
document.getElementById("measureLengthBtn").onclick = function() {
distanceMeasurement.start();
};
// 测量面积功能
var areaMeasurement = new AreaMeasurement
2D({
view: view
});
view.ui.add(areaMeasurement, "top-right");
document.getElementById("measureAreaBtn").onclick = function() {
areaMeasurement.start();
};
// 清除测量
document.getElementById("clearMeasureBtn").onclick = function() {
view.graphics.removeAll();
distanceMeasurement.clear();
areaMeasurement.clear();
};
});
</script>
</body>
</html>结合以下代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta char
set="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>
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
