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="width:800px; height:400px; border:1px solid #000;"></div> 89 </body> 90 </html> 91
