Demo是编程之母,API是编程之父。面对一个陌生的框架,直接从api开始写代码是不明智的,最好的办法就是按照Demo来写,这样既能很快的吧Api用起来,又能避免摸着石头过河的愚蠢行为。用的差不多了,需要更多的功能扩展,这时候就可以依葫芦画瓢看着api来写功能。api也是人写的,每个人有每个人的思维方式,从demo起步是熟悉某种api思维方式的最好方式。有些人说,抄例子太低级,我认为,抄例子能解决的事儿,绝不要自命清高地自己琢磨,生命有限,把时间用在解决问题上,而不是思考无意义的问题。
Arcgis api for JS中,选择的例子中只提供了通过缓冲区选择的方式,下面提供一个点选的。
描述
This sample shows how to use the draw toolbar to select gas fields from a feature layer. The gas fields are displayed using a feature layer with ONDEMAND mode. On-demand mode retrives selected features and features within the current extent.
Click the select fields button then draw a rectangle on the map.The toolbar's onDrawEnd event fires when you finish sketching the selection rectangle. Notice that the sketch is used with the FeatureLayer's selectFeatures method to perform a spatial query.
dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});
After the features are selected onSelectionComplete fires and the total gas production for the selected fields is calculated.
代码
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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=7"
/>
<!--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
>Layer in a map service - [ON-DEMAND]</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"
>
<
script
type
=
"text/javascript"
>djConfig = { parseOnLoad:true };</
script
>
<
script
type
=
"text/javascript"
src
=
"http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"
></
script
>
<
script
type
=
"text/javascript"
>
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
var selectionToolbar, featureLayer;
function init() {
var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) );
var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true });
dojo.connect(map, "onLoad", initSelectToolbar);
var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(baseMapLayer);
var fieldsSelectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));
fieldsSelectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2));
var content = "<
b
>Status</
b
>: ${STATUS}" +
"<
br
><
b
>Cummulative Gas</
b
>: ${CUMM_GAS} MCF" +
"<
br
><
b
>Total Acres</
b
>: ${APPROXACRE}" +
"<
br
><
b
>Avg. Field Depth</
b
>: ${AVG_DEPTH} meters";
var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction);
dojo.connect(featureLayer, "onSelectionClear", function(features) {
dojo.byId('messages').innerHTML = "<
i
>No Selected Fields</
i
>";
});
map.addLayer(featureLayer);
}
function initSelectToolbar(map) {
selectionToolbar = new esri.toolbars.Draw(map);
var selectQuery = new esri.tasks.Query();
dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});
}
function sumGasProduction(features) {
var productionSum = 0;
//summarize the cummulative gas production to display
dojo.forEach(features, function(feature) {
productionSum = productionSum + feature.attributes.CUMM_GAS;
});
dojo.byId('messages').innerHTML = "<
b
>Selected Fields Production: " + productionSum + " mcf. </
b
>";
}
dojo.addOnLoad(init);
</
script
>
</
head
>
<
body
class
=
"claro"
>
<
button
dojoType
=
"dijit.form.Button"
onClick
=
"selectionToolbar.activate(esri.toolbars.Draw.EXTENT);"
>Select Fields</
button
>
<
button
dojoType
=
"dijit.form.Button"
onClick
=
"featureLayer.clearSelection();"
>Clear Selection</
button
><
br
>
<
div
id
=
"map"
style
=
"position: relative; width:700px; height:500px; border:1px solid #000;"
></
div
>
<
span
id
=
"messages"
></
span
>
</
body
>
</
html
>
|
参考:http://maps.rosreestr.ru/arcgis_js_api/sdk/help/jssamples/fl_selectfeatures.html
本文转自 huohe2009 51CTO博客,原文链接:http://blog.51cto.com/zhaojie/1352057