-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbroke_query.html
130 lines (104 loc) · 5.09 KB
/
broke_query.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Broken QueryTask</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var map, query;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/query", "esri/tasks/QueryTask",
"dojo/domReady!"
], function(
Map,
ArcGISDynamicMapServiceLayer,
Query, QueryTask
) {
map = new Map("mapDiv", {
basemap: "satellite",
center: [-98.481, 38.52],
zoom: 8
});
//create and add new layer
var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer");
map.addLayer(dynamicLayer);
//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
map.on("click", executeQueryTask);
//Listen for infoWindow onHide event
map.infoWindow.on("hide", function() {map.graphics.clear();});
//build query task
queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0");
//Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
//dojo.connect(queryTask, "onComplete", showResults);
//build query filter
query = new Query();
query.outSpatialReference = {"wkid":4386};
query.returnGeometry = true;
query.outFields = ["FIELD_NAME", "FIELD_KID", "PROD_PETROL", "PROD_OIL", "STATUS"];
function executeQueryTask(evt) {
map.infoWindow.hide();
map.graphics.clear();
featureSet = null;
//onClick event returns the evt point where the user clicked on the map.
//This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
//set query geometry = to evt.mapPoint Geometry
query.geometry = evt.mapPoint;
//Execute task and call showResults on completion
queryTask.execute(query, function(fset) {
if (fset.features.length === 1) {
showFeature(fset.features[0],evt);
} else if (fset.features.length !== 0) {
showFeatureSet(fset,evt);
}
});
}
function showFeature(feature,evt) {
map.graphics.clear();
//set symbol
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
feature.setSymbol(symbol);
//construct infowindow title and content
var attr = feature.attributes;
var title = attr.FIELD_NAME;
var content = "Field ID : " + attr.FIELD_KID
+ "<br />Produces Petroleum : " + attr.PROD_PETROL
+ "<br />Produces Oil : " + attr.PROD_OIL
+ "<br />Status : " + attr.STATUS;
map.graphics.add(feature);
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
(evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;
}
function showFeatureSet(fset,evt) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
var screenPoint = evt.screenPoint;
featureSet = fset;
var numFeatures = featureSet.features.length;
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the infowindow.
var title = "You have selected " + numFeatures + " fields.";
var content = "Please select desired field from the list below.<br />";
for (var i=0; i<numFeatures; i++) {
var graphic = featureSet.features[i];
content = content + graphic.attributes.FIELD_NAME + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
}
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
}
});
</script>
</head>
<body class="claro">
Click on a petroleum field to get more info. If multiple fields are selected then you can select the field to display. If it doesn't work, try debugging (Ctrl + Shft + I).
<div id="mapDiv" style="width:100%; height:1100px; border:1px solid #000;"></div>
</body>
</html>