描述

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

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

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

  <!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. git pull 失败 ,提示：fatal: refusing to merge unrelated histories

    首次 git pull 时失败,并提示:fatal: refusing to merge unrelated histories 在使用git pull 命令时,添加一个可选项 git pull or ...

  2. java爬虫的selenium基础使用

    实用博客  selenium java教程 具体项目运用 项目背景:从西安市人民政府网站上获取到县区新闻,从下图可以看出“区县热点”是需要在页面中进行点击的,这里页面使用的是javascript的函数 ...

  3. 在vue组件中style scoped中遇到的坑

    在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...

  4. xml中单词下面有提示下划线

    xml中单词下面有提示下划线,表示单词拼写错误或者大小写错误

  5. How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

    个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...

  6. 紫书 例题 11-2 UVa 1395（最大边减最小边最小的生成树）

    思路:枚举所有可能的情况. 枚举最小边, 然后不断加边, 直到联通后, 这个时候有一个生成树.这个时候,在目前这个最小边的情况可以不往后枚举了, 可以直接更新答案后break. 因为题目求最大边减最小 ...

  7. JAVA Web项目获取src和WebContent目录下的配置文件

    一,获取src下面的配置文件信息 1,结构图如下: package com.binp.properties; import java.io.FileInputStream; import java.i ...

  8. 仿百度排列图片预览插件-Simple Lightbox

    很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...

  9. enterprise architect (EA) 源码生成UML类图，帮助理解项目工程

    用VS看大型工程代码,尤其是很多层类的,很容易头晕,即便是装了visual assist 插件.用VS生成类图吧,只能生成一堆框,只有一些小的类关系有箭头表示.远远不能满足要求.下面介绍建模工具EA来 ...

  10. securefx连接linux后文件夹中文乱码问题解决

    首先在选项中设置字符编码为UTF-8 然后在全局选项中找到Securefx的配置文件 进入到该目录中,选择“Sessions”: 在“Sessions”中找到链接地址的ini文件,并用文本编辑器打开: ...