GMap SDK

主题

符号类型 Symbol ​

标准版提供 12 种符号类型，用于定义要素的视觉表现。所有类型继承自抽象基类 Symbol。

Symbol（抽象基类） ​

所有符号的公共基类。

ts
abstract class Symbol {
  readonly type: string;
  visible: boolean;
  shadow?: { color: ColorLike; blur?: number; offsetX?: number; offsetY?: number };
  glow?: { color: ColorLike; radius?: number; intensity?: number };

  abstract clone(): Symbol;
  toJSON(): Record<string, unknown>;
}

属性 ​

属性类型默认值说明
typestring—符号类型标识（只读）
visiblebooleantrue是否可见
shadowobject | undefined—阴影配置
shadow.colorColorLike—阴影颜色
shadow.blurnumber—模糊半径
shadow.offsetXnumber—X 偏移
shadow.offsetYnumber—Y 偏移
glowobject | undefined—发光效果配置
glow.colorColorLike—发光颜色
glow.radiusnumber—发光半径
glow.intensitynumber—发光强度

方法 ​

方法参数返回值说明
clone()—Symbol深拷贝（抽象方法）
toJSON()—Record<string, unknown>序列化为 JSON

FillSymbol ​

填充符号，用于面状要素。

构造函数 ​

ts
class FillSymbol extends Symbol {
  readonly type = 'fill';

  constructor(options?: FillSymbolOptions);
}
ts
interface FillSymbolOptions {
  color?: ColorLike;
  opacity?: number;
  outline?: {
    color?: ColorLike;
    width?: number;
    dashArray?: number[];
    cap?: 'butt' | 'round' | 'square';
    join?: 'miter' | 'round' | 'bevel';
  };
  pattern?: {
    type: 'image' | 'hatch';
    image?: string;
    hatch?: 'cross' | 'diagonal' | 'vertical' | 'horizontal';
    scale?: number;
  };
  fillType?: 'solid' | 'hatch' | 'pattern';
}

属性 ​

属性类型默认值说明
colorColorLike'#3388ff'填充颜色
opacitynumber1不透明度（0-1）
outlineobject | undefined—边线配置
fillTypestring'solid'填充类型

示例 ​

ts
import { FillSymbol } from '@gmap/standard';

const fill = new FillSymbol({
  color: '#ff6600',
  opacity: 0.7,
  outline: { color: '#333', width: 2 },
  fillType: 'solid',
});

LineSymbol ​

线符号，用于线状要素。

构造函数 ​

ts
class LineSymbol extends Symbol {
  readonly type = 'line';

  constructor(options?: LineSymbolOptions);
}
ts
interface LineSymbolOptions {
  color?: ColorLike;
  width?: number;
  opacity?: number;
  cap?: 'butt' | 'round' | 'square';
  join?: 'miter' | 'round' | 'bevel';
  miterLimit?: number;
  dashArray?: number[];
  dashOffset?: number;
  arrow?: boolean;
}

属性 ​

属性类型默认值说明
colorColorLike'#3388ff'线颜色
widthnumber2线宽（像素）
opacitynumber1不透明度
capstring'butt'端点样式
joinstring'miter'连接样式
miterLimitnumber10尖角限制
dashArraynumber[][]虚线模式
dashOffsetnumber0虚线偏移
arrowbooleanfalse是否显示箭头

方法 ​

方法参数返回值说明
setDashArray(pattern)pattern: number[]this设置虚线模式

示例 ​

ts
import { LineSymbol } from '@gmap/standard';

const line = new LineSymbol({
  color: '#e74c3c',
  width: 3,
  cap: 'round',
  join: 'round',
  dashArray: [10, 5],
  arrow: true,
});

line.setDashArray([20, 10, 5, 10]);

MarkerSymbol ​

标记符号，用于点状要素。

构造函数 ​

ts
class MarkerSymbol extends Symbol {
  readonly type = 'marker';

  constructor(options?: MarkerSymbolOptions);
}
ts
interface MarkerSymbolOptions {
  color?: ColorLike;
  size?: number;
  opacity?: number;
  shape?: 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'star';
  rotation?: number;
  anchor?: 'center' | 'left' | 'right' | 'top' | 'bottom' |
           'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  outline?: { color?: ColorLike; width?: number };
}

属性 ​

属性类型默认值说明
colorColorLike'#3388ff'标记颜色
sizenumber8标记大小（像素）
opacitynumber1不透明度
shapestring'circle'形状
rotationnumber0旋转角度（度）
anchorstring'center'锚点位置
outlineobject | undefined—边线配置

方法 ​

方法参数返回值说明
setColor(color)color: ColorLikethis设置颜色
clone()—MarkerSymbol深拷贝
toJSON()—Record<string, unknown>序列化

示例 ​

ts
import { MarkerSymbol } from '@gmap/standard';

const marker = new MarkerSymbol({
  color: '#e74c3c',
  size: 12,
  shape: 'star',
  rotation: 45,
  anchor: 'center',
  outline: { color: '#fff', width: 2 },
});

marker.setColor('#2ecc71');

TextSymbol ​

文本符号，用于标注。

构造函数 ​

ts
class TextSymbol extends Symbol {
  readonly type = 'text';

  constructor(options?: TextSymbolOptions);
}
ts
interface TextSymbolOptions {
  text?: string;
  fontSize?: number;
  fontFamily?: string;
  fontWeight?: string;
  color?: ColorLike;
  haloColor?: ColorLike;
  haloWidth?: number;
  backgroundColor?: ColorLike;
  padding?: [number, number, number?, number?];
  placement?: 'point' | 'line';
  anchor?: string;
  offsetX?: number;
  offsetY?: number;
  overflow?: boolean;
  maxWidth?: number;
  lineHeight?: number;
  letterSpacing?: number;
}

属性 ​

属性类型默认值说明
textstring''文本内容
fontSizenumber14字号
fontFamilystring'sans-serif'字体
fontWeightstring'normal'字重
colorColorLike'#333333'文本颜色
haloColorColorLike | undefined—光晕颜色
haloWidthnumber0光晕宽度
backgroundColorColorLike | undefined—背景色
padding[number, number, number?, number?][4, 4]内边距
placementstring'point'放置模式
anchorstring'center'锚点
offsetXnumber0X 偏移
offsetYnumber0Y 偏移
overflowbooleanfalse是否溢出
maxWidthnumber0最大宽度（0=不限）
lineHeightnumber1.2行高
letterSpacingnumber0字间距

方法 ​

方法参数返回值说明
setText(text)text: stringthis设置文本
setColor(color)color: ColorLikethis设置颜色
clone()—TextSymbol深拷贝
toJSON()—Record<string, unknown>序列化

示例 ​

ts
import { TextSymbol } from '@gmap/standard';

const text = new TextSymbol({
  text: '北京市',
  fontSize: 16,
  fontFamily: 'Arial',
  fontWeight: 'bold',
  color: '#333',
  haloColor: '#fff',
  haloWidth: 2,
  backgroundColor: 'rgba(255,255,255,0.8)',
  padding: [6, 8],
  placement: 'point',
  offsetX: 10,
  offsetY: -5,
});

text.setText('上海市');

PictureSymbol ​

图片符号，用于以图片渲染点要素。

构造函数 ​

ts
class PictureSymbol extends Symbol {
  readonly type = 'picture';

  constructor(options: {
    url: string;
    width?: number;
    height?: number;
    opacity?: number;
    rotation?: number;
  });
}

属性 ​

属性类型默认值说明
urlstring—图片 URL
widthnumber32宽度（像素）
heightnumber32高度（像素）
opacitynumber1不透明度
rotationnumber0旋转角度

示例 ​

ts
import { PictureSymbol } from '@gmap/standard';

const pic = new PictureSymbol({
  url: '/icons/marker.png',
  width: 24,
  height: 24,
  opacity: 0.9,
  rotation: 30,
});

IconSymbol ​

图标符号，用于地图图标标记。

构造函数 ​

ts
class IconSymbol extends Symbol {
  readonly type = 'icon';

  constructor(options: {
    url: string;
    size?: [number, number];
    anchor?: [number, number];
    offset?: [number, number];
  });
}

属性 ​

属性类型默认值说明
urlstring—图标 URL
size[number, number][32, 32]图标尺寸
anchor[number, number][16, 16]锚点（像素）
offset[number, number][0, 0]偏移（像素）

示例 ​

ts
import { IconSymbol } from '@gmap/standard';

const icon = new IconSymbol({
  url: '/icons/pin.png',
  size: [48, 48],
  anchor: [24, 48],
  offset: [0, -24],
});

GradientFillSymbol ​

渐变填充符号，继承自 FillSymbol。

构造函数 ​

ts
class GradientFillSymbol extends FillSymbol {
  readonly type = 'gradient-fill';

  constructor(options: {
    gradientType: 'linear' | 'radial';
    stops: GradientStop[];
    angle?: number;
  });
}
ts
interface GradientStop {
  offset: number;  // 0-1
  color: ColorLike;
}

属性 ​

属性类型默认值说明
gradientType'linear' | 'radial'—渐变类型
stopsGradientStop[]—渐变停止点
anglenumber0渐变角度（度）
fillTypestringgradientType填充类型

示例 ​

ts
import { GradientFillSymbol } from '@gmap/standard';

const gradient = new GradientFillSymbol({
  gradientType: 'linear',
  stops: [
    { offset: 0, color: '#ff0000' },
    { offset: 0.5, color: '#ffff00' },
    { offset: 1, color: '#00ff00' },
  ],
  angle: 90,
});

CompositeSymbol ​

复合符号，可组合多个符号叠加渲染。

构造函数 ​

ts
class CompositeSymbol extends Symbol {
  readonly type = 'composite';

  constructor(options?: { symbols?: Symbol[] });
}

属性 ​

属性类型默认值说明
symbolsSymbol[][]子符号数组

方法 ​

方法参数返回值说明
addSymbol(symbol)symbol: Symbolthis添加子符号
clone()—CompositeSymbol深拷贝

示例 ​

ts
import { CompositeSymbol, FillSymbol, LineSymbol } from '@gmap/standard';

const composite = new CompositeSymbol({
  symbols: [
    new FillSymbol({ color: 'rgba(51,136,255,0.4)' }),
    new LineSymbol({ color: '#3388ff', width: 2 }),
  ],
});

composite.addSymbol(new LineSymbol({ color: '#fff', width: 1, dashArray: [5, 5] }));

ModelSymbol ​

3D 模型符号，用于在地图上加载和显示 3D 模型。

构造函数 ​

ts
class ModelSymbol extends Symbol {
  readonly type = 'model';

  constructor(options: {
    url: string;
    scale?: [number, number, number];
    rotation?: [number, number, number];
    color?: ColorLike;
    opacity?: number;
    animation?: string;
    animationSpeed?: number;
    castShadow?: boolean;
    receiveShadow?: boolean;
  });
}

属性 ​

属性类型默认值说明
urlstring—模型 URL（glTF/glb）
scale[number, number, number][1, 1, 1]缩放 [x, y, z]
rotation[number, number, number][0, 0, 0]旋转 [rx, ry, rz]（度）
colorColorLike | undefined—模型颜色
opacitynumber1不透明度
animationstring | undefined—动画名称
animationSpeednumber1动画速度
castShadowbooleanfalse是否投射阴影
receiveShadowbooleanfalse是否接收阴影

示例 ​

ts
import { ModelSymbol } from '@gmap/standard';

const model = new ModelSymbol({
  url: '/models/building.glb',
  scale: [1, 1, 1],
  rotation: [0, 45, 0],
  color: '#6699cc',
  opacity: 0.9,
  animation: 'idle',
  animationSpeed: 1.5,
  castShadow: true,
  receiveShadow: true,
});

BillboardSymbol ​

广告牌符号，始终面向相机的 3D 标注。

构造函数 ​

ts
class BillboardSymbol extends Symbol {
  readonly type = 'billboard';

  constructor(options: {
    image?: string | HTMLCanvasElement;
    text?: string;
    fontSize?: number;
    color?: ColorLike;
    backgroundColor?: ColorLike;
    padding?: number;
    scale?: number;
    pixelOffset?: [number, number];
    eyeOffset?: [number, number, number];
    rotation?: number;
    scaleByDistance?: boolean;
    alwaysOnTop?: boolean;
  });
}

属性 ​

属性类型默认值说明
imagestring | HTMLCanvasElement | undefined—图片
textstring''文本
fontSizenumber16字号
colorColorLike'#ffffff'文本颜色
backgroundColorColorLike'rgba(0,0,0,0.5)'背景色
paddingnumber8内边距（像素）
scalenumber1缩放
pixelOffset[number, number][0, 0]像素偏移
eyeOffset[number, number, number][0, 0, 0]视点偏移
rotationnumber0旋转角度
scaleByDistancebooleanfalse是否随距离缩放
alwaysOnTopbooleanfalse是否始终在最上层

示例 ​

ts
import { BillboardSymbol } from '@gmap/standard';

const billboard = new BillboardSymbol({
  text: '天安门广场',
  fontSize: 18,
  color: '#fff',
  backgroundColor: 'rgba(220,50,50,0.8)',
  padding: 10,
  scale: 1.5,
  pixelOffset: [0, -30],
  alwaysOnTop: true,
});

DivIconSymbol ​

HTML Div 图标符号，使用自定义 HTML 渲染标记。

构造函数 ​

ts
class DivIconSymbol extends Symbol {
  readonly type = 'div-icon';

  constructor(options: {
    html: string;
    width?: number;
    height?: number;
    anchor?: [number, number];
    className?: string;
  });
}

属性 ​

属性类型默认值说明
htmlstring—HTML 内容
widthnumber30宽度（像素）
heightnumber30高度（像素）
anchor[number, number][15, 15]锚点（像素）
classNamestring''CSS 类名

示例 ​

ts
import { DivIconSymbol } from '@gmap/standard';

const divIcon = new DivIconSymbol({
  html: '<div class="my-marker"><span>12</span></div>',
  width: 40,
  height: 40,
  anchor: [20, 20],
  className: 'custom-marker',
});

CSS ​

css
.my-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e74c3c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

四川省交通运输综合地理服务平台 地图开发框架

四川省公路勘察设计院研究院有限公司 版权所有