ArcGIS API for JS之基础篇（三）可视化

ArcGIS API for JS之基础篇（三）可视化

终于到家了，可以接着写有意思的东西。如何把数据简洁美观易读的呈现出来，数据可视化内容小结可以给你们惊喜。这篇文章跨域了美赛+新年，它非常有魅力，希望大家可以多多实践！

Demo

首先看一个显示井和地震之间关系的动图，把井和地震的数据同时渲染在视图上，我们可以看到地震频发与挖井是否相关。点击井和地震的符号可以显示他们的详细信息，点击地震弹出窗口的nearby well可以显示以该震源为中心10km内的井的数量。图中可见，根据地震级数的不同，从白到红显示不同的颜色，颜色越深，地震级数越大。

我们都知道，地图是由数据组成，原始的数据表格没人愿意看。一图胜千言，我们通过可视化数据可以清晰明了的表达我们需要的信息。如何有效的渲染数据非常重要，今天介绍如何通过渲染器中渲染数据。

基础知识

Renderer

Renderer对象包含图层的绘图信息，并且是所有渲染器的基类。其子类有 ClassBreaksRenderer、SimpleRenderer、UniqueValueRenderer。根据可视化的类型选择不同的渲染器。主要讨论SimpleRenderer。通常是把渲染器添加到对应的图层，再把图层添加到地图。

声明一个渲染器，type属性值有simple、unique-value、class-breaks。三种属性值代表了三种渲染器。

类型定义

（1）BoundedMinMax
定义具有最小和最大边界的大小可视变量。当具有此规范的对象应用于渲染器的visualVariables属性时，在最小值和最大值之间线性插值。

属性：

type必须是size。

field用于确定每个要素大小的数据值的来源。

normalizationField用于标准化数据的数字属性字段的名称field。如果使用这个字段，那么在maxDataValue和minDataValue中的值应该被标准化为百分比或比率。

axis仅适用于在SceneView中工作。定义在使用ObjectSymbol3DLayer呈现要素时应将大小可视变量应用到的轴。其值有width|height|depth|width-and-depth|all

useSymbolValue是否应用symbolLayer中设置的高度、宽度、深度值。

（2）ColorVisualVariable
颜色可视化

属性：

type必须是color

stops构造颜色渐变

（3）OpacityVisualVariable
不透明度可视化

属性：

type必须是opacity。

stops构造不透明度渐变。

（4）RealWorldSize
定义一个大小可视变量，其中数据值被解释为基于给定单位的实际大小。然后根据真实世界的测量值来确定功能的大小，而不是专题值和屏幕单位

属性：

type必须是size

valueRepresentation 指定在映射真实世界大小时如何应用数据值。

axis仅适用于在SceneView中工作。定义在使用ObjectSymbol3DLayer呈现要素时应将大小可视变量应用到的轴。其值同上。

（5）RotationVisualVariable
如何呈现特征标记符号或文字符号在MapView或3D对象符号图层在SceneView的旋转。

属性：

type必须是rotation

SimpleRenderer

SimpleRenderer使用一个Symbol呈现一个图层中的所有要素。这个渲染器可以用来简单地可视化地理特征的位置,也可以通过 visual variables完成主题可视化数值数据属性。visual variables定义数字数据的数据驱动可视化参数。它们允许您轻松地将颜色、大小和/或者不透明度的连续斜坡映射到图层数字属性字段之一的最小和最大数据值。

属性

（1）label
这个渲染器的标签。它表示了给定symbol在现实世界中代表的特征。使用visualVariables时，这个文本不会显示。渲染器包含visualVariables时，您应该在每个可视变量上的legendOptions中设置title属性以描述可视化。

（2）symbol
如何可视化图层中所有要素。

（3）type
对于SimpleRenderer，此值始终为simple。

（4）visualVariables
可视变量定义数据驱动的数字数据地理可视化参数。它们允许您轻松将颜色，大小，不透明度和或旋转的连续斜坡映射到图层数字属性字段之一的最小和最大数据值。

使用方式：专题图和映射真实世界大小。

在renderer的类型定义中表示。

Symbol

以便渲染器知道如何处理可视变量。symbol是所有符号的基类，其子类有： FillSymbol，LineSymbol，MarkerSymbol，Symbol3D，TextSymbol，WebStyleSymbo。symbol将点，线，多边形和网格几何图形表示为View中的矢量图形。它们可以设置在单独的图形上，用于数量较少的情况，主要用来定义图形的外观例如填充面的颜色、边框的宽度以及透明度等。也可以应用于FeatureLayer的渲染器中。

（1）选择符号类型取决于以下几点：

呈现符号的视图类型-MapView或SceneView

要素的几何类型

可视化的目的和背景

（2）根据视图类型选择

（3）根据几何类型选择

Mapview：

Sceneview：

属性

type
表示symbol的类型，属性值如下：

simple-marker | picture-marker | simple-line | cartographic-line-symbol | simple-fill | picture-fill | text | shield-label-symbol | point-3d | line-3d | polygon-3d | mesh-3d | label-3d

其中simple-marker表示SimpleMarkerSymbol；point-3d表示PointSymbol3D以此类推。以PointSymbol3D为例。

不同的type属性值表示不同的symbol类型，在不同的symbol中设置其表达方式

PointSymbol3D

PointSymbol3D是在Sceneview中渲染点图形。PointSymbol3D必须至少包含一个符号图层才能在视图中呈现。根据不同的情况选择不同的符号图层。

属性

（1）type
对于PointSymbol3D，类型始终是point-3d。

（2）symbolLayers
用于可视化图形或特征的Symbol3DLayer对象的集合。

（3）verticalOffset
将符号沿垂直世界轴移动给定高度。

Symbol3DLayer

Symbol3DLayer用于定义用3Dsymbol渲染的点，折线，多边形和网格几何体的可视化。

属性

（1）type
符号图层类型

属性值有：icon|object|line|path|fill|extrusion|text