Appearance
要素
GFeature
继承
ol/Feature。getGeometry/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 | 显隐(隐藏时暂存样式,显示时恢复) |
SetIconOptions:iconUrl? / 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 }); // 圆点| 字段 | 类型 | 默认 | 说明 |
|---|---|---|---|
position | Coordinate | [] | 位置(WGS-84 经纬度) |
icon | string | — | 图标地址;不传渲染圆点 |
scale | number | 1 | 图标缩放 |
size | number | 5 | 圆点半径(无图标时) |
color | string | 'blue' | 圆点颜色(无图标时) |
offset | number[] | [0, 0] | 图标偏移 |
anchor | number[] | [0.5, 0.5] | 图标锚点 |
cancelBubble | boolean | false | 阻止事件冒泡到下层要素 |
projection | string | 'EPSG:3857' | 几何坐标投影 |
Circle
继承
GFeature。
圆形要素。
| 字段 | 类型 | 默认 | 说明 |
|---|---|---|---|
center | Coordinate | [] | 圆心(WGS-84 经纬度) |
radius | number | 20 | 半径(米,3857 平面距离) |
strokeColor / strokeWeight / strokeDashed | blue / 1 / false | 描边 | |
fillColor | string | 'lightblue' | 填充 |
cancelBubble / projection | 同 Marker |
Polygon
继承
GFeature。
多边形要素,支持中心名称标注。
| 字段 | 类型 | 默认 | 说明 |
|---|---|---|---|
path | number[][] | [] | 外环路径(WGS-84 经纬度数组) |
strokeWeight / strokeColor / strokeDashed | 1 / blue / false | 描边 | |
fillColor | string | 'lightblue' | 填充 |
name | string | '' | 中心名称标注 |
nameColor / nameSize / nameWidth | blue / 20 / 0 | 名称样式 | |
cancelBubble / projection | 同 Marker |
Polyline
继承
GFeature。
折线要素。
| 字段 | 类型 | 默认 | 说明 |
|---|---|---|---|
path | number[][] | [] | 路径(WGS-84 经纬度数组) |
strokeColor / strokeWeight / strokeDashed | blue / 2 / false | 描边 | |
cancelBubble / projection | 同 Marker |
Graphic
继承
ol/Object。get/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 / setId | id 读写 | |
getGeometry / setGeometry | Point 几何读写 | |
getAttributes / setAttributes | 业务属性读写 | |
getStyle / setStyle | ol/style/Style 读写 | |
setIcon | (iconUrl: string) => void | 以图片地址设图标(加载完成后生效) |
setPosition | (coordinate: Coordinate) => void | 更新坐标 |
clone | () => Graphic | 克隆 |
destroy | () => void | 释放引用 |