SimpleRenderer

AMD: require(["geoscene/renderers/SimpleRenderer"], (SimpleRenderer) => { /* code goes here */ });
ESM: import SimpleRenderer from "@geoscene/core/renderers/SimpleRenderer";
类: geoscene/renderers/SimpleRenderer
继承于:SimpleRenderer Renderer Accessor
起始版本:GeoScene Maps SDK for JavaScript 4.0

SimpleRenderer 使用一个符号来渲染图层中的所有要素。此渲染器可用于简单地可视化地理要素的位置。例如,代表政治边界、城市、建筑物、河流等的图层通常用于在应用程序中提供地理上下文,可通过按每个图层一个符号来定义。

支持的图层

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

以下屏幕截图中的示例包含三个图层:一个州边界图层、一个高速公路图层和一个城市图层。每个都会为地图提供地理上下文。

renderer-simple-basic

SimpleRenderer 还可用于以主题方式可视化数字数据属性。这是通过视觉变量完成的。视觉变量定义了数值数据的数据驱动型可视化参数。它们允许您轻松地将颜色大小以及透明度的连续渐变映射到图层的某一数值属性字段的最小和最大数据值上。

以下示例在 3D SceneView 中添加大小颜色视觉变量,以可视化飓风在其路径不同位置处的风速。

symbols-3d-objects

要阅读有关视觉变量的更多信息,请参阅 visualVariables 属性。

另请参阅
示例
// Set a basic symbol on a layer to visualize all features the same way
let citiesRenderer = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: {
    type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
    size: 6,
    color: "black",
    outline: {  // autocasts as new SimpleLineSymbol()
      width: 0.5,
      color: "white"
    }
  }
};
let citiesLayer = new FeatureLayer({
  url: "http://url.to.service",
  renderer: citiesRenderer
});
// Set a continuous color ramp on the renderer with visual variables
let citiesRenderer = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: { type: "simple-fill" },  // autocasts as new SimpleFillSymbol()
  visualVariables: [{
    type: "color",
    field: "POPULATION",
    normalizationField: "SQ_KM",
    // features with 30 ppl/sq km or below are assigned the first color
    stops: [{ value: 100, color: "#FFFCD4" },
          { value: 500, color: "#0D2644" }]
  }]
};
let citiesLayer = new FeatureLayer({
  url: "http://url.to.service",
  renderer: citiesRenderer
});

构造函数

new SimpleRenderer(properties)
参数
properties Object
optional

有关可能传递给构造函数的所有属性的列表,请参见属性

属性概述

可以设置、检索或侦听任何属性。请参阅使用属性主题。
显示继承属性 隐藏继承属性
名称 类型 描述
String

类的名称。

更多详情
Accessor
String

渲染器的标注。

更多详情
SimpleRenderer
Symbol

渲染器用来可视化图层中所有要素的符号。

更多详情
SimpleRenderer
String

渲染器的类型。

更多详情
SimpleRenderer
VisualVariable[]

VisualVariable 对象的数组。

更多详情
SimpleRenderer

属性详细信息

declaredClass Stringreadonly inherited
起始版本:GeoScene Maps SDK for JavaScript 4.7

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

label String

渲染器的标注。这描述了具有给定符号的要素在现实世界中代表什么。这将显示在 Legend 微件内的图层符号旁。

当使用 visualVariables 时,Legend 中不会显示文本。当渲染器包含 visualVariables 时,您应在每个视觉变量上设置 legendOptions 中的 title 属性来描述可视化。

渲染器用来可视化图层中所有要素的符号。

示例
let renderer = {
  type: "simple",  // autocasts as new SimpleRenderer()
  symbol: {
    type: "simple-fill",  // autocasts as new SimpleFillSymbol()
    color: [ 255, 128, 0, 0.5 ],
    outline: {  // autocasts as new SimpleLineSymbol()
      width: 1,
      color: "white"
    }
  }
};
type Stringreadonly

渲染器的类型。

对于 SimpleRenderer,类型总是 "simple"

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 个。这不适用于由视图比例驱动的变量。

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

另请参阅

方法概述

显示继承的方法 隐藏继承的方法
名称 返回值类值 描述

添加一个或多个与对象的生命周期相关联的句柄。

更多详情
Accessor
SimpleRenderer

创建 renderer 的深度克隆。

更多详情
SimpleRenderer
*

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

更多详情
渲染器
Boolean

如果存在指定的句柄组,则返回 true。

更多详情
Accessor

移除对象拥有的句柄组。

更多详情
Accessor
Object

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

更多详情
渲染器

方法详细说明

addHandles(handleOrHandles, groupKey)inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时,将移除句柄。

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

// Handle gets removed when the object is destroyed.
this.addHandles(handle);
参数
handleOrHandles WatchHandle|WatchHandle[]

对象销毁后,标记为要移除的句柄。

groupKey *
optional

标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键,则句柄将被添加到默认组。

创建 renderer 的深度克隆。

返回
类型 描述
SimpleRenderer 调用此方法的对象的深度克隆。
示例
// Creates a deep clone of the first layer's renderer
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 文档

返回
类型 描述
* 返回该类的新实例。
hasHandles(groupKey){Boolean}inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

如果存在指定的句柄组,则返回 true。

参数
groupKey *
optional

组键。

返回
类型 描述
Boolean 如果存在指定的句柄组,则返回 true
示例
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}
removeHandles(groupKey)inherited
起始版本:GeoScene Maps SDK for JavaScript 4.25

移除对象拥有的句柄组。

参数
groupKey *
optional

要移除的组键或组键的数组或集合。

示例
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");
toJSON(){Object}inherited

将此类的实例转换为 GeoScene Portal JSON 表示。有关详细信息,请参阅使用 fromJSON() 指南主题。

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

您的浏览器不再受支持。请升级您的浏览器以获得最佳体验。请参阅浏览器弃用帖子以获取更多信息