ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——③符号和渲染器

ArcGIS API For JS官方文档解析目录

Symbolizing graphics with renderers

    Symbol定义了graphic（图形）的外观，包括填充颜色或图案、边框宽度和透明度。ArcGIS API for JavaScript包含许多symbol类，每个类允许您以一种独特的方式指定。每个symbol类性也是特定于geometry类型的，例如，point、line或者polygon。

    render定义了一组symbol，这些symbol将用于图层中的graphic。您可以使用renderer来根据特定属性使用不同颜色或大小进行符号化。

一、创建Symbol

    下表列出了可用的symbol和运用它们的geometry

    ArcGIS Symbol Playground

    ArcGIS Symbol Playground示例提供了一个探索API的symbol功能的地方。在这里，您可用尝试新特性，定制它们，并将生成的代码复制到您自己的应用程序中。此示例提哦概念股了一个起点，以便能够尽快使用这些功能。

    它包含symbols，例如，SimpleMarkerSymbol、SimpleLineSymbol、SimpleFillSymbol\cartographicLineSymbol、PictureMarkerSymbol、PictureFillSymbol和TextSymbol。除了提供一个易于使用的UI来修改属性外，PlayGround还显示了这些symbol。一旦修改后，symbol将被更新，同时更新示例代码，以显示代码中显示的内容。

    请访问每个类的文档，了解每个symbol类型的详细信息和代码示例。注意，每个symbol类型都有一个构造函数，该构造函数接受输入JavaScript Object Notation（JSON）对象。这个JSON对象可用于创建指定类型的新symbol。在下一节中，我们将介绍如何使用JSON创建新的PictureMarkerSymbol。

    创建Marker Symbols

    ArcGIS.com 的地图查看器提供了一组很好的marker symbol集合，这些symbol可用于在地图上符号化。单击这里可以查看一个示例应用程序，该应用程序允许您选择一个symbol并生成绘制symbol所需的代码。

    要使用此示例，只需单击一个符号并复制生成的代码，以便在应用程序中使用。

    对于picture marker symbol，应用程序提供两个生成图像的选项。您可以直接通过URL参考图像，或者您可以嵌入图像的字符串表示（示例应用程序中的base 64选项）。当使用后一个选项时，图像存储在文档中，而不是作为外部资源存储，因此不需要发出http请求来显示图像。一些浏览器，特别是8版本之前IE浏览器，不支持使用base-64数据的图像URL。

二、创建Renderer

    要使用renderer，需要创建它并定义所需的符号，然后将renderer应用于graphic layer：

map.graphics.setRenderer(renderer);

    ArcGIS API for JavaScript包含以下renderer:

• Simple Renderer
• Class Breaks Renderer
• Unique Value Renderer
• Dot Density Renderer
• Scale Dependent Renderer

    注意：如果您在feature layer中符号化graphic，则有一种额外的renderer类型：Temporal Render（时态渲染）。Temporal Render提供基于时间的渲染，如果您需要可视化历史或实时数据（如地震发生），则会非常有用。

    Simple Renderer

    Simple Renderer对每个graphic都使用相同的symbol。您所要做的就是指定renderer要使用的符号，然后将renderer应用到graphics layer。

// AMD
require([
  "esri/symbols/SimpleMarkerSymbol",
  "esri/renderers/SimpleRenderer",
  "dojo/_base/Color", ...
], function(SimpleMarkerSymbol, SimpleRenderer, Color, ...) {
  var symbol = new SimpleMarkerSymbol();
  symbol.style = SimpleMarkerSymbol.STYLE_SQUARE;
  symbol.setSize(8);
  symbol.setColor(new Color([255,255,0,0.5]));
  var renderer = new SimpleRenderer(symbol);
});

// legacy
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(8); symbol.setColor(new dojo.Color([255,255,0,0.5]));
var renderer = new esri.renderer.SimpleRenderer(symbol);

    Class breaks renderer

    class breaks renderer基于每个graphic的一些数值属性来符号化，具有类似属性值的graphic得到相同的颜色。”breaks”定义symbol在哪个值改变。

    例如，假设您有一个定义建筑年龄的属性的”buildings”图层，您想用绿色表示自2000年以来建造的建筑物，用黄色表示1980年至2000年建造的建筑物，用红色表示1980年之前建造的建筑物。这种场景就很适合用class breaks renderer

    要定义class breaks renderer，您必须添加breaks。每个break指定要使用的symbol以及将用于该symbol的最小值和最大值。下面的示例演示如何定义breaks：

// AMD
require([
  "esri/renderers/ClassBreaksRenderer",
  "esri/symbols/SimpleFillSymbol",
  "dojo/_base/Color", ...
], function(ClassBreaksRenderer, SimpleFillSymbol, Color, ...) {
  var renderer = new ClassBreaksRenderer(symbol, "BUILD_DATE");
  renderer.addBreak(-Infinity, 1980, new SimpleFillSymbol().setColor(new Color([255, 0, 0,0.5])));
  renderer.addBreak(1980, 2000, new SimpleFillSymbol().setColor(new Color([255, 255, 0,0.5])));
  renderer.addBreak(2000, Infinity, new SimpleFillSymbol().setColor(new Color([0,255,0,0.5])));
});

// legacy
var renderer = new esri.renderer.ClassBreaksRenderer(symbol, "BUILD_DATE");
renderer.addBreak(-Infinity,1980, new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 0, 0,0.5])));
renderer.addBreak(1980,2000,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255, 255, 0,0.5])));
renderer.addBreak(2000,Infinity,new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5])));

    请注意：如果break没有最大限制，则可以使用”Infinity”表示最大值。同样，如果没有最小值，则可以使用”-Infinity”。

    任何任何大于或等于最小值的值都将包含在break中，任何小于最大值的值都将包含在break中。因此，如果有两个breaks 0-10 和 10 – 20，则10将落在第二个break（10 – 20）中。这避免了在break之间造成重叠或断点的情况。

    您也可以在数学表达式上定义break。例如，您可以做一些基本的算术，以确保在给定输入数据的情况下，每一个break都有相等的距离（有时称为”equal interval” 分类）。  

var numRanges = 10;
var breaks = (max - min) / numRanges;

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)*5).setColor(colors[i]).setOutline(outline));
}

    虽然ArcGIS JavaScript API不能本地计算分类方案（如quantile break和natural break），但您可以通过ArcMap进行分类，然后在addBreak()方法中手动输入这些值。在ArcMap中进行数据分类也可以帮助您提取有用的RGB颜色。

    Unique value renderer

    unique value renderer符号化一组具有匹配属性的graphic，这在名字、字符串数据中最常见。例如，您可以使用unique value renderer符号化指定分区：黄色代表”住宅区“，紫色代表”工业区“，红色代表”商业区“等等。您也可以在编码值的数值字段上使用unique value renderer，或者在序号属性上使用。

    定义unique value renderer需要您指定一个默认的symbol和作为渲染根据的attribute，然后将值单独添加到renderer中，并指定每个值将如何被符号化：

// AMD
require([
  "esri/renderers/UniqueValueRenderer",
  "esri/symbols/SimpleFillSymbol",
  "dojo/_base/Color", ...
], function(UniqueValueRenderer, SimpleFillSymbol, Color, ...) {
  var renderer = new UniqueValueRenderer(defaultSymbol, "ZONING");
  renderer.addValue("Residential", new SimpleFillSymbol().setColor(new Color([255,255,0,0.5])));
  renderer.addValue("Industrial", new SimpleFillSymbol().setColor(new Color([128,0,128,0.5])));
  renderer.addValue("Commercial", new SimpleFillSymbol().setColor(new Color([255,0,0,0.5])));
});

// legacy
var renderer = new esri.renderer.UniqueValueRenderer(defaultSymbol, "ZONING");
renderer.addValue("Residential", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5])));
renderer.addValue("Industrial", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([128,0,128,0.5])));
renderer.addValue("Commercial", new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])));

    没有添加到addValue()方法中的值所对应的graphic将用默认symbol绘制。

转载自：https://blog.csdn.net/qq_35732147/article/details/79935627