ArcGIS api for javascript——渲染-计算相等间隔分级

描述

本例展示了如何配置分级渲染使用一个相等间隔分类。在这个分类类型中，断点被设置为相等的距离。

可以手工添加相等距离的断点；然而，如果数据被修改了，那些断点就会是不合理的。本例自动地计算断点，因此相同的代码可以用于不同的数据集。

在本例中，断点用相同颜色的逐渐增大的圆符号。如果想要应用某种颜色渐变到断点，需要手工重定义一个颜色数组，然后在循环中给断点加入颜色。

 1  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2    "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html lang="en">
 5   <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 7     <meta http-equiv="X-UA-Compatible" content="IE=7" />
 8     <title>Class Breaks Renderer</title>
 9 
10     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
11         <script type="text/javascript">var djConfig = {parseOnLoad: true }</script>
12     <script type="text/javascript" src= "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
13 
14     <script type="text/javascript" charset="utf-8">
15       dojo.require("esri.map");
16       dojo.require("esri.tasks.query");
17 
18       var map;
19       var stateName = "Florida";
20       var attributeField = "POP1990";
21 
22       function init() {
23         map = new esri.Map("map", {
24           extent: new esri.geometry.Extent({xmin:-88.06640625,ymin:24.45556640625,xmax:-79.27734375,ymax:31.04736328125,spatialReference:{wkid:4326}}),
25           slider: false
26         });
27         dojo.connect(map, "onLoad", doQuery);
28         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
29       }
30 
31       //查询所有国家 in Kansas
32       function doQuery() {
33         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
34         var query = new esri.tasks.Query();
35         query.where = "STATE_NAME = '" + stateName + "'";
36         query.outFields = [attributeField];
37         query.returnGeometry = true;
38         queryTask.execute(query, addFeatureSetToMap);
39       }
40 
41       //添加国家到地图并且应用渲染
42       function addFeatureSetToMap(featureSet) {
43           var features = featureSet.features;
44         
45           var min = max = parseFloat(features[0].attributes[attributeField]);
46           
47           //找到Florida 城市中的最少人数和最多人数
48           
49           dojo.forEach(features,function(feature) {
50               min = Math.min(min,feature.attributes[attributeField]);
51               max = Math.max(max,feature.attributes[attributeField]);
52           
53           
54           }
55           
56           );
57           
58           var numRanges = 7;
59           var breaks = (max-min) / numRanges;
60           
61           var outline = new esri.symbol.SimpleLineSymbol().setWidth(1);//轮廓
62           var fillColor = new dojo.Color([240,150,240,0.75]);
63           var defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setSize(1).setOutline(outline);
64           
65           var renderer = new esri.renderer.ClassBreaksRenderer(defaultSymbol,attributeField);
66           
67           for (var i=0;i<numRanges;i++) {
68               renderer.addBreak(parseFloat(min + (i*breaks)),
69                   parseFloat(min + ((i+1)*breaks)),
70                   new esri.symbol.SimpleMarkerSymbol().setSize((i+1)*6).setColor(fillColor).setOutline(outline)); 
71               
72           }
73           
74           map.graphics.setRenderer(renderer);
75           
76           //添加 features 到地图
77           dojo.forEach(featureSet.features,function(feature) {
78               map.graphics.add(feature);
79           
80           });
81       }
82 
83       dojo.addOnLoad(init);
84     </script>
85 
86   </head>
87   <body>
88     <div id="map" class="tundra" style="800px; height:400px; border:1px solid #000;"></div>
89   </body>
90 </html>
91