代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css"
href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/>
<script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<style type="text/css">
.MapClass {
width: 100%;
height: 600px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
// require(["esri/map",
// "esri/layers/ArcGISDynamicMapServiceLayer",
// "dojo/on",
// "dojo/dom",
// "esri/tasks/FindTask",
// "esri/tasks/FindParameters",
// "esri/symbols/SimpleLineSymbol",
// "esri/symbols/SimpleFillSymbol",
// "esri/graphic",
// "dojo/domReady!"],
// function (Map, ArcGISDynamicMapServiceLayer, on, dom,
// FindTask, FindParameters,
// SimpleLineSymbol, SimpleFillSymbol, Graphic) {
// var map = new esri.Map("mapDiv");
// //地图服务的URL
// var MapServer = "http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer";
// var layer = new esri.layers.ArcGISDynamicMapServiceLayer(MapServer);
// map.addLayer(layer)
// //创建属性查询对象
// var findTask = new FindTask(MapServer);
// //创建属性查询参数
// var findParams = new FindParameters();
// on(dom.byId("Btn"), "click", function () {
// //是否返回给我们几何信息
// findParams.returnGeometry = true;
// //对哪一个图层进行属性查询
// findParams.layerIds = [3];
// //查询的字段
// findParams.searchFields = ["Name"];
// //searchText和searchFields结合使用，即查询name=J4
// findParams.searchText = "浙江";
// //执行查询对象
// findTask.execute(findParams, ShowFindResult);
// })
// function ShowFindResult(queryResult) {
// //创建线符号
// var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
// //创建面符号
// var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
// if (queryResult.length == 0) {
// dom.byId("divShowResult").innerHTML = "";
// return;
// }
// var htmls = "";
// if (queryResult.length >= 1) {
// htmls = htmls + "<table style=\"width: 100%\">";
// htmls = htmls + "<tr><td>名称</td></tr>";
// for (var i = 0; i < queryResult.length; i++) {
// //获得图形graphic
// var graphic = queryResult[i].feature;
// //赋予相应的符号
// graphic.setSymbol(fill);
// //将graphic添加到地图中，从而实现高亮效果
// map.graphics.add(graphic);
// //获得教学楼名称（此处是和shp属性表对应的）
// var ptName = graphic.attributes["POPName"];
// if (i % 2 == 0)
// htmls = htmls + "<tr>";
// else
// htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
// htmls = htmls + "<td><a href=\"#\" \">" + ptName + "</a></td>";
// htmls = htmls + "</tr>";
// }
// htmls = htmls + "</table>";
// //将属性绑定在divShowResult上面
// dom.byId("divShowResult").innerHTML = htmls;
// }
// }
//
// });
//
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom",
"dojo/on",
"esri/tasks/QueryTask",
"esri/toolbars/draw",
"esri/tasks/query",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"dojo/domReady!"],
function (Map, ArcGISDynamicMapServiceLayer, dom, on,
QueryTask, Draw, Query,
SimpleLineSymbol, SimpleFillSymbol, Graphic) {
var map = new Map("mapdiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer");
map.addLayer(layer)
//定义一个绘图工具
var toolBar = new Draw(map);
//给button绑定事件
on(dom.byId("Btn"), "click", function () {
//激活绘图工具，我要绘制一个面图形
toolBar.activate(Draw.POLYGON);
})
on(toolBar, "draw-complete", function (result) {
//获得绘图得到的面
var geometry = result.geometry;
//关闭绘图工具
toolBar.deactivate();
queryGraphic(geometry);
});
function queryGraphic(geometry) {
//创建查询对象，注意：服务的后面有一个编号，代表对那一个图层进行查询
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer/3");
//创建查询参数对象
var query = new Query();
//空间查询的几何对象
query.geometry = geometry;
//服务器给我们返回的字段信息，*代表返回所有字段
query.outFields = ["*"];
//空间参考信息
query.outSpatialReference = map.spatialReference;
//查询的标准，此处代表和geometry相交的图形都要返回
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
//是否返回几何信息
query.returnGeometry = true;
//执行空间查询
queryTask.execute(query, showQueryResult);
}
function showQueryResult(queryResult) {
//创建线符号
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//创建面符号
var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol);
if (queryResult.features.length == 0) {
dom.byId("divShowResult").innerHTML = "";
return;
}
var htmls = "";
if (queryResult.features.length >= 1) {
htmls = htmls + "<table style=\"width: 100%\">";
htmls = htmls + "<tr><td>名称</td></tr>";
for (var i = 0; i < queryResult.features.length; i++) {
//得到graphic
var graphic = queryResult.features[i];
//给图形赋予符号
graphic.setSymbol(fill);
//添加到地图从而实现高亮效果
map.graphics.add(graphic);
//获得教学楼的名称信息，此处应和shp的属性表对应
var ptName = graphic.attributes["alias"];
if (i % 2 == 0)
htmls = htmls + "<tr>";
else
htmls = htmls + "<tr bgcolor=\"#F0F0F0\">";
htmls = htmls + "<td><a href=\"#\"\">" + ptName + "</a></td>";
htmls = htmls + "</tr>";
}
htmls = htmls + "</table>";
//将教学楼的名称信息和divShowResult绑定
dom.byId("divShowResult").innerHTML = htmls;
}
}
});
</script>
</head>
<body>
<div id="mapdiv" class="MapClass" style="width:900px; height:300px; border:1px solid #000;"></div>
<input type="button" value="空间查询" id="Btn"/>
<div id="divShowResult" style="width:900px; height:300px; border:1px solid #000;"></div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手