SimpleRenderer 使用一个符号来渲染图层中的所有要素。此渲染器可用于简单地可视化地理要素的位置。例如,代表政治边界、城市、建筑物、河流等的图层通常用于在应用程序中提供地理上下文,可通过按每个图层一个符号来定义。
支持的图层
SimpleRenderer 只能用于为以下图层类型创建可视化效果:FeatureLayer、SceneLayer、MapImageLayer、CSVLayer、GeoJSONLayer、OGCFeatureLayer、WFSLayer 和 StreamLayer
以下屏幕截图中的示例包含三个图层:一个州边界图层、一个高速公路图层和一个城市图层。每个都会为地图提供地理上下文。
SimpleRenderer 还可用于以主题方式可视化数字数据属性。这是通过视觉变量完成的。视觉变量定义了数值数据的数据驱动型可视化参数。它们允许您轻松地将颜色、大小以及透明度的连续渐变映射到图层的某一数值属性字段的最小和最大数据值上。
以下示例在 3D SceneView 中添加大小和颜色视觉变量,以可视化飓风在其路径不同位置处的风速。
要阅读有关视觉变量的更多信息,请参阅 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
});
构造函数
属性概述
名称 | 类型 | 描述 | 类 |
---|---|---|---|
String | 类的名称。 更多详情 | Accessor | |
String | 渲染器的标注。 更多详情 | SimpleRenderer | |
Symbol | 渲染器用来可视化图层中所有要素的符号。 更多详情 | SimpleRenderer | |
String | 渲染器的类型。 更多详情 | SimpleRenderer | |
VisualVariable[] | VisualVariable 对象的数组。 更多详情 | SimpleRenderer |
属性详细信息
-
起始版本: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
-
VisualVariable 对象的数组。每个对象必须指示要应用的视觉变量类型 (例如 ColorVisualVariable、SizeVisualVariable、OpacityVisualVariable、RotationVisualVariable),要从中生成可视化的数值字段或表达式,以及要映射到数据的可视化值。以下列表标识了每种视觉变量类型,并提供了每个变量规范表的链接:
类型 对象规范 图例 color ColorVariable size SizeVisualVariable opacity OpacityVisualVariable 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%" } ] }];
您可以进一步进行可视化,并在同一渲染器中使用多个视觉变量。以下示例使用了三个视觉变量 (大小、颜色和透明度)。
2.绘制真实世界大小
大小视觉变量可用于根据要素在现实世界中的大小来可视化要素的真实尺寸 (例如树冠、道路宽度、建筑高度等)。在 3D SceneView 中工作时,这种功能尤其强大。下图显示了一个树图层,它使用视觉变量根据存储在多个属性字段中的数据将每个要素的大小调整为每个树的真实尺寸。
有关使用多个视觉变量可视化数据的示例,请参阅使用现实 3D 符号的主题可视化。
已知限制
颜色和不透明度视觉变量的停止点数不得超过 8 个,大小视觉变量的停止点数不得超过 6 个。这不适用于由视图比例驱动的变量。
对于用户可以交互更改视觉变量的
field
或valueExpression
的应用程序,我们建议您将视觉变量所引用的所有潜在字段包含在图层的 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() 进行删除。如果未提供键,则句柄将被添加到默认组。
-
clone(){SimpleRenderer}
-
创建 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 ObjectGeoScene 格式实例的 JSON 表示。有关各种输入 JSON 对象的结构示例,请参阅 GeoScene REST API 文档。
返回类型 描述 * 返回该类的新实例。
-
起始版本: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");
-
将此类的实例转换为 GeoScene Portal JSON 表示。有关详细信息,请参阅使用 fromJSON() 指南主题。
返回类型 描述 Object 此类实例的 GeoScene Portal JSON 表示。