描述
本例展示了如何增加多个图形图层到地图。一个图形图层显示国家，另一个显示城市。在一个地图中有多个图形图层的能力是在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>