• 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  
  • 相关阅读:
    部分类Partial
    Ajax之XMLHttpRequest
    C#结构(Struct)
    sql数据管理语句
    mysql基本语句
    bootstrap插件-滚动监听
    一轮项目学习总结
    js滚动监听
    Ajax
    各框架、插件记录
  • 原文地址:https://www.cnblogs.com/xiaotian-222/p/6548281.html
Copyright © 2020-2023  润新知