ArcGIS api for javascript——渲染-使用分级渲染
描述
本例使用一个分级渲染通过人口密度用符号表示Kansas。代码明确地增加类并为每一个定义颜色。使用ClassBreaksRenderer.addBreak()方法定义类，参数是在类中包含的最大值和最小值以及类使用的符号。
注意"Infinity"用于表示最后的中断没有上限。
1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 3 "http://www.w3.org/TR/html4/strict.dtd"> 4 5 <html lang="en"> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 9 <title>Class Breaks Renderer</title> 10 11 <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css"> 12 <script type="text/javascript">var djConfig = {parseOnLoad: true }</script> 13 <script type="text/javascript" src= "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script> 14 15 <script type="text/javascript" charset="utf-8"> 16 dojo.require("esri.map"); 17 dojo.require("esri.tasks.query"); 18 19 var map; 20 21 function init() { 22 map = new esri.Map("map", { 23 extent: new esri.geometry.Extent(-102.61, 36.2, -93.82, 40.5, new esri.SpatialReference({wkid: 4326})), 24 slider: false 25 }); 26 dojo.connect(map, "onLoad", doQuery); 27 map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer")); 28 } 29 30 //查询所有国家 in Kansas 31 function doQuery(map) { 32 var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3"); 33 var query = new esri.tasks.Query(); 34 query.outFields = ["*"]; 35 query.returnGeometry = true; 36 query.outSpatialReference = map.spatialReference; 37 query.where = "STATE_NAME = 'Kansas'"; 38 queryTask.execute(query, addFeatureSetToMap); 39 } 40 41 //添加国家到地图并且应用渲染 42 function addFeatureSetToMap(featureSet) { 43 var symbol = new esri.symbol.SimpleFillSymbol(); 44 symbol.setColor(new dojo.Color([150,150,150,0.5])); 45 46 //Add five breaks to the renderer. 47 //If you have ESRI's ArcMap available, this can be a good way to determine break values. 48 //You can also copy the RGB values from the color schemes ArcMap applies, or use colors 49 //from a site like www.colorbrewer.org 50 var renderer = new esri.renderer.ClassBreaksRenderer(symbol, "POP07_SQMI"); 51 renderer.addBreak(0,25,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([56, 168, 0,0.5]))); 52 renderer.addBreak(25,75,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([139, 209, 0,0.5]))); 53 renderer.addBreak(75,175,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]))); 54 renderer.addBreak(175,400,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,128,0,0.5]))); 55 renderer.addBreak(400,Infinity,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5]))); 56 57 map.graphics.setRenderer(renderer); 58 59 var infoTemplate = new esri.InfoTemplate("${NAME}","${'*'}"); 60 61 // 添加 features 到地图 62 dojo.forEach(featureSet.features, function(feature) { 63 map.graphics.add(feature.setInfoTemplate(infoTemplate)); 64 }); 65 } 66 67 dojo.addOnLoad(init); 68 </script> 69 70 </head> 71 <body> 72 <div id="map" class="tundra" style="width:800px; height:400px; border:1px solid #000;"></div> 73 </body> 74 </html> 75
