描述

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

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

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

  <!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. SpringMVC-注解映射器和适配器_20190323

    1 注解映射器和适配器 1.1 注解映射器spring3.1之前默认加载映射器是org.springframework.web.servlet.mvc.annotation.DefaultAnnota ...

  2. oracle11g-rac安装部署

    网上11g rac安装文档大多不详细,今天来一个详细的! 纯操作文档,不喜勿喷!! 环境: 系统:rhel5.5 oracle:11.2.03 双网卡 共享磁盘 ip地址和主机名规划: #节点1 主机 ...

  3. （2016北京集训十二）【xsy1542】疯狂求导

    题解: 这题看起来很难...但是实际上并没有想象中的那么难 第一眼看上去不会求导公式怎么办?不要紧,题目背景非常良心的给出了题目中的导数计算公式 求完导合并同类项很恶心怎么办?不要紧,样例解释说明了不 ...

  4. crontab执行脚本和手动执行脚本输出结果不一致的问题处理

    背景:huskiesir最近用公司给分配的账户写了脚本去检测某应用状态并发送到企业邮箱,写完脚本之后去执行了一下,发现效果还不错,在邮箱显示效果如下: 10.11.116.6  检查结果OK,检查时间 ...

  5. 【codeforces 257D】Sum

    [题目链接]:http://codeforces.com/problemset/problem/257/D [题意] 给你n个数字; 这n个数字组成的数组满足: a[i-1]<=a[i]< ...

  6. ajax异步刷新

    前台js <script type="text/javascript"> function getLands() { $.ajax({ url:"httpse ...

  7. Android ADB工具-截图和录制视频(五)

    Android ADB工具-截图和录制视频(五) 标签(空格分隔): Android ADB 7. 截图和录制视 命令 功能 adb shell screencap –p <path/file& ...

  8. Struts2学习（三）上传下载

    今天记录一下利用struts2实现上传下载,借此案例说明一下struts2的开发流程. 须要注意的是struts2版本号不同非常多地方的写法是不同的.本例使用struts2.3.15 .有差别的地方文 ...

  9. [Python]Use Flask-Admin with PostgreSQL

    This code recipe gives you an idea of how to use Flask-Admin with postgresql database. from flask im ...

  10. Asterisk[1]

    Asterisk[1]是一款GPLv2协议下的开源电话应用平台.简单来说,Asterisk是一个server应用.可以完毕发起电话呼叫.接受电话呼叫.对电话呼叫进行定制处理. 1.2.1 通道驱动 a ...