ArcGIS api for javascript——渲染-使用唯一值渲染

描述

本例使用唯一值渲染器来作为美国的符号。每个州有一个字符串属性"SUB_REGION"表示它的国家的地区。UniqueValueRenderer.addValue()方法被用来重复地为每个区域定义一个颜色。
 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>Unique Value Renderer</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({xmin:-130.78125,ymin:19.51171875,xmax:-60.46875,ymax:54.66796875,spatialReference:{wkid:4326}}),
18           slider: false
19         });
20         dojo.connect(map, "onLoad", connectErrorHandler);
21         dojo.connect(map, "onLoad", doQuery);
22         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
23       }
24 
25       dojo.addOnLoad(init);
26 
27       function connectErrorHandler() {
28         dojo.connect(map.graphics, "onError", errorHandler);
29       }
30 
31       function errorHandler(err) {
32         console.error(err.message);
33       }
34 
35       function doQuery() {
36         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1");
37         var query = new esri.tasks.Query();
38         query.where = "1=1";
39         query.outFields = ["SUB_REGION"];
40         query.returnGeometry = true;
41         queryTask.execute(query, addFeatureSetToMap);
42       }
43 
44       function addFeatureSetToMap(featureSet) {
45         //define default symbol for features
46         var defaultSymbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);
47         defaultSymbol.outline.setStyle(esri.symbol.SimpleLineSymbol.STYLE_NULL);
48 
49         //create renderer
50         var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, "SUB_REGION");
51 
52         //add symbol for each possible value
53         renderer.addValue("Pacific", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])));
54         renderer.addValue("Mtn", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5])));
55         renderer.addValue("N Eng", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5])));
56         renderer.addValue("S Atl", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,255,0.5])));
57         renderer.addValue("Mid Atl", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,255,0.75])));
58         renderer.addValue("E N Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,255,0.5])));
59         renderer.addValue("W N Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5])));
60         renderer.addValue("E S Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([127,127,127,0.5])));
61         renderer.addValue("W S Cen", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,0,0.5]))); 
62         map.graphics.setRenderer(renderer);
63 
64         dojo.forEach(featureSet.features, function(feature) {
65           map.graphics.add(feature);
66         });
67       }
68 
69     </script>
70 
71   </head>
72   <body>
73     <div id="map" class="tundra" style="800px; height:400px; border:1px solid #000;"></div>
74   </body>
75 </html>