技术专栏

gis培训

④JavaScript API数据可视化:颜色符号化(译)

作者:李锐(译) 邮箱:lr@lreis.ac.cn 发布时间:2014-12-30 09:55:02 阅读(1900)

ArcGISAPI for JavaScript数据可视化_颜色符号化()

原作者:Jerome Yang(ArcGISResources)

空间数据可视化时,用不同的颜色映射数据值是一种很流行的方法。制图人员称之为“分级统计”。如果你搜索“美国人口地图”的图片,90%的搜索结果都会是分级统计图。在本文中,我们将一起探索这个著名的制图技术并学习使用JS API来创建此类地图应用。

1.       开始(Sample)

用不同的颜色映射数据值(分级统计图)从来不是一件容易的事。但在JSAPI中仅需要使用少量的几行代码。我们将在后面的文章中深入介绍。现在我们先一起看看简单例子。

首先我们需要一个网络地图应用。如果你不知道怎么做可以看看本系列的第一篇文章。

renderer中,你可以使用.setColorInfo方法来设置colorInfo属性。只需要提供一个字段名称、最小和最大值以及一个颜色数组:

renderer.setColorInfo({
  field: "Percent_Uninsured",
  maxDataValue: 42,
  minDataValue: 6,
  colors: [
    new Color("#fffcd4"), new Color("#e0b2c1"), new Color("#c168ad"),
    new Color("#7b3578"), new Color("#350242")
  ]
});

根据上面代码指定的五个颜色将会创建一个平滑的渐变色。颜色由浅到深分别表示数值从最低(6)到最高(42)。这是制作分级统计图的一种常规方法。在后文中你还将会看到其他几种较好的设计。

2.       进阶#1:渐变色(Sample)

在前面的例子中,指定的minDataValuemaxDataValue正好是数据中的最小值和最大值——但他们其实也可以是其他任何值。实际上最小值和最大值通常会是其他极值。正如你所看到的,例子中大部分的值其实是小于24的他们的颜色也很相近。只有少量的区域显示明显的紫色。我们突出的是一些高值区域而不是整体的情况。

因此我们强烈讲义将minDataValuemaxDataValue设置在大多数值分布的一个较窄的范围里。

为了实现这一点,你必须对自己的数据有清晰的理解。在本文例子中,我们知道在美国的3143个县的平均无保险比例在15,标准差是5.因此我们将minDataValuemaxDataValue分别设置为525,将区域设为两倍的标准差。

renderer.setColorInfo({
  field: "Percent_Uninsured",
  maxDataValue: 25,
  minDataValue: 5,
  colors: [
    new Color("#fffcd4"), new Color("#e0b2c1"), new Color("#c168ad"),
    new Color("#7b3578"), new Color("#350242")
  ]
});

相比上一个例子,这个应用展示了更多的紫色。平均值附近的数值表现的更明显,而极值则没有在渐变色中定义。

3.       进阶#2:在渐变色中指定节点(Sample)

正如上文提到所述,颜色数值被均匀划分创建一个渐变色,但有时候我们希望能给一些数值指定颜色。因此你可以指定一些节点(stops)而不是使用colorInfo中的colors。每个节点就是一个包含一个数值和一个颜色的对象(object)

renderer.setColorInfo({
  field: "Percent_Uninsured",
  stops: [
    { value: 6, color: new Color("#570959") },
    { value: 15.4, color: new Color("#ffffff") },
    { value: 42, color: new Color("#a53217") }
  ]
});

当你希望在地图上突出显示一些指定数值的时候这个是非常有用的。在示例代码中,我们知道国家无保险公民的平均水平是15.4%。如果我们希望给这个值指定一个中性颜色,并将其他数值均匀显示。那么使用colorInfo中的stops属性可以让我们实现这个目的,并且会在图例中显示这个重要值。

4.       备选方案:数据分类(Sample)

还有一种创建分级地图(choropleth maps)的方法.如果你想表达一个简单的意思,比如“在某个值以上有什么”,“在某个值以下有什么”,你可以使用ClassBreaksRenderer将数据划分为几个类别。在下面的示例代码中我们将数据划分为三类:高于国家平均水平、国家平均水平和低于国家平均水平。当主要显示每个要素属于哪一类的时候我们使用这个渲染器(renderer)

基于你希望在地图中展示的字段,你可以创建一个分类渲染器然后进行分层。每一个分层你可以设置它的最小值、最大值、符号和标签:

var renderer = new ClassBreaksRenderer(null, "Percent_Uninsured");
 
var outline = new SimpleLineSymbol();
outline.setColor(new Color("#999999"));
outline.setWidth(0.5);
 
renderer.addBreak({
  label: "< 2.5% below national average",
  minValue: 6,
  maxValue: 12.9,
  symbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline, new Color("#eecec9"))
});
renderer.addBreak( ... );
...

文章预告

我们仍然有很多的可视化方法可以使用。在本系列后续的文章中,我们将继续学习如何制作和使用比例符号化、密度图和分类符号化等。

作者:李锐(译) 邮箱:lr@lreis.ac.cn

HiGIS技术交流QQ群:336076300

关键词:js api,arcgis,esri,webgis,入门教程,符号化,渐变色

中科地理信息系统培训中心-原创文章
转载请注明出处:www.higis.cn/Tech/tech/tId/87

创新地理知识,共享地理价值

http://www.higis.cn

中科地理信息系统培训中心

关于我们

gis培训

苏州高新区中科地理信息系统培训中心是“国家专业技术人员继续教育基地”指定培训点,是3S方向唯一指定的培训点。同时也是国内唯一获得Esri授权的ArcGIS专业培训与认证机构,为广大用户提供ArcGIS培训、开发和咨询服务,中心已经为中国用户服务20年...详细情况...

联系方式

Email:actc@lreis.ac.cn
苏州总部电话: 0512-68076858
        0512-68075672
北京分部电话: 010-64855687
苏州总部地址:苏州市高新区科灵路78号苏高新软件园5号楼3层
北京分部地址:北京市朝阳区大屯路甲11号中科院地理所2406

顶部 返回
地理信息系统国际培训中心