<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性查询图形</title>
<script src="../js/jsConfigVS.js"></script>
<link rel="stylesheet" type="text/css" href="../arcgis_js_api/library/3.17/esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="../arcgis_js_api/library/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="Layout.css" />
<script src="../arcgis_js_api/library/3.17/init.js" type="text/javascript"></script>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#777;
overflow:hidden;
font-family: "Trebuchet MS";
font-size:9pt;
}
.dijitAccordionTitle {
background-color:#777;
overflow:hidden;
font-family: "Trebuchet MS";
font-size:12pt;
}
#header {
background-color:#444;
color:white;
font-size:20pt;
text-align:center;
font-weight:bold;
}
#attributionText {
background-color:whitesmoke;
color:black;
font-size:7pt;
text-align:left;
margin:5px;
}
#divNeighborhoodName {
background-color:white;
color:black;
font-size:16pt;
text-align:center;
font-weight:bold;
}
#footer {
background-color:#444;
color:yellow;
font-size:10pt;
text-align:center;
}
</style>
<script>
var map;
require(["dojo/parser",
"dojo/on",
"dojo/dom",
"esri/basemaps",
"esri/map",
"esri/geometry/Extent",
"esri/SpatialReference",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/geometry/Point",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/InfoTemplate",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"],
function (
parser,
on,
dom,
esriBasemaps,
Map,
Extent,
SpatialReference,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
Point,
FindTask,
FindParameters,
InfoTemplate,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color)
{
parser.parse();
esriBasemaps.XjOnline = {
baseMapLayers: [{ url: xjuConfig.vectorLayers }],
thumbnailUrl: "images/topo.jpg",
title: "矢量图"
};
esriBasemaps.XjRaster = {
baseMapLayers: [{ url: xjuConfig.imageLayers }],
thumbnailUrl: "images/satellite.jpg",
title: "卫星图"
};
var startExtent = new Extent({
"xmin": 73.441277,
"ymin": 34.334934,
"xmax": 96.388373,
"ymax": 49.178574,
"spatialReference": { "wkid": 4326 }
});
//加载底图
map = new Map("mapDiv", {
extent: startExtent,
zoom: 0,
basemap: "XjRaster",
sliderStyle: "large",
logo: false
});
// 实例化FindTask
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/BaseMap/XjOnline/MapServer");
// FindTask的参数
var findParams = new FindParameters();
// 返回Geometry
findParams.returnGeometry = true;
// 查询的图层id
findParams.layerIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 33, 34, 35, 36, 37, 46];
//findParams.layerIds = [27,28,29,30,31,33,34,35,36,37,46];
// 查询字段
findParams.searchFields = ["NAME"];
var ptSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
on(dom.byId("findBtn"), "click", function () {
execute(dom.byId(‘searchText‘).value);
});
// 根据输入的关键字进行findTask操作
function execute(searchText) {
findParams.searchText = searchText;
findTask.execute(findParams, showResults);
}
// 显示findTask的结果
function showResults(results) {
// 清除上一次的高亮显示
map.graphics.clear();
//输出统计结果值
dom.byId(‘totalSearchNum‘).innerHTML = results.length;
var innerHtml = "";
var symbol;
for (var i = 0; i < results.length; i++) {
var curFeature = results[i];
var graphic = curFeature.feature;
var infoTemplate = null;
// 根据类型设置显示样式
switch (graphic.geometry.type) {
case "point":
symbol = ptSymbol;
infoTemplate = new InfoTemplate("${NAME}", "${*}");
break;
case "polyline":
symbol = lineSymbol;
infoTemplate = new InfoTemplate("${NAME}", "${*}");
break;
}
// 设置显示样式
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
// 添加到graphics进行高亮显示
map.graphics.add(graphic);
innerHtml += "<a href=\"javascript:positionFeature(" + graphic.attributes.OBJECTID;
if (graphic.attributes.Name) {
innerHtml += ",\‘" + graphic.attributes.Name + "\‘)\">" + graphic.attributes.Name + "</a><br>";
}
else {
innerHtml += ",\‘" + graphic.attributes.NAME + "\‘)\">" + graphic.attributes.NAME + "</a><br>";
}
}
dom.byId("contentsContainer").innerHTML = innerHtml;
}
window.positionFeature = function (id, name) {
var sGrapphic;
//遍历地图的图形查找FID和点击行的FID相同的图形
for (var i = 0; i < map.graphics.graphics.length; i++) {
var cGrapphic = map.graphics.graphics[i];
var sGName = "";
if (cGrapphic.attributes.NAME) {
sGName = cGrapphic.attributes.NAME;
}
else {
sGName = cGrapphic.attributes.Name;
}
if ((cGrapphic.attributes) && cGrapphic.attributes.OBJECTID == id && sGName == name) {
sGrapphic = cGrapphic;
break;
}
}
// 当点击的名称对应的图形为点类型时进行地图中心定位显示
if (sGrapphic.geometry.type == "point") {
var cPoint = new Point(sGrapphic.geometry.x, sGrapphic.geometry.y);
var p = map.toScreen(cPoint);
var iw = map.infoWindow;
iw.setTitle(sGrapphic.getTitle());
iw.setContent(sGrapphic.getContent());
iw.show(p, map.getInfoWindowAnchor(p));
map.centerAt(cPoint);
}
else {
var cPoint = new Point(sGrapphic.geometry.paths[0][0][0], sGrapphic.geometry.paths[0][0][1]);
var p = map.toScreen(cPoint);
var iw = map.infoWindow;
iw.setTitle(sGrapphic.getTitle());
iw.setContent(sGrapphic.getContent());
iw.show(p, map.getInfoWindowAnchor(p));
map.centerAt(cPoint);
}
};
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:‘headline‘,gutters:false" style="width:100%; height:100%;">
<!--标题区域-->
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:‘top‘" style="height:50px;">
属性查询图形
</div>
<!--中间地图区域-->
<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:‘center‘" style="margin:5px;">
</div>
<!--右边为属性查询与结果显示区域-->
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:‘right‘" style="width:35%;margin:5px;background-color:whitesmoke;">
输入查询文本
<input id="searchText" value="胜利路" type="text" />
<input id="findBtn" type="button" value="查 找" />
<div>查询到的结果数为：<span id="totalSearchNum" style="font-weight:800;">0</span></div>
<div id="contentsContainer"></div>
</div>
</div>
</body>
</html>
结果：
时间： 2024-07-30 00:54:54