描述

本例展示了如何配置分级渲染使用一个相等间隔分类。在这个分类类型中，断点被设置为相等的距离。

可以手工添加相等距离的断点；然而，如果数据被修改了，那些断点就会是不合理的。本例自动地计算断点，因此相同的代码可以用于不同的数据集。

在本例中，断点用相同颜色的逐渐增大的圆符号。如果想要应用某种颜色渐变到断点，需要手工重定义一个颜色数组，然后在循环中给断点加入颜色。

  <!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;

       var stateName = "Florida";

       var attributeField = "POP1990";

       function init() {

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

           extent: new esri.geometry.Extent({xmin:-88.06640625,ymin:24.45556640625,xmax:-79.27734375,ymax:31.04736328125,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() {

         var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

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

         query.where = "STATE_NAME = '" + stateName + "'";

         query.outFields = [attributeField];

         query.returnGeometry = true;

         queryTask.execute(query, addFeatureSetToMap);

       }

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

       function addFeatureSetToMap(featureSet) {

           var features = featureSet.features;

           var min = max = parseFloat(features[0].attributes[attributeField]);

           //找到Florida 城市中的最少人数和最多人数

           dojo.forEach(features,function(feature) {

               min = Math.min(min,feature.attributes[attributeField]);

               max = Math.max(max,feature.attributes[attributeField]);

           }

           );

           var numRanges = 7;

           var breaks = (max-min) / numRanges;

           var outline = new esri.symbol.SimpleLineSymbol().setWidth(1);//轮廓

           var fillColor = new dojo.Color([240,150,240,0.75]);

           var defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setSize(1).setOutline(outline);

           var renderer = new esri.renderer.ClassBreaksRenderer(defaultSymbol,attributeField);

           for (var i=0;i<numRanges;i++) {

               renderer.addBreak(parseFloat(min + (i*breaks)),

                   parseFloat(min + ((i+1)*breaks)),

                   new esri.symbol.SimpleMarkerSymbol().setSize((i+1)*6).setColor(fillColor).setOutline(outline)); 

           }

           map.graphics.setRenderer(renderer);

           //添加 features 到地图

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

               map.graphics.add(feature);

           });

       }

       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——渲染-使用分级渲染

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

  2. ArcGIS api for javascript——渲染-使用唯一值渲染

    描述 本例使用唯一值渲染器来作为美国的符号.每个州有一个字符串属性"SUB_REGION"表示它的国家的地区.UniqueValueRenderer.addValue()方法被用来 ...

  3. ArcGIS API for JavaScript介绍

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

  4. ArcGIS API for Javascript配置

    1.去官网下载最新版: ArcGIS API for JavaScript 3.9 API 参考文档:https://developers.arcgis.com/javascr 智能提示下载:http ...

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

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

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

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

  7. ArcGIS API for JavaScript与 npm

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

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

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

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

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

随机推荐

  1. RocketMQ学习笔记（6）----RocketMQ的Client的使用 Producer/Consumer

    1.  添加依赖 pom.xml如下: <dependency> <groupId>org.apache.rocketmq</groupId> <artifa ...

  2. Acme Corporation UVA - 11613 费用流

    Code: #include<cstdio> #include<cstring> #include<vector> #include<queue> #i ...

  3. 织梦dedecms支持flash的flv文件播放功能代码

    1.打开/include/FCKeditor/editor/dialog/dede_media.htm if(playtype=="rm"|| (playtype=="- ...

  4. BZOJ 4453 cys就是要拿英魂！（后缀数组+单调栈+平衡树）

    一开始的时候感觉就是一个主席树裸题. 然后发现自己错了. 首先建出后缀数组. 设\(i<j\) 如果\(rk[i]>rk[j]\)显然i更优. 如果\(rk[i]<rk[j]\)不一 ...

  5. Python格式化字符串、占位符、合并数组

    合并数组 参考链接:https://www.cnblogs.com/chaihy/p/7243143.html >>> a=[2] >>> b=[3] >&g ...

  6. Docker搭建MySQL的PXC集群

    原文:Docker搭建MySQL的PXC集群 一.简介 PXC属于一套近乎完美的mysql高可用集群解决方案,相比那些比较传统的基于主从复制模式的集群架构MHA和MM+keepalived,galer ...

  7. 【Henu ACM Round#24 A】k-String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果是一个k-string的话. 考虑最后的串假设形式为sss..ss(k个s) 则s中出现的字母,整个串中最后出现的次数肯定为k的 ...

  8. 【codeforces 816B】Karen and Coffee

    [题目链接]:http://codeforces.com/contest/816/problem/B [题意] 给你很多个区间[l,r]; 1<=l<=r<=2e5 一个数字如果被k ...

  9. jquery IE7 下报错：SCRIPT257: 由于出现错误 80020101 而导致此项操作无法完成

        非IE(内核)浏览器运行正常,在IE中运行异常,一般考虑为js中多了符号.     常见的有:         1.上面的html注释"<!-- -->",这种 ...

  10. Regular Expressions Syntax

    https://support.syslogwatcher.com/support/solutions/articles/8000033627-regular-expressions-syntax