描述

本例使用一个分级渲染通过人口密度用符号表示Kansas。代码明确地增加类并为每一个定义颜色。使用ClassBreaksRenderer.addBreak()方法定义类，参数是在类中包含的最大值和最小值以及类使用的符号。

注意"Infinity"用于表示最后的中断没有上限。

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">

 <html lang="en">

   <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

     <title>Class Breaks Renderer</title>

     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">

         <script type="text/javascript">var djConfig = {parseOnLoad: true }</script>

     <script type="text/javascript" src= "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>

     <script type="text/javascript" charset="utf-8">

       dojo.require("esri.map");

       dojo.require("esri.tasks.query");

       var map;

       function init() {

         map = new esri.Map("map", {

           extent: new esri.geometry.Extent(-102.61, 36.2, -93.82, 40.5, new esri.SpatialReference({wkid: 4326})),

           slider: false

         });

         dojo.connect(map, "onLoad", doQuery);

         map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

       }

       //查询所有国家 in Kansas

       function doQuery(map) {

         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

         var query = new esri.tasks.Query();

         query.outFields = ["*"];

         query.returnGeometry = true;

         query.outSpatialReference = map.spatialReference;

         query.where = "STATE_NAME = 'Kansas'";

         queryTask.execute(query, addFeatureSetToMap);

       }

       //添加国家到地图并且应用渲染

       function addFeatureSetToMap(featureSet) {

         var symbol = new esri.symbol.SimpleFillSymbol();

         symbol.setColor(new dojo.Color([150,150,150,0.5]));

         //Add five breaks to the renderer.

         //If you have ESRI's ArcMap available, this can be a good way to determine break values.

         //You can also copy the RGB values from the color schemes ArcMap applies, or use colors

         //from a site like www.colorbrewer.org

         var renderer = new esri.renderer.ClassBreaksRenderer(symbol, "POP07_SQMI");

         renderer.addBreak(0,25,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([56, 168, 0,0.5])));

         renderer.addBreak(25,75,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([139, 209, 0,0.5])));

         renderer.addBreak(75,175,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5])));

         renderer.addBreak(175,400,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,128,0,0.5])));

         renderer.addBreak(400,Infinity,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])));

         map.graphics.setRenderer(renderer);

         var infoTemplate = new esri.InfoTemplate("${NAME}","${'*'}");

         // 添加 features 到地图

         dojo.forEach(featureSet.features, function(feature) {

           map.graphics.add(feature.setInfoTemplate(infoTemplate));

         });

       }

       dojo.addOnLoad(init);

     </script>

   </head>

   <body>

     <div id="map" class="tundra" style="width:800px; height:400px; border:1px solid #000;"></div>

   </body>

 </html>

ArcGIS api for javascript——渲染-使用分级渲染的更多相关文章

  1. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  2. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  3. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

  4. ArcGIS API for JavaScript与 npm

    在4.7版本中,不仅增加了WebGL的渲染支持(渲染前端速度加快,渲染量也加大).增强了ES6中的Promises语法支持,还支持了npm管理及webpack打包,实属喜讯. “意味着可以不经过esr ...

  5. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  6. 使用Arcgis Api for Javascript 调用 本地Portal发布的WebMap

    1.环境搭建 安装Arcgis Portal 10.4,Server 10.4,DataStore ,WebAdaptor for IIS,搭建arcgis api for javascript 4. ...

  7. 关于ArcGIS api for JavaScript的一些内容

    2018-3-19 ArcGIS api for JavaScript 在3.4之后就已经抛弃了过时的写法,采用了AMD的写法,AMD规范即异步模块加载机制,这种规范让JS就像其它面向对象语言(比如J ...

  8. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  9. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  10. ArcGIS API for JavaScript 4.0（一）

    原文:ArcGIS API for JavaScript 4.0(一) 最近ArcGIS推出了ArcGIS API for JavaScript 4.0,支持无插件3D显示,而且比较Unity和Sky ...

随机推荐

  1. 搭建python3环境

    将Python2.7通过控制面板卸载,然后从网站下载python的安装包,安装即可. 安装beatifulsoup4库.在命令行下, pip install beautifulsoup4 千万不能在p ...

  2. 结构化数据、半结构化数据、非结构化数据——Hadoop处理非结构化数据

    刚开始接触Hadoop ,指南中说Hadoop处理非结构化数据,学习数据库的时候,老师总提结构化数据,就是一张二维表,那非结构化数据是什么呢?难道是文本那样的文件?经过上网搜索,感觉这个帖子不错 网址 ...

  3. Python学习---Day96

    转载:http://www.cnblogs.com/wupeiqi/articles/6229292.html Scrapy Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可 ...

  4. js悬浮吸顶

    <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>吸顶和锚点链接</t ...

  5. python list set dict的简单应用示例

    list.count(x):返回指定元素x在列表中出现的次数 set(list):将list类型变量转换为set类型,去除重复值 dick:保存键值对 x=[1,2,2,3,3] s1=set(x) ...

  6. ASP.NET-使用事件监视诊断程序异常

    用windows自带的事件监视程序来监视网站的异常 来自为知笔记(Wiz)

  7. POJ——T 3041 Asteroids

    http://poj.org/problem?id=3041 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23565   ...

  8. Android-Universal-Image-Loader 的使用说明

    这个图片异步载入并缓存的类已经被非常多开发人员所使用,是最经常使用的几个开源库之中的一个,主流的应用,随便反编译几个火的项目,都能够见到它的身影. 但是有的人并不知道怎样去使用这库怎样进行配置,网上查 ...

  9. 编写SDR SDRAM页突发模式控制器的注意点-下篇

    本来是没打算写这些的,但是后面逐渐发现点问题,所以决定再写一个下篇来补充说明一下. 图一 细心的网友会发现上篇末尾的打印是有点问题的,因为我的数据产生器产生的是1-200,1-200,1-200,1- ...

  10. [luoguP4302] [SCOI2003] 字符串折叠 解题报告（区间DP）

    题目链接:https://www.luogu.org/problemnew/show/P4302 题解: 我们考虑折叠一个区间里的字符串,怎么样才是最优的 1.把这个区间分成几部分分别折叠 2.把这个 ...