描述
本例展示了如何增加多個圖形圖層到地圖。一個圖形圖層顯示國家，另一個顯示城市。在一個地圖中有多個圖形圖層的能力是在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="width:800px; height:400px; border:1px solid #000;"></div> 83 </body> 84 </html>