描述

本例使用一个分级渲染通过人口密度用符号表示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. oracle11g文件系统库迁移到ASM库上面

    最近把oracle11g的文件系统库迁移到了asm库上面. 迁移过程大致如下: 最少停机方案: 实例joinpay02 | |数据库joinpay02 需要改动的文件: 数据文件 控制文件 redo文 ...

  2. Servlet中文乱码原因 解决 Get 和 Post 和客户端

    一.Get方式的中文乱码 1) 使用如下页面表单内容: <form action="http://127.0.0.1:8080/day07/params" method=&q ...

  3. h5 input失去焦点软键盘把页面顶起

    var broswer=localStorage.getItem('temp') //浏览器环境 var u = navigator.userAgent var isiOS = !!u.match(/ ...

  4. POJ 2607 Fire Station

    Fire Station Time Limit: 5000ms Memory Limit: 65536KB This problem will be judged on PKU. Original I ...

  5. Python学习笔记-练习编写ATM+购物车(购物商城)

    作业需求: 模拟实现一个ATM + 购物商城程序: 1.额度 15000或自定义 2.实现购物商城,买东西加入 购物车,调用信用卡接口结账 3.可以提现,手续费5% 4.支持多账户登录 5.支持账户间 ...

  6. mysql-基础和基本指令

    基础: 1.数据库模式:简单的说:就是一个数据库用户所拥有的数据库的对象.   比如scott用户建立了表,索引,视图,存储过程等对象,那么这些对象就构成了schema   scott .有时用作数据 ...

  7. 利用 border 实现的图片选区效果，只需一层图一蒙层

    <html> <style> #p { background: url("http://soso5.gtimg.cn/sosopic_j/0/436416703332 ...

  8. html+css实现选项卡功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. django 笔记16 文件上传笔记

    views.py文件 def upload_file(request): username = request.POST.get('username') fafafa = request.FILES. ...

  10. [USACO09JAN] 气象测量/气象牛The Baric Bovine 解题报告(DP)

    题目链接:https://www.luogu.org/problemnew/show/P2933 Description 为了研究农场的气候,Betsy帮助农夫John做了N(1 <= N &l ...