# svg覆盖物
SvgOverlay 在一个地理范围内创建一个随缩放而缩放的svg的覆盖物
svg覆盖物性能低，不建议大量使用，同时在级别特别大时会导致失真，在倾斜角很大时会导致不可见
# 类型定义
// 在一个地理范围内创建一个随缩放而缩放的svg的覆盖物
export class SvgOverlay {
constructor(options?: {
/** 显示最大级别 */
minZoom?: number;
/** 显示最小级别 */
maxZoom?: number;
/** 显示最大倾斜角 */
maxPitch?: number;
/** 自动更新div大小，（如果需要svg放大，需要设置为true) */
updateDivSize?: boolean;
/** 放大div时，最大的div大小，超过了就像素放大了 */
maxDivSize?: number;
/** 当移动结束时不自动更新范围 */
noUpdateBoundsWhenMoveend?: boolean;
/** 类名 */
divClassName?: string;
/** svg初始化时最大像素宽,默认1000 */
svgMaxWidth?: number;
/** svg初始化时最大像素高,默认1000 */
svgMaxHeight?: number;
/** svg初始化时Offset像素距离,默认100 */
svgOffset?: number;
});
addTo(map: Map, insertId?: string | HTMLElement): void;
remove(): void;
/**
* 增加svg元素
* @param element 要增加的元素
* @param noUpdate 不立即更新
*/
addElement(element: SvgElementOptions | string, noUpdate?: boolean): void;
/**
* 增加svg元素
* @param elements 多个元素内容
* @param noUpdate 不立即更新
*/
addElements(elements: SvgElementOptions[], noUpdate?: boolean): void;
/**
* 获取svg获取
*/
getSvgContainer(): SVGSVGElement;
/**
* 获取所有的元素
*/
getElements(): SvgElementOptions[];
/**
* 移动一个元素
*/
removeElements(id: string[] | string): SvgElementOptions[];
/**
* 更新一个元素
*/
updateElements(elements: SvgElementOptions[] | SvgElementOptions): SvgElementOptions[];
/**
* 圆心半径属性字符串
*/
static attr_cx_cy_r(cx: number, cy: number, r: number): string;
/**
* 椭圆心半径属性字符串
*/
static attr_cx_cy_rx_ry(cx: number, cy: number, rx: number, ry: number): string;
/**
* 直线坐标属性字符串
*/
static attr_x1_y1_x2_y2(x1: number, y1: number, x2: number, y2: number): string;
/**
* 坐标宽高属性字符串
*/
static attr_x_y_w_h(x: number, y: number, w: number, h: number): string;
/**
* 坐标属性字符串
*/
static attr_x_y(x: number, y: number): string;
/**
* 字体属性字符串
*/
static attr_fontsize(fontsize: number): string;
/**
* 和长度有关属性字符串
*/
static attr_length(len: number): string;
/**
* 和点坐标有关属性字符串
*/
static attr_point(point: GeoPoint, joinComma?: boolean): string;
/**
* 坐标序列属性字符串
*/
static attr_points(points: GeoPoint[]): string;
/**
* 路径序列属性字符串
*/
static attr_path(points: GeoPoint[]): string;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
# 用法
let mapBounds = map.getGeoBounds();
let len = mapBounds.width() / 5;
let svgOverlay = new vjmap.SvgOverlay({
maxZoom: 5, // 第5级时全部不显示了
maxPitch: 60 // 倾角超过60度就不显示了
});
svgOverlay.addTo(map);
// 增加一个渐变色
svgOverlay.addElement(`
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:${vjmap.randomColor()};stop-opacity:0.8" />
<stop offset="100%" style="stop-color:${vjmap.randomColor()};stop-opacity:1" />
</radialGradient>
</defs>
`)
const getStyle = (style = {}) => {
return Object.keys(style).map(key => `${key}:${style[key]}`).join(";")
}
const svgCircleHtml = (id, point, r, style) => {
return ` <circle id="${id}" ${vjmap.SvgOverlay.attr_cx_cy_r(point.x, point.y, r)} style="${getStyle(style)}"/>`
}
const addCircle = ()=> {
let id = "circle" + vjmap.RandomID();
return svgOverlay.addElement({
html: svgCircleHtml(id, mapBounds.randomPoint(), len / 4, {fill: "url(#grad1)", stroke: vjmap.randomColor(), "stroke-width": 3, cursor: "pointer"}),
event: svgParentElement => {
// 事件回调
let ele = svgParentElement.getElementById(id);
if (!ele) return;
ele.addEventListener("mouseover", e => ele.style.opacity = 0.6);
ele.addEventListener("mouseout", e => ele.style.opacity = 1.0);
ele.addEventListener("click", e => message.info("点击了圆" + id));
}
})
}
for(let i = 0; i < 10; i++) {
addCircle();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 示例
