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="800px; height:400px; border:1px solid #000;"></div>
73   </body>
74 </html>
75  
原文地址:https://www.cnblogs.com/xiaotian-222/p/6548281.html