<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="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%;
}
.measureButtons {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
Name:<input id="searchInput" type="text">
<button id="btn">查询</button>
<div class="measureButtons">
<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/AreaMeasurement2D",
"
esri/widgets/DistanceMeasurement2D",
"
esri/Graphic",
"
esri/
symbols/SimpleFill
Symbol",
"
esri/
symbols/SimpleLine
Symbol",
"
esri/Color",
"dojo/domReady!"
], function(
Map, MapView, FeatureLayer, Query, QueryTask, AreaMeasurement2D, DistanceMeasurement2D,
Graphic, SimpleFill
Symbol, SimpleLine
Symbol, 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: 32648 } // 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 SimpleFill
Symbol({
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 DistanceMeasurement2D({
view: view
});
view
.ui
.add(distanceMeasurement, "top-right");
document
.getElementById("measureLengthBtn")
.onclick = function() {
distanceMeasurement
.start();
};
// 测量面积功能
var areaMeasurement = new AreaMeasurement2D({
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 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/SimpleLine
Symbol",
"
esri/
symbols/SimpleFill
Symbol",
"
esri/geometry/Point",
"
esri/Color",
"
esri/graphic",
],
// function用来表示回调函数，function中的参数要与require中的类一一对应。
function(Map,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,
SimpleMarkerSymbol,
SimpleLine
Symbol,SimpleFill
Symbol,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 line
Symbol= new SimpleLine
Symbol(SimpleLine
Symbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1); //定义面的边界线
符号
var Polygon
Symbol = new SimpleFill
Symbol(SimpleFill
Symbol.STYLE_SOLID, line
Symbol,new Color([0, 255, 0, 1])); //定义面
符号
//获得图形graphic
var graphic=findResult[i]
.feature;
//赋予相应
符号
graphic
.set
Symbol(Polygon
Symbol);
//将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>
本文介绍如何使用AMD模块加载Esri的SimpleMarkerSymbol，该符号用于在地图上绘制点或多点。提供了构造函数、常量、属性及方法等详细信息。
扫一扫
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
