渲染器类型 Renderer

标准版提供 8 种渲染器，控制要素的符号化方式。所有类型继承自抽象基类 Renderer。

Renderer（抽象基类）

所有渲染器的公共基类。

abstract class Renderer {
  readonly type: string;

  abstract getSymbol(feature: Feature): Symbol;
}

属性

属性	类型	说明
`type`	`string`	渲染器类型标识（只读）

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	根据要素返回对应符号（抽象方法）

SimpleRenderer

简单渲染器，所有要素使用相同符号。

构造函数

class SimpleRenderer extends Renderer {
  readonly type = 'simple';
  symbol: Symbol;

  constructor(options: { symbol: Symbol });
}

属性

属性	类型	说明
`symbol`	`Symbol`	统一使用的符号

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	始终返回构造时的 symbol

示例

import { SimpleRenderer, FillSymbol } from '@gmap/standard';

const renderer = new SimpleRenderer({
  symbol: new FillSymbol({ color: '#3388ff', opacity: 0.6 }),
});

// 所有要素都使用同一个符号
console.log(renderer.getSymbol(anyFeature)); // FillSymbol

UniqueValueRenderer

唯一值渲染器，根据字段值为不同类别分配不同符号。

构造函数

class UniqueValueRenderer extends Renderer {
  readonly type = 'unique-value';
  field: string;
  defaultSymbol: Symbol;
  defaultLabel: string;

  constructor(options: {
    field: string;
    uniqueValues: UniqueValueItem[];
    defaultSymbol?: Symbol;
    defaultLabel?: string;
  });
}

interface UniqueValueItem {
  value: string | number;
  symbol: Symbol;
  label?: string;
}

属性

属性	类型	说明
`field`	`string`	用于分类的字段名
`defaultSymbol`	`Symbol`	未匹配时的默认符号
`defaultLabel`	`string`	默认标签

方法

方法	参数	返回值	说明
`addValue(value, symbol, label?)`	`value: string \| number, symbol: Symbol, label?: string`	`this`	添加唯一值映射
`removeValue(value)`	`value: string \| number`	`this`	移除唯一值映射
`getSymbol(feature)`	`feature: Feature`	`Symbol`	根据要素字段值返回符号

示例

import { UniqueValueRenderer, FillSymbol } from '@gmap/standard';

const renderer = new UniqueValueRenderer({
  field: 'landuse',
  uniqueValues: [
    { value: 'residential', symbol: new FillSymbol({ color: '#ffffcc' }), label: '居住区' },
    { value: 'commercial', symbol: new FillSymbol({ color: '#fd8d3c' }), label: '商业区' },
    { value: 'industrial', symbol: new FillSymbol({ color: '#d94701' }), label: '工业区' },
    { value: 'park', symbol: new FillSymbol({ color: '#78c679' }), label: '公园' },
  ],
  defaultSymbol: new FillSymbol({ color: '#cccccc' }),
  defaultLabel: '其他',
});

renderer.addValue('agriculture', new FillSymbol({ color: '#fef0d9' }), '农业用地');
renderer.removeValue('industrial');

ClassBreaksRenderer

分级渲染器，将数值字段按分类方法分段并分配符号。

构造函数

class ClassBreaksRenderer extends Renderer {
  readonly type = 'class-breaks';
  field: string;
  classification: string;
  classCount: number;
  defaultSymbol: Symbol;

  constructor(options: {
    field: string;
    classification?: 'equalInterval' | 'quantile' | 'naturalBreaks' | 'stdDeviation' | 'manual';
    classCount?: number;
    classBreaks?: ClassBreak[];
    defaultSymbol?: Symbol;
  });
}

interface ClassBreak {
  min: number | null;
  max: number | null;
  symbol: Symbol;
  label?: string;
}

属性

属性	类型	默认值	说明
`field`	`string`	—	数值字段名
`classification`	`string`	`'quantile'`	分类方法
`classCount`	`number`	`5`	分级数
`defaultSymbol`	`Symbol`	—	未匹配时的默认符号

分类方法

方法	说明
`'equalInterval'`	等间距分级
`'quantile'`	等量分级（每级要素数相同）
`'naturalBreaks'`	自然断点法（Jenks）
`'stdDeviation'`	标准差分级
`'manual'`	手动设置断点

方法

方法	参数	返回值	说明
`addBreak(min, max, symbol, label?)`	`min: number \| null, max: number \| null, symbol: Symbol, label?: string`	`this`	添加分级断点
`removeBreak(index)`	`index: number`	`this`	移除指定断点
`getSymbol(feature)`	`feature: Feature`	`Symbol`	根据要素字段值返回对应级别符号

示例

import { ClassBreaksRenderer, FillSymbol } from '@gmap/standard';

const renderer = new ClassBreaksRenderer({
  field: 'population',
  classification: 'quantile',
  classCount: 5,
});

renderer
  .addBreak(null, 10000, new FillSymbol({ color: '#f7fbff' }), '< 1万')
  .addBreak(10000, 50000, new FillSymbol({ color: '#deebf7' }), '1-5万')
  .addBreak(50000, 200000, new FillSymbol({ color: '#9ecae1' }), '5-20万')
  .addBreak(200000, 1000000, new FillSymbol({ color: '#4292c6' }), '20-100万')
  .addBreak(1000000, null, new FillSymbol({ color: '#08306b' }), '> 100万');

GraduatedSymbolRenderer

比例符号渲染器，根据数值按比例缩放符号大小。

构造函数

class GraduatedSymbolRenderer extends Renderer {
  readonly type = 'graduated';

  constructor(options: {
    field: string;
    valueRange?: [number, number];
    minSize?: number;
    maxSize?: number;
    baseSymbol: Symbol;
  });
}

属性

属性	类型	默认值	说明
`field`	`string`	—	数值字段名
`valueRange`	`[number, number]`	`[0, 100]`	值域范围
`minSize`	`number`	`4`	最小符号大小
`maxSize`	`number`	`32`	最大符号大小
`baseSymbol`	`Symbol`	—	基础符号（size 属性会被动态调整）

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	返回按比例缩放后的符号克隆

示例

import { GraduatedSymbolRenderer, MarkerSymbol } from '@gmap/standard';

const renderer = new GraduatedSymbolRenderer({
  field: 'value',
  valueRange: [0, 10000],
  minSize: 6,
  maxSize: 40,
  baseSymbol: new MarkerSymbol({ color: '#e74c3c', shape: 'circle' }),
});

// 要素值为 5000 时，符号大小将为 minSize + (maxSize - minSize) * 0.5 = 23

DotDensityRenderer

点密度渲染器，用随机分布的点表示密度。

构造函数

class DotDensityRenderer extends Renderer {
  readonly type = 'dot-density';
  seed: number;

  constructor(options: { seed?: number });
}

属性

属性	类型	默认值	说明
`seed`	`number`	`42`	随机种子（保证可复现）

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	返回点密度符号

示例

import { DotDensityRenderer } from '@gmap/standard';

const renderer = new DotDensityRenderer({ seed: 123 });

HeatmapRenderer

热力图渲染器。

构造函数

class HeatmapRenderer extends Renderer {
  readonly type = 'heatmap';

  constructor(options?: { type?: string });
}

属性

属性	类型	默认值	说明
`type`	`string`	`'heatmap'`	渲染器类型

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	返回热力图符号

示例

import { HeatmapRenderer } from '@gmap/standard';

const renderer = new HeatmapRenderer();

MeshRenderer

网格渲染器，用于 3D 要素的网格渲染。

构造函数

class MeshRenderer extends Renderer {
  readonly type = 'mesh';

  constructor(options: {
    field?: string;
    material?: string;
    vertexColors?: boolean;
    colorRamp?: Array<{ value: number; color: string }>;
    wireframe?: boolean;
    shadows?: 'none' | 'cast' | 'receive' | 'both';
    elevationScale?: number;
    opacity?: number;
  });
}

属性

属性	类型	默认值	说明
`field`	`string \| undefined`	—	用于着色的字段
`vertexColors`	`boolean`	`false`	是否使用顶点颜色
`colorRamp`	`Array<{value, color}> \| undefined`	—	颜色渐变配置
`wireframe`	`boolean`	`false`	是否显示线框
`shadows`	`string`	`'none'`	阴影模式
`elevationScale`	`number`	`1`	高度缩放
`opacity`	`number`	`1`	不透明度

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	返回网格符号

示例

import { MeshRenderer } from '@gmap/standard';

const renderer = new MeshRenderer({
  field: 'elevation',
  vertexColors: true,
  colorRamp: [
    { value: 0, color: '#00ff00' },
    { value: 500, color: '#ffff00' },
    { value: 1000, color: '#ff0000' },
  ],
  shadows: 'both',
  elevationScale: 2,
  opacity: 0.85,
});

CustomRenderer

自定义渲染器，允许通过函数自定义符号化逻辑。

构造函数

class CustomRenderer extends Renderer {
  readonly type = 'custom';

  constructor(options?: { type?: string });
}

方法

方法	参数	返回值	说明
`getSymbol(feature)`	`feature: Feature`	`Symbol`	根据自定义逻辑返回符号

示例

import { CustomRenderer } from '@gmap/standard';

const renderer = new CustomRenderer({ type: 'my-custom' });

渲染器类型 Renderer ​

Renderer（抽象基类） ​

属性 ​

方法 ​

SimpleRenderer ​

构造函数 ​

属性 ​

方法 ​

示例 ​

UniqueValueRenderer ​

构造函数 ​

属性 ​

方法 ​

示例 ​

ClassBreaksRenderer ​

构造函数 ​

属性 ​

分类方法 ​

方法 ​

示例 ​

GraduatedSymbolRenderer ​

构造函数 ​

属性 ​

方法 ​

示例 ​

DotDensityRenderer ​

构造函数 ​

属性 ​

方法 ​

示例 ​

HeatmapRenderer ​

构造函数 ​

属性 ​

方法 ​

示例 ​

MeshRenderer ​

构造函数 ​

属性 ​

方法 ​

示例 ​

CustomRenderer ​

构造函数 ​

方法 ​

示例 ​

渲染器类型 Renderer

Renderer（抽象基类）

属性

方法

SimpleRenderer

构造函数

属性

方法

示例

UniqueValueRenderer

构造函数

属性

方法

示例

ClassBreaksRenderer

构造函数

属性

分类方法

方法

示例

GraduatedSymbolRenderer

构造函数

属性

方法

示例

DotDensityRenderer

构造函数

属性

方法

示例

HeatmapRenderer

构造函数

属性

方法

示例

MeshRenderer

构造函数

属性

方法

示例

CustomRenderer

构造函数

方法

示例