描述

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

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

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

  1.   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.     "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4.  <html lang="en">
  5.    <head>
  6.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.      <meta http-equiv="X-UA-Compatible" content="IE=7" />
  8.      <title>Class Breaks Renderer</title>
  9.  
  10.      <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
  11.          <script type="text/javascript">var djConfig = {parseOnLoad: true }</script>
  12.      <script type="text/javascript" src= "http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
  13.  
  14.      <script type="text/javascript" charset="utf-8">
  15.        dojo.require("esri.map");
  16.        dojo.require("esri.tasks.query");
  17.  
  18.        var map;
  19.        var stateName = "Florida";
  20.        var attributeField = "POP1990";
  21.  
  22.        function init() {
  23.          map = new esri.Map("map", {
  24.            extent: new esri.geometry.Extent({xmin:-88.06640625,ymin:24.45556640625,xmax:-79.27734375,ymax:31.04736328125,spatialReference:{wkid:4326}}),
  25.            slider: false
  26.          });
  27.          dojo.connect(map, "onLoad", doQuery);
  28.          map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
  29.        }
  30.  
  31.        //查询所有国家 in Kansas
  32.        function doQuery() {
  33.          var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
  34.          var query = new esri.tasks.Query();
  35.          query.where = "STATE_NAME = '" + stateName + "'";
  36.          query.outFields = [attributeField];
  37.          query.returnGeometry = true;
  38.          queryTask.execute(query, addFeatureSetToMap);
  39.        }
  40.  
  41.        //添加国家到地图并且应用渲染
  42.        function addFeatureSetToMap(featureSet) {
  43.            var features = featureSet.features;
  44.  
  45.            var min = max = parseFloat(features[0].attributes[attributeField]);
  46.  
  47.            //找到Florida 城市中的最少人数和最多人数
  48.  
  49.            dojo.forEach(features,function(feature) {
  50.                min = Math.min(min,feature.attributes[attributeField]);
  51.                max = Math.max(max,feature.attributes[attributeField]);
  52.  
  53.            }
  54.  
  55.            );
  56.  
  57.            var numRanges = 7;
  58.            var breaks = (max-min) / numRanges;
  59.  
  60.            var outline = new esri.symbol.SimpleLineSymbol().setWidth(1);//轮廓
  61.            var fillColor = new dojo.Color([240,150,240,0.75]);
  62.            var defaultSymbol = new esri.symbol.SimpleMarkerSymbol().setSize(1).setOutline(outline);
  63.  
  64.            var renderer = new esri.renderer.ClassBreaksRenderer(defaultSymbol,attributeField);
  65.  
  66.            for (var i=0;i<numRanges;i++) {
  67.                renderer.addBreak(parseFloat(min + (i*breaks)),
  68.                    parseFloat(min + ((i+1)*breaks)),
  69.                    new esri.symbol.SimpleMarkerSymbol().setSize((i+1)*6).setColor(fillColor).setOutline(outline)); 
  70.  
  71.            }
  72.  
  73.            map.graphics.setRenderer(renderer);
  74.  
  75.            //添加 features 到地图
  76.            dojo.forEach(featureSet.features,function(feature) {
  77.                map.graphics.add(feature);
  78.  
  79.            });
  80.        }
  81.  
  82.        dojo.addOnLoad(init);
  83.      </script>
  84.  
  85.    </head>
  86.    <body>
  87.      <div id="map" class="tundra" style="width:800px; height:400px; border:1px solid #000;"></div>
  88.    </body>
  89.  </html>
  90.

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. array_key_exists（）

    array_key_exists()方法用于检查键名是否存在数组中. <?php $a=array("name"=>"XC90","tex ...

  2. [AHOI2013]差异 后缀自动机_Parent树

    题中要求: $\sum_{1\leqslant i < j \leq n } Len(T_{i}) +Len(T_{j})-2LCP(T_{i},T_{j})$ 公式左边的部分很好求,是一个常量 ...

  3. dedecms如何把时间戳转换成正常时间格式

    如果在datalist 可以用{dede:field.shijian function=strftime('%Y-%m-%d',@me)/} 如果不在datalist中调用的话,单独调用用<?p ...

  4. 微信小程序 刷新页面

    一 , 当前页面刷新 第一种方式: //pages 获取到当前页码数 然后执行当前页的onLoad const pages = getCurrentPages() ] perpage.onLoad() ...

  5. Oralce 视图 view

    Oracle视图 Oracle的数据库对象分为五种:表,视图,序列,索引和同义词. 视图是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以对表里面的数据进行查询和修改.视图基于的表称为基表 ...

  6. (50)与magento集成

    我对接的是 odoo8 和 magento1.9.x 准备工作: l  服务器 装上mangento 组件 : $  pip install magento 装上 requests 组件:$ pip ...

  7. caioj 1114 树形动态规划（TreeDP）3.0：多叉苹果树【scy改编ural1018二叉苹果树】

    一波树上背包秒杀-- #include<cstdio> #include<cstring> #include<algorithm> #include<vect ...

  8. Docker之Mysql安装及配置

    原文:Docker之Mysql安装及配置 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zhaobw831/article/details/8014 ...

  9. Visual Studio 2013 无法创建MVC项目,系统找不到指定的文件.(Exception from HRESULT:08x0070002)

    在Visual Studio 2013中创建新MVC项目,(PS:现在创建个MVC项目,差点都找不到在哪,汗!-) 确定后提示,系统找不到指定的文件.(Exception from HRESULT:0 ...

  10. js html 事件冒泡

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...