ArcGIS api for javascript——图形-使用多个图形图层

描述

本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在ArcGIS JavaScript API v1.4增加的。

从蓝色的城市点分隔灰色的区县多边形使图形易于管理。例如，如果仅仅想要删除城市，仅需删除有这个城市点的图形图层。如果城市和区县在同一个图形图层里，就不得不写一些额外的代码来探测城市图层并且删除它们。

注意如果单击一个重叠的图形区域（本例中是一个城市），仅仅上层的图形响应单击事件。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <meta http-equiv="X-UA-Compatible" content="IE=7" />
 6     <title>Points in Extent</title>
 7     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
 8     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
 9     <script type="text/javascript" charset="utf-8">
10       dojo.require("esri.map");
11       dojo.require("esri.tasks.query");
12 
13       var map;
14 
15       function init() {
16         map = new esri.Map("map", {
17           extent: new esri.geometry.Extent(-102.61, 36.2, -93.82, 40.5, new esri.SpatialReference({wkid: 4326})),
18           slider: false
19         });
20         dojo.connect(map, "onLoad", doQueries);
21         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
22       }
23 
24       function doQueries(map) {
25         //查询所有国家 in Kansas
26         var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
27         var countyQuery = new esri.tasks.Query();
28         countyQuery.outFields = ["*"];
29         countyQuery.returnGeometry = true;
30         countyQuery.outSpatialReference = map.spatialReference;
31         countyQuery.where = "STATE_NAME = 'Kansas'";
32         countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);
33 
34         //查询所有城市 in Kansas
35         var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
36         var cityQuery = new esri.tasks.Query();
37         cityQuery.outFields = ["*"];
38         cityQuery.returnGeometry = true;
39         cityQuery.outSpatialReference = map.spatialReference;
40         cityQuery.where = "STATE_NAME = 'Kansas'";
41         cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
42       }
43 
44       function addCountyFeatureSetToMap(featureSet) {
45         var symbol = new esri.symbol.SimpleFillSymbol();
46         symbol.setColor(new dojo.Color([150,150,150,0.5]));
47 
48         //Create graphics layer for counties
49         var countyLayer = new esri.layers.GraphicsLayer();
50         map.addLayer(countyLayer);
51 
52         var infoTemplate = new esri.InfoTemplate("${NAME}","${'*'}");
53 
54         //Add counties to the graphics layer
55         dojo.forEach(featureSet.features, function(feature) {
56           countyLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
57         });
58       }
59 
60       function addCityFeatureSetToMap(featureSet) {
61         var symbol = new esri.symbol.SimpleMarkerSymbol();
62         symbol.setColor(new dojo.Color([0,0,255]));
63 
64         //Create graphics layer for cities
65         var cityLayer = new esri.layers.GraphicsLayer();
66         map.addLayer(cityLayer);
67         map.reorderLayer(cityLayer,1);
68 
69         var infoTemplate = new esri.InfoTemplate("${CITY_NAME}","${'*'}");
70 
71         //Add cities to the graphics layer
72         dojo.forEach(featureSet.features, function(feature) {
73           cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
74         });
75       }
76 
77       dojo.addOnLoad(init);
78     </script>
79 
80   </head>
81   <body>
82     <div id="map" class="tundra" style="800px; height:400px; border:1px solid #000;"></div>
83   </body>
84 </html>