Skip to content

要素

GFeature

继承 ol/FeaturegetGeometry / setGeometry / getStyle / setStyle / get / set / getProperties / getId / setId / on / un / clone / changed 等基类方法可用。

要素基类,提供样式(图标/文字/描边/填充)与坐标的便捷读写,以及类型化的要素级事件订阅。Marker / Circle / Polygon / Polyline 均继承它。

事件订阅

方法签名说明
onPointer(type: 'click'|'mouseover'|'mouseout', listener: (evt: FeaturePointerEvent) => void) => EventsKey订阅 GMap 派发的要素级交互事件
ts
marker.onPointer('click', (evt) => {
  console.log('命中坐标', evt.mapEvent?.coordinate);
});

坐标读写

方法签名说明
setPositions / getPositions(position) => void / () => CoordinatesLike|null几何坐标(Circle 为圆心)
setPath / getPath(path) => void / () => CoordinatesLike|null路径坐标(线/面类几何)
getType() => string|undefined几何类型

样式读写

方法签名说明
setIcon(opts: SetIconOptions) => void替换图标,保留原 Icon 其余参数
getIcon() => string|undefined图标地址
setText(options: SetTextOptions) => void设置文字标注
setRotateAngle / getRotateAngle(angle: number) => void / () => string旋转角(度)
setScale / getScale(scale) => void / () => number|Size图标缩放
setStrokeColor / getStrokeColor描边颜色
setStrokeWeight / getStrokeWeight描边宽度
setFillColor / getFillColor填充颜色
setStrokeDashed / getStrokeDashed是否虚线
setTitle(title) => void设置 title 属性
setVisible(visible: boolean) => void显隐(隐藏时暂存样式,显示时恢复)

SetIconOptionsiconUrl? / offset?: number[] / crossOrigin?: string\|null

SetTextOptions(继承 ol/style/Text 的 Options):isBolder?(默认 false)、size?(默认 13)、offset?hasBack?strokeColor? / strokeWidth? / color? / backColor?


Marker

继承 GFeature(→ ol/Feature)。

点标注要素,自带样式。不传 icon 渲染为圆点,传 icon 渲染为图标。

ts
new Marker({ position: [118.18, 24.49], icon: '/pin.png', anchor: [0.5, 1] });
new Marker({ position: [118.18, 24.49], color: 'red', size: 8 }); // 圆点
字段类型默认说明
positionCoordinate[]位置(WGS-84 经纬度)
iconstring图标地址;不传渲染圆点
scalenumber1图标缩放
sizenumber5圆点半径(无图标时)
colorstring'blue'圆点颜色(无图标时)
offsetnumber[][0, 0]图标偏移
anchornumber[][0.5, 0.5]图标锚点
cancelBubblebooleanfalse阻止事件冒泡到下层要素
projectionstring'EPSG:3857'几何坐标投影

Circle

继承 GFeature

圆形要素。

字段类型默认说明
centerCoordinate[]圆心(WGS-84 经纬度)
radiusnumber20半径(米,3857 平面距离)
strokeColor / strokeWeight / strokeDashedblue / 1 / false描边
fillColorstring'lightblue'填充
cancelBubble / projection同 Marker

Polygon

继承 GFeature

多边形要素,支持中心名称标注。

字段类型默认说明
pathnumber[][][]外环路径(WGS-84 经纬度数组)
strokeWeight / strokeColor / strokeDashed1 / blue / false描边
fillColorstring'lightblue'填充
namestring''中心名称标注
nameColor / nameSize / nameWidthblue / 20 / 0名称样式
cancelBubble / projection同 Marker

Polyline

继承 GFeature

折线要素。

字段类型默认说明
pathnumber[][][]路径(WGS-84 经纬度数组)
strokeColor / strokeWeight / strokeDashedblue / 2 / false描边
cancelBubble / projection同 Marker

Graphic

继承 ol/Objectget / set / on / un / changed 等基类方法可用。

海量点轻量要素,不继承 ol/Feature(避免逐要素渲染开销),由 MassLayer 的 canvas 渲染器批量绘制。坐标以 WGS-84 经纬度传入,加入图层时转换到视图投影。

ts
new Graphic([118.18, 24.49], { name: '点 A' });

构造:new Graphic(coordinate?: Coordinate, attributes?: Record<string, unknown>)

方法签名说明
getId / setIdid 读写
getGeometry / setGeometryPoint 几何读写
getAttributes / setAttributes业务属性读写
getStyle / setStyleol/style/Style 读写
setIcon(iconUrl: string) => void以图片地址设图标(加载完成后生效)
setPosition(coordinate: Coordinate) => void更新坐标
clone() => Graphic克隆
destroy() => void释放引用