描述

本例使用一个分级渲染通过人口密度用符号表示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. CF 286(div 2) B Mr. Kitayuta's Colorful Graph【传递闭包】

    解题思路:给出n个点,m条边(即题目中所说的两点之间相连的颜色) 询问任意两点之间由多少种不同的颜色连接 最开始想的时候可以用传递闭包或者并查集来做,可是并查集现在还不会做,就说下用传递闭包来做的这种 ...

  2. js语法之条件语句

    一.比较操作符 比较操作符包括:等于(==).大于(>).大于等于(>=).小于(<).小于等于(<=).

  3. chrome 获取移动端页面元素信息

    一:背景在使用appium进行app端自动化测试的时候,一般使用的是uiautomatorviewer来给页面元素做定位.但如果遇到页面元素类型是webview的时候,则只能定位整个页面,而不能更进一 ...

  4. Python3+Gurobi使用教程(一)

    Gurobi使用教程 1.Gurobi使用的一般框架 from gurobipy import * try: m=Model('modelname') except GurobiError: prin ...

  5. tree编译

    没有tree命令,就需要下载源代码 [root@fyc tree-1.7.0]#cd /opt/src [root@fyc tree-1.7.0]# wget ftp://mama.indstate. ...

  6. Noip-pj2018游记

    2019/1/3 搬运于我的luogu博客 2018/10/9 没有去试机,在学校搞文化课去了.准考证是让学校的信息课老师帮我拿的 回家后随手A了P1198 P3870 P2846 P1531 感觉真 ...

  7. 国庆 day 7 下午

    思路:见博客. #include<iostream> #include<cstdio> #include<cstring> #include<algorith ...

  8. How to customize Skin Gallery - Remove / rename skins and groups

    1. REMOVE (HIDE) A SPECIFIC SKIN Traverse through the gallery group collection, then through its gal ...

  9. Qt之图形（绘制漂亮的圆弧）

    简述 综合前面对二维绘图的介绍,想必我们对一些基本绘图有了深入的了解,下面我们来实现一些漂亮的图形绘制. 简述 圆形 效果 源码 弧形 效果 源码 文本 效果 源码 旋转 效果 源码 圆形 经常地,我 ...

  10. 逆向project第003篇：跨越CM4验证机制的鸿沟（上）

    一.前言 <冠军足球经理>系列作为一款拟真度极高的足球经营类游戏.赢得过无数赞誉,而CM4可以说是这个传奇的起点. 可是在游戏安装过程中.当用户输入完序列号之后.程序并不会对用户的输入进行 ...