ClassBreaksRenderer

AMD: require(["geoscene/renderers/ClassBreaksRenderer"], (ClassBreaksRenderer) => { /* 代码 */ });
ESM: import ClassBreaksRenderer from "@geoscene/core/renderers/ClassBreaksRenderer";
类: geoscene/renderers/ClassBreaksRenderer
继承于: ClassBreaksRenderer Renderer Accessor
起始版本: GeoScene API for JavaScript 4.22

ClassBreaksRenderer 根据数值属性的值定义图层中每个要素的符号。符号是根据数据的类别或范围分配的。根据属性值所在的类,为每个类别特征指定一个符号。

支持的图层

ClassBreaksRenderer 只能用于为以下图层类型创建可视化效果:

必须指定一个数字的属性字段来定义类分隔符。还必须使用 addClassBreakInfo() 方法或者构造函数中的 classBreakInfos 属性定义每个分类及对应的符号。

在下面的示例中,使用 ClassBreaksRenderer 表示块组的 FeatureLayer。拥有大学学位的人口中少于 35% 的要素将以深绿色渲染。35% 到 50% 的人口拥有大学学位的要素使用淡绿色符号进行渲染。其他要素也根据感兴趣属性的值进行类似渲染。

renderer-classbreaks-basic

示例:
示例代码:
let renderer = new ClassBreaksRenderer({
  type: "class-breaks",
  // attribute of interest - Earthquake magnitude
  field: "MAGNITUDE"
});
// All features with magnitude between 0 - 4.0
renderer.addClassBreakInfo({
  minValue: 0,
  maxValue: 4.0,
  symbol: {
    type: "point-3d",  // 转换成 new PointSymbol3D()
    symbolLayers: [{
      type: "object",  // 转换成 new ObjectSymbol3DLayer()
      resource: { primitive: "cone" },
      material: { color: [0, 169, 230] },
      height: 200000,
      width: 50000
    }]
  }
});
// All features with magnitude between 4.1 - 7.0
renderer.addClassBreakInfo({
  minValue: 4.1,
  maxValue: 7.0,
  symbol: {
    type: "point-3d",  // 转换成 new PointSymbol3D()
    symbolLayers: [{
      type: "object",  // 转换成 new ObjectSymbol3DLayer()
      resource: { primitive: "cone" },
      material: { color: [230, 230, 0] },
      height: 800000,
      width: 90000
    }]
  }
});
// All features with magnitude between 7.1 - 10.0
renderer.addClassBreakInfo({
  minValue: 7.1,
  maxValue: 10.0,
  symbol: {
    type: "point-3d",  // 转换成 new PointSymbol3D()
    symbolLayers: [{
      type: "object",  // 转换成 new ObjectSymbol3DLayer()
      resource: { primitive: "cone" },
      material: { color: [230, 0, 0] },
      height: 3200000,
      width: 130000
    }]
  }
});

let layer = new FeatureLayer({
  url: "http://url.to.service",
  renderer: renderer
});

构造函数

new ClassBreaksRenderer(properties)
参数:
properties Object
optional

所有可传入构造函数的属性,请参见属性列表。

示例代码:
// 典型用法
let renderer = {
  type: "class-breaks",  // 转换成 new ClassBreaksRenderer()
  field: "fieldName",
  classBreakInfos: [ ... ]
};

属性列表

可以设置、检索或监听的属性。参见使用属性主题。
展示继承属性 隐藏继承属性
属性 类型 描述
AuthoringInfo更多信息

只包含在从在线地图生成的渲染器中。比如 sizeRendererCreator.createContinuousRenderer() 或 colorRendererCreator.createContinuousRenderer().

更多信息Renderer
FillSymbol|PolygonSymbol3D更多信息

使用刻度符号对多边形要素进行符号化时,请在此特性上设置 FillSymbol ,以便可视化每个要素的边界。

更多信息ClassBreaksRenderer
ClassBreakInfo[]更多信息

数组中的每个元素都是一个对象,用于提供有关与渲染器相关的分类信息。

更多信息ClassBreaksRenderer
String更多信息

类名。

更多信息Accessor
String更多信息

图例中用于描述指定默认符号的要素的标注。

更多信息ClassBreaksRenderer
Symbol更多信息

指定具有与给定分类不匹配值的特征的默认符号。

更多信息ClassBreaksRenderer
String更多信息

数字属性字段的名称,其数据根据 classBreakInfos 中定义的类确定每个类的符号。

更多信息ClassBreaksRenderer
Object更多信息

提供用于在图例中显示渲染器的选项的对象。

更多信息ClassBreaksRenderer
String更多信息

当 normalizationType 的值为 field ,此属性包含用于归一化的属性字段名。

更多信息ClassBreaksRenderer
Number更多信息

当 normalizationType 的值为 percent-of-total,此属性包含所有数据值的总计。

更多信息ClassBreaksRenderer
String更多信息

如何标准化。

更多信息ClassBreaksRenderer
String更多信息

渲染器类型。

更多信息ClassBreaksRenderer
String更多信息

遵循 Arcade 可视化配置文件 Arcade 表达式。

更多信息ClassBreaksRenderer
String更多信息

标识和描述 valueExpression  属性中定义的关联的 Arcade  的标题。

更多信息ClassBreaksRenderer
VisualVariable[]更多信息

 VisualVariable 对象数组。

更多信息ClassBreaksRenderer

属性详细说明

该元数据仅包含在从在线地图创建方法之一生成的渲染器中, 比如 sizeRendererCreator.createContinuousRenderer() 和 colorRendererCreator.createContinuousRenderer()。这包括来自UI元素的信息,如滑块和选定的分类方法和主题。这允许用户客户端保存特定的可覆盖设置,以便下次通过UI访问时,可以记住他们的选择。

backgroundFillSymbol FillSymbol|PolygonSymbol3Dautocast

使用刻度符号对多边形要素进行符号化时,请设置 FillSymbol ,以可视化每个要素的边界。同时,请在 classBreakInfos 中使用不同大小的 FillSymbol 。

示例代码:
// this symbol will be applied to all features. It is only
// necessary when visualizing polygon data with icons.
renderer.backgroundFillSymbol = {
  type: "simple-fill",
  outline: {
    width: 1,
    color: "gray"
  }
};
classBreakInfos ClassBreakInfo[]

数组中的每个元素都是一个对象,提供有关与渲染器关联的分类的信息。

示例代码:
let renderer = {
  type: "class-breaks",  // 转换成 new ClassBreaksRenderer()
  field: "HARVESTED_ACRES",
  classBreakInfos: [
    {
      minValue: 0,  // 0 acres
      maxValue: 200000,  // 200,000 acres
      symbol: sym1,  // will be assigned sym1
      label: "fewer than 200,000 acres"
    }, {
      minValue: 200001,  // 200,001 acres
      maxValue: 500000,  // 500,000 acres
      symbol: sym2,  // will be assigned sym2
      label: "200,000 - 500,000 acres"
    }, {
      minValue: 500001,  // 500,001 acres
      maxValue: 750000,  // 750,000 acres
      symbol: sym3,  // will be assigned sym2
      label: "more than 500,000 acres"
    }
  ]
};
declaredClass Stringreadonly inherited
起始版本: GeoScene API for JavaScript 4.22

类名。类的名称声明格式为 geoscene.folder.className

defaultLabel String

图例中用于描述指定默认符号的要素的标注。 默认符号用于绘制具有未指定、不匹配值的所有要素。

defaultSymbol Symbolautocast

指定给具有与给定分类不匹配值的要素的默认符号。 如果为 null,则不会为不匹配的要素分配符号。

已知限制

即使 defaultSymbol 为 null。具有 mesh geometryType 的场景层也会显示与通用符号不匹配的要素。

field String

数字属性字段的名称,其数据根据 classBreakInfos 中定义的类确定每个分类的符号。

示例代码:
let renderer = {
  type: "class-breaks",  // 转换成 new ClassBreaksRenderer()
  field: "totalAcres",  // values returned by this field will
                        // be used to render features
  classBreakInfos: [
    {
      minValue: 0,  // 0 acres
      maxValue: 200000,  // 200,000 acres
      symbol: sym1  // will be assigned sym1
    }, {
      minValue: 200001,  // 200,001 acres
      maxValue: 500000,  // 500,000 acres
      symbol: sym2  // will be assigned sym2
    }, {
      minValue: 500001,  // 500,001 acres
      maxValue: 750000,  // 750,000 acres
      symbol: sym3  // will be assigned sym2
    }
  ]
};
legendOptions Object

提供用于在图例中显示渲染器的选项的对象。

属性:
title String

描述可视化信息的变量。它在图例中显示为相应渲染器的标题,优先于 field aliasvalueExpressionTitle.

示例代码:
renderer.legendOptions = {
  title: "人口密度"
};
normalizationField String

当 normalizationType 为 field,,此属性包含用于归一化的属性字段名。

normalizationTotal Number

当 normalizationType 为 percent-of-total,此属性包含所有数据值的总计。

normalizationType String

指定如何归一化数据。如果定义了此属性,则分类包含一个归一化的最小/最大值, 而不是给定字段中的值。从字段中获取的数据值在与分类进行比较之前,将通过以下方式之一进行归一化。有关可能的值,请参见下表。

可选值 描述
field 使用 normalizationField 属性中指定的字段的属性值进行分割。如果提供了 normalizationField ,则默认情况下会设置此值。
log 计算数据值以10为底的对数。对于某些数据分布,这是一种有用的方法,因为它可以减少那些非常大的数据值产生的影响。
percent-of-total 将数据值除以所有数据值之和,然后乘以100。使用 normalizationTotal 定义要进行规格化的总值。如果提供了 normalizationTotal,则默认情况下会设置此值。

除了 log 规范化,数据归一化通过除以两个值来创建一个比率。在比较要素之间的属性值时,归一化可将不同地图区域和观察次数的影响降至最低。

例如,将 18 到 30 岁的人口除以面要素的面积,可以得到一个密度值,该值可以在被忽略其面积大小情况下,与其他要素进行均匀比较。

可选值:"field"|"log"|"percent-of-total"

type Stringreadonly

渲染器的类型。

对于 ClassBreaksRenderer,类型默认为 "class-breaks"。

valueExpression String

遵循 Arcade 可视化配置文件 Arcade 表达式。 ClassBreaksRender 中的表达式可以使用 $feature 全局变量引用字段值,并且必须返回一个数字。

此表达式返回的值是用于驱动 classBreakInfos 中定义的可视化的数据。

此属性通常用作数据驱动可视化的字段的替代值。

示例:
示例代码:
// expression calculating voter turnout based on two field values
let renderer = {
  type: "class-breaks",  // 转换成 new ClassBreaksRenderer()
  valueExpression: "( $feature.TOT_VOTES / $feature.REG_VOTERS ) * 100",
  classBreakInfos: [ ... ],  // assigns symbols to manual class breaks
  // e.g. 0-20, 20-40, 40-60, 60-80, 80-100
};
valueExpressionTitle String

描述 valueExpression 属性中定义的关联 Arcade 表达式的标题。 如果 legendOptions 属性没有设置 title则它将在图例中显示为相应渲染器的标题。

示例代码:
renderer.valueExpression = "$feature.POP / $feature.SQ_MI * 100";
renderer.valueExpressionTitle = "Population per square mile";
visualVariables VisualVariable[]autocast
自动转换自 Object[]

VisualVariable 对象数组。 每个对象必须指明要应用的视觉变量类型(例如, ColorVisualVariableSizeVisualVariableOpacityVisualVariableRotationVisualVariable) 用于可视化的数值字段或表达式,以及映射到数据的视觉值。下面的列表标识了每种可视变量类型,并提供了指向每种类型规范表的链接。

类型 对象规范 图例
color ColorVariable legend-color-vv
size SizeVisualVariable legend-color-vv
opacity OpacityVisualVariable legend-color-vv
rotation RotationVisualVariable -

视觉变量主要有两种使用方式。

1. 专题制图

在大多数情况下,视觉变量用于基于 2D 或 3D 中的主题属性(例如人口、教育、等级、金钱、大小等)创建可视化。

renderer.visualVariables = [{
  type: "size",
  field: "POP_POVERTY",
  normalizationField: "TOTPOP_CY",
  legendOptions: {
    title: "% population in poverty by county"
  },
  stops: [
    { value: 0.15, size: 4, label: "<15%" },
    { value: 0.25, size: 12, label: "25%" },
    { value: 0.35, size: 24, label: ">35%" }
  ]
}];

size-image-here

您可以进一步进行可视化,并在同一渲染器中使用多个视觉变量。下面的示例使用了三个视觉变量(大小、颜色和透明度)。

visualization-multivariate-2d

2. 真实世界制图

大小视觉变量可用于根据要素在现实世界中的大小可视化要素的真实尺寸(例如树冠、道路宽度、建筑高度等)。在3D SceneView 中工作时,这种功能尤其强大。下图显示了一层树,它使用视觉变量根据存储在多个属性字段中的数据将每个要素的大小调整为每个树的真实尺寸。

renderer-vv-rw

有关使用多个可视化变量可视化数据的示例,请参阅使用逼真的 3D 符号进行专题可视化。

已知限制

颜色和不透明度视觉变量的停止次数不得超过 8 次,大小视觉变量的停止次数不得超过 6 次。这不适用于由视图比例驱动的变量。

对于用户可以交互更改可视变量的 field 或 valueExpression 的应用程序,我们建议您将可视变量引用的所有潜在字段包含在图层的 outFields 中。这样可以确保在切换或更新渲染器中的字段时获得最佳用户体验。

示例:

方法列表

展示继承方法 隐藏继承方法
属性 返回值类型 描述
更多信息

向渲染器添加一个分类。

更多信息ClassBreaksRenderer
ClassBreaksRenderer更多信息

创建渲染器的深拷贝。

更多信息ClassBreaksRenderer
*更多信息

创建此类的新实例并使用从 GeoScene 产品生成的 JSON 对象的值对其进行初始化。

更多信息Renderer
Promise<ClassBreakInfo>更多信息

返回与给定图形关联的 classBreakInfo 信息(由渲染器定义)。

更多信息ClassBreaksRenderer
更多信息

从渲染器中删除分类。

更多信息ClassBreaksRenderer
Object更多信息

将此类的实例转换为其 GeoScene portal JSON 表示。

更多信息Renderer

方法详细说明

addClassBreakInfo(min, max, symbol)

向渲染器添加一个分类。可以将最小值、最大值和符号值作为单个参数提供,也可以使用 info 对象提供。分类的范围需要大于或等于最小值,小于最大值。

参数:

在分类中使用的最小值。这可以是一个数字或 classBreakInfos中定义的信息对象。

max Number
optional

在分类中使用的最大值。

symbol Symbol
optional

用于分类的符号。

示例代码:
// add a class break using an info object
renderer.addClassBreakInfo({
  minValue: 0,  // lower limit of the break
  maxValue: 2,  // upper limit of the break
  symbol: symbol1  // the symbol assigned to features in this break
});
// add a class break using arguments
renderer.addClassBreakInfo(2, 4, symbol2);
// Features with values between 2 - 4 will be assigned symbol2
});

创建渲染器的深度克隆。

返回值:
类型 描述
ClassBreaksRenderer

调用此方法的对象的深度克隆。

示例代码:
// 创建第一个图层渲染器的深拷贝
let renderer = view.map.layers.getItemAt(0).renderer.clone();
fromJSON(json){*}static

创建此类的新实例,并使用从 GeoScene 产品生成的 JSON 对象的值对其进行初始化。传递给输入 json 参数的对象通常来自对 REST API 中的查询操作的响应,或者来自另一个 GeoScene产品的 toJSON() 方法。有关何时以及如何使用此函数的详细信息和示例,请参阅指南中的使用 fromJSON() 主题。

参数:
json Object

GeoScene 格式的实例的 JSON 表示。有关各种输入 JSON 对象的结构示例,请参阅 GeoScene REST API 文档

返回值:
类型 描述
* 返回一个该类的新实例。
getClassBreakInfo(graphic){Promise<ClassBreakInfo>}

返回与给定图形关联的 classBreakInfo 信息(由渲染器定义)。

参数:
graphic Graphic

将返回其渲染信息的图形。

返回值:
类型 描述
Promise<ClassBreakInfo> 解析为包含与图形相关的分类的渲染和图例信息的对象。
示例代码:
view.on("click", function(event){
  view.hitTest(event)
    .then(function(hitResponse){
      const resultGraphic = hitResponse.results[0].graphic;
      // assumes the layer's renderer is a ClassBreakRenderer instance
      return layer.renderer.getClassBreakInfo(resultGraphic);
    }).then(function(classBreak){
      // returns the class break info to which the graphic belongs.
    });
});
removeClassBreakInfo(min, max)

从渲染器中删除中断。

参数:
min Number

要删除的分类中的最小值

max Number

要删除的分类中的最大值

示例代码:
// removes the break defined for values between 2 - 4.
renderer.removeClassBreakInfo(2,4);
toJSON(){Object}inherited

将此类的实例转换为其 GeoScene portal JSON 表示。 有关更多信息,请参阅使用 fromJSON() 主题。

返回值:
类型 描述
Object 此类实例的 GeoScene portal JSON 表示。

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.