<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击查询</title>
<link rel="stylesheet" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/esri/css/esri.css" />
<script src="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/init.js"></script>
<style>
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
width:100%;
position: relative;
overflow: hidden;
}
</style>
<script>
require([
'dojo/on',
"dojo/dom",
"dojo/dom-attr",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/_base/array",
'esri/map',
'esri/layers/ArcGISDynamicMapServiceLayer',
"dojo/_base/xhr",
"esri/InfoTemplate",
"esri/dijit/InfoWindow",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/tasks/IdentifyResult",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/tasks/FeatureSet",
"dojox/collections/Dictionary",
"dojo/data/ItemFileReadStore",
"dijit/tree/ForestStoreModel",
"dijit/Tree",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/graphic",
],function(
on,
dom,
domAttr,
declare,
lang,
arrayUtil,
Map,
ArcGISDynamicMapServiceLayer,
xhr,
InfoTemplate,
InfoWindow,
IdentifyTask,
IdentifyParameters,
IdentifyResult,
QueryTask,
Query,
FeatureSet,
Dictionary,
ItemFileReadStore,
ForestStoreModel,
Tree,
SimpleLineSymbol,
SimpleFillSymbol,
Polyline,
Polygon,
geometryEngine,
SimpleMarkerSymbol,
Color,
Graphic
) {
var map = new Map('mapDiv');
// var layer1 = new ArcGISDynamicMapServiceLayer("http://10.200.223.191:6080/arcgis/rest/services/SDKD/MapServer");
var layer1 = new ArcGISDynamicMapServiceLayer("http://60.28.130.106:6080/arcgis/rest/services/3d/JN_XFDZ/MapServer");
var layer2 = new ArcGISDynamicMapServiceLayer("http://60.28.130.106:6080/arcgis/rest/services/3d/pipeLonLat/MapServer");
map.addLayer(layer1);
// map.addLayer(layer2);
// map.addLayers([layer1, layer2]);
var clickQuery ,_clickUrl,_clickTree;
var _clickIds;
pointQueryClick();
map.on("click",function(evt){
// console.log("evt:", evt);
// 清除可能有的图形（自己添加的）。
map.graphics.clear();
if(clickQuery){
identifyQuery(_clickUrl, _clickIds, evt.mapPoint, function(results, map) {
console.log("results:", results);
// results: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
// 数组里的每一个对象，对应每一条查询结果。
// 0:
// displayFieldName: "DYBH"
// feature:
// attributes: {FID: "2485", Shape: "Polygon", OBJECTID: "2486", JZXG: "0", DYBH: "Jde(12)07", …}
// geometry: {rings: Array(1), _ring: 0, spatialReference: {…}, cache: {…}}
// __proto__: Object
// geometryType: "esriGeometryPolygon"
// layerId: 0
// layerName: "土地细分导则"
// value: "Jde(12)07"
// __proto__: Object
// console.log("map:", map);
if (results.length > 0) {
// 以下要对查询到的结果，按图层名进行分类。
// 一个分类下，可能有多个子元素（多条数据）。
// 声明用于存放分类数据的容器。
var hashtable = new Dictionary();
// 用for循环，对查询到的每一条数据分类，并在地图上添加图形（以标识该特征）。
for (var i = 0; i < results.length; i++) {
if (!hashtable.containsKey(results[i].layerName)) {
hashtable.add(results[i].layerName, [results[i].feature]);
}
else {
var arrayFeature = hashtable.item(results[i].layerName);
arrayFeature.push(results[i].feature);
}
addGraphicsToMap(results[i]);
}
console.log("hashtable:", hashtable);
// 如果有查询结果树，破坏它。
if (_clickTree) {
_clickTree.destroy();
}
// 构造查询弹窗。
handler_click_query(hashtable, evt);
}
else {
// alert("当前点未查询到任何元素");
map.infoWindow.hide();
}
}
);
}
});
function pointQueryClick(){
/*此函数用于，初始化查询条件。*/
// 查询接口。
_clickUrl = "http://60.28.130.106:6080/arcgis/rest/services/3d/JN_XFDZ/MapServer";
// _clickUrl = "http://60.28.130.106:6080/arcgis/rest/services/3d/pipeLonLat/MapServer";
// 为地图中可能的多个图层依次提供id值（我猜的），且在ArcGISDynamicMapServiceLayer类型的图层查询中，
// 该id会作为查询结果返回，类似这样0: {layerId: 0, layerName: "土地细分导则",...。
_clickIds = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
// 查询标志变量。
clickQuery = true;
}
function identifyQuery(url, layerIds, geometry, bufferCallback) {
/*此函数用于，查询。
* url, 图层的查询接口。
* layerIds, 要对其执行标识操作的层。
* geometry, 在识别/查询过程中用于选择特征的几何图形（范围）。*/
// 创建一个新的标识任务对象。
var identifyTask = new IdentifyTask(url);
// 创建一个新的标识参数对象。
var identifyParams = new IdentifyParameters();
identifyParams.returnGeometry = true; // 返回几何图形。
identifyParams.tolerance = 5; // 公差。
identifyParams.layerIds = layerIds;
// 查询操作的层选项，查询可见的层。LAYER_OPTION_ALL，LAYER_OPTION_TOP，LAYER_OPTION_VISIBLE。
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
identifyParams.geometry = geometry;
// 当前正在查看的地图的宽度(以像素为单位)。
identifyParams.width = map.width;
// 当前正在查看的地图的高度(以像素为单位)。
identifyParams.height = map.height;
identifyParams.mapExtent = map.extent;
identifyParams.spatialReference = map.spatialReference;
// 执行查询。
// execute(identifyParameters, callback?, errback?)
identifyTask.execute(identifyParams, lang.hitch(this,
function(results) {
if (lang.isFunction(bufferCallback)) {
bufferCallback(results, map);
}
}), function(err) {
});
}
function handler_click_query (hashtable, evt) {
/*此函数用于，构造查询弹窗中的内容及事件。
* hashtable是字典，key, 图层名称，value, 该图层下的features数组。*/
var table_tree = "<div style=\"height:280px;overflow:hidden;\">" +
"<div id=\"pointQueryResult\" style=\"padding-left:0px;overflow:visible\">" +
"<table width=\"375\" cellpadding=\"0\" style=\"border-width: 1px;border-color: #666666;border-collapse: collapse;\">" +
"<tr><th style=\"border:1px solid #666666;\">图层列表</th><th style=\"border:1px solid #666666;\">详细信息</th></tr>" +
"<tr valign=\"top\">"
+ "<td style=\"width:140px;height:242px;vertical-align: top;border:1px solid #666666;\">"
+ "<div id=\"showLayerResult\" style=\"overflow:auto;width:100%;height:100%;margin:0px;padding:0px;\">";
var treeData = [];
hashtable.forEach(function(entry) {
var item = {};
item.id = entry.key;
item.name = entry.key;
item.type = "test";
item.children = [];
treeData.push(item);
for (var i = 0; i < entry.value.length; i++) {
var featureId = entry.value[i].attributes['FID']
? entry.value[i].attributes['FID']
: entry.value[i].attributes['OBJECTID'];
item.children.push({
_reference : entry.key
+ featureId
});
treeData.push({
id : entry.key + featureId,
name : featureId,
type : "feature"
});
}
});
var data = {
identifier : 'id',
label : 'name',
items : treeData
};
var store = new ItemFileReadStore({
data : data
});
var treeModel = new ForestStoreModel({
store : store,
query : {
type : "test"
},
childrenAttrs : ["children"]
});
table_tree += "<div id='treeThree'></div>";
table_tree += "</div>";
table_tree += "</div>";
table_tree += "<td style=\"width:290px;height:245px;vertical-align: top;border: 1px solid #666666;\">" +
"<div style=\"overflow:auto;width:100%;height:100%;margin:0px;padding:0px;\" id='show_panel_attributes'>";
table_tree += "</div></td></tr></table><div></div></div></div><div style=\"display：inline-block\"><input id=\"errorInfo\" style=\"display:none;\" type=\"button\" value=\"错误信息\"/><input id=\"errorSub\" style=\"float: right; display: none;\" type=\"button\" value=\"错误上报\"/></div>";
map.infoWindow.setTitle("点击查询");
map.infoWindow.setContent(table_tree);
var tree = new Tree({
model : treeModel,
autoExpand : true,
showRoot : false
}, "treeThree");
tree.startup();
tree.on("click", function(item, node, evt) {
// 获取当前点击的tree的id值
if (!node.hasChildren()) {// 判断有没有子节点
var selectId = item.id[0];// 当前的objectid
var selectName = item.name[0];
var parentId = node.getParent(selectId).item.id[0];// 图层名称
var featureArray = hashtable.item(parentId);
for (var i = 0; i < featureArray.length; i++) {
if (selectName == (featureArray[i].attributes['FID'] ? featureArray[i].attributes['FID']: featureArray[i].attributes['OBJECTID'])) {
// 然后调用对应的单击事件方法
var content = _doFeatureForClickQuery(featureArray[i]);
domAttr.set('show_panel_attributes',
'innerHTML', content);
break;
}
}
}
});
tree.on("load", function() {
var childrenArray = tree.rootNode.getChildren();
if (childrenArray.length > 0) {
var key = childrenArray[0].item.id[0];
var featureArray = hashtable.item(key);
if (featureArray.length > 0) {
var content = _doFeatureForClickQuery(featureArray[0]);
domAttr.set('show_panel_attributes','innerHTML', content);
}
}
});
_clickTree = tree;
map.infoWindow.resize(400, 360);
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
/**
* 点击查询展示属性表里的所有字段
*/
function _doFeatureForClickQuery (feature) {
var contents = "";
contents += "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse;\">";
var flag = 0;
for (var p in feature.attributes) {
if (p.toString().toLowerCase().indexOf('shape') != -1
|| p.toString().toLowerCase()
.indexOf('objectid') != -1
|| p.toString().toLowerCase()
.indexOf('enabled') != -1)
continue;
contents += "<tr>";
if (flag == 0) {
contents += "<td height=\"20\" width=\"70\" style=\"border-bottom:1px solid #666666;border-right:1px solid #666666;text-align:right;\">";
} else {
contents += "<td height=\"20\" width=\"70\" style=\"border-top:1px solid #666666;border-bottom:1px solid #666666;border-right:1px solid #666666;text-align:right;\">";
}
contents += p;
contents += "</td>";
if (flag == 0) {
contents += "<td width=\"125\" style=\"border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;padding-left:2px;\">";
} else {
contents += "<td width=\"125\" style=\"border:1px solid #666666;padding-left:2px;\">";
}
flag++;
contents += feature.attributes[p].toString().toLowerCase() == "null" ? "" : feature.attributes[p];
contents += "</td>";
contents += "</tr>";
}
contents += "</table>";
return contents;
}
function addGraphicsToMap (resultI) {
/*此函数用于，添加图形到地图。
* 该图形主要用于标识当前位置查询到的图形。
* 现在，添加面图形的功能可用。*/
var graphic, symbol;
switch (resultI.geometryType) {
case "point" :
symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 1),
new Color([0, 255, 0, 0.25]));
break;
case "esriGeometryPolyline" :
symbol = new SimpleLineSymbol(
// STYLE_DASH(短线空白间隔)，STYLE_SOLID
SimpleLineSymbol.STYLE_DASH,
new Color([255,0,0]),
3 // 线宽，单位：像素。
);
var polyline = new Polyline(resultI.feature.geometry.paths[0]);
graphic = new Graphic(polyline,symbol);
break;
case "esriGeometryPolygon":
symbol = new SimpleFillSymbol(
// STYLE_NULL(不填充)，STYLE_SOLID(固体填充)。
SimpleFillSymbol.STYLE_SOLID,
// 轮廓线
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASHDOT,
new Color([255,0,0]),
2
),
// 填充颜色。
new Color([255,255,0,0.25])
);
var polygon = new Polygon(resultI.feature.geometry.rings[0]);
graphic = new Graphic(polygon,symbol);
break;
}
// var _graphic = new Graphic(geometry,symbol);
map.graphics.add(graphic);
}
}
)
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="float:left;width: 100%;height: 100%;"></div>
</body>
</html>
扫一扫
01-19
07-15
2048
2048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
