1.直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../../Htmllibs/arcgis_js_api/library/3.27/3.27/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css" />
<link href="../../../Htmllibs/arcgis_js_api/library/3.27/3.27/esri/css/esri.css" rel="stylesheet" />
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.esriPopup .esriPopupWrapper {
box-shadow: 0 0 0.75em #777777;
-webkit-box-shadow: 0 0 0.75em #777777;
border-radius: 5px;
-webkit-border-radius: 5px;
overflow: hidden;
}
.esriPopup .contentPane {
position: relative;
max-height: 300px;
overflow: auto;
padding: 10px 6px 6px 10px;
background-color: #F7F7F7;
color: #333333;
width: 270px;
height: 170px;
overflow: hidden;
}
.esriPopup .sizer {
position: relative;
width: 270px;
z-index: 1;
background-color: white;
}
.esriPopup .titlePane {
color: blue;
background-color: white;
line-height: 20px;
padding-left: 6px;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
cursor: default;
}
</style>
<script src="../../../Htmllibs/arcgis_js_api/library/3.27/3.27/init.js"></script>
</head>
<body>
<div id="map"></div>
<script>
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/Geoprocessor",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"dojo/domReady!"
], function (
Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, Geoprocessor, Query, QueryTask, SimpleLineSymbol, Color
) {
var map, queryTask, query, sls;
map = new Map("map", {
logo: false,
showAttribution: false,
center: [116.99325167074795, 36.587559221339944],
zoom: 16,
spatialReference: { "wkid": 3857 },
});
var baseMap = new ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer");
var GW = new ArcGISDynamicMapServiceLayer("http://59.44.20.208:31114/arcgis/rest/services/test0311/MapServer");
map.addLayer(baseMap);
map.addLayer(GW);
//线的样式
sls = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASH,
new Color([255, 0, 0]),
3
);
//点击地图执行查询
map.on("click", executeQueryTask);
//建立查询任务
queryTask = new QueryTask("http://59.44.20.208:31114/arcgis/rest/services/test0311/MapServer/0");
//建立查询过滤器
query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.outSpatialReference = map.spatialReference;
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
//执行查询任务
function executeQueryTask(evt) {
console.log(evt)
query.geometry = evt.mapPoint;
//执行查询
queryTask.execute(query, showResults);
}
//显示查询结果
function showResults(featureSet) {
//删除地图上所有的图形层
map.graphics.clear();
console.log(featureSet);
if (featureSet.features.length > 0) {
//QueryTask返回featureSet类型.通过featureSet的循环把他们添加到信息窗口
for (var i = 0, il = featureSet.features.length; i < il; i++) {
//从featureSet中得到当前实例.
//从当前实例赋值给graphic
{
console.log("选中图形！")
var graphic = featureSet.features[0];
map.infoWindow.setTitle("添加标注");
console.log(graphic.attributes.name);
map.infoWindow.setTitle("属性信息");
map.infoWindow.setContent("<label>房屋名称:" + graphic.attributes.name + "</label><br><label>房屋地址:" + graphic.attributes.addr + "</label>");
map.infoWindow.resize(250, 150);
var point = graphic.geometry.getExtent().getCenter()
map.infoWindow.show(point);
graphic.setSymbol(sls);
map.centerAndZoom(point, 18);
map.graphics.add(graphic);
}
}
}
else {
console.log("没有选中图形！")
map.infoWindow.hide();
}
}
});
</script>
</body>
</html>2.效果：
