@hzab/map-combine 0.4.0-alpha.0 → 0.4.2-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/package.json +1 -4
- package/src/amap/AMap.ts +306 -306
- package/src/amap/AMapEvent.ts +54 -54
- package/src/basic/BasicElement.ts +14 -14
- package/src/basic/BasicMarker.ts +32 -26
- package/src/basic/BasicMouseHandler.ts +4 -4
- package/src/basic/MapCombine.ts +98 -98
- package/src/basic/Point.ts +173 -173
- package/src/basic/PointAggregation.tsx +5 -4
- package/src/basic/Polygon.ts +81 -70
- package/src/basic/Polyline.ts +85 -75
- package/src/basic/ReactPopup.tsx +12 -10
- package/src/cesium/CesiumMap.ts +347 -347
- package/src/cesium/CesiumPoint.ts +69 -69
- package/src/cesium/CesiumPolygon.ts +181 -190
- package/src/cesium/CesiumPolyline.ts +369 -369
- package/src/mine/MineEvent.ts +46 -46
- package/src/mine/MineMap.ts +125 -125
- package/src/mine/MinePoint.ts +70 -78
- package/src/mine/MinePolygon.ts +206 -216
- package/src/mine/MinePolyline.ts +193 -203
- package/src/mine/MineTile3D.ts +7 -11
- package/src/openlayer/OpenlayerEvent.ts +87 -87
- package/src/openlayer/OpenlayerMap.ts +287 -287
- package/src/openlayer/OpenlayerPoint.ts +185 -177
- package/src/openlayer/OpenlayerPolygon.ts +302 -299
- package/src/openlayer/OpenlayerPolyline.ts +303 -289
- package/src/utils/Image.ts +16 -20
- package/src/utils/PolygonEditor.ts +78 -99
- package/src/utils/PolylineEditor.ts +75 -90
- package/src/utils/static.ts +3 -3
package/src/basic/Polyline.ts
CHANGED
|
@@ -1,194 +1,204 @@
|
|
|
1
|
-
import Eventful from "zrender/lib/core/Eventful"
|
|
1
|
+
import Eventful from "zrender/lib/core/Eventful";
|
|
2
2
|
|
|
3
|
-
import { MapElement, MapElementOption } from "./MapElement"
|
|
4
|
-
import { MapCombine } from "./MapCombine"
|
|
5
|
-
import { ContextMenuItem } from "./ContextMenu"
|
|
3
|
+
import { MapElement, MapElementOption } from "./MapElement";
|
|
4
|
+
import { MapCombine } from "./MapCombine";
|
|
5
|
+
import { ContextMenuItem } from "./ContextMenu";
|
|
6
6
|
|
|
7
7
|
export interface PolylineOption<K> extends MapElementOption {
|
|
8
|
-
show: boolean
|
|
9
|
-
cursor: string
|
|
10
|
-
coordinates?: number[][]
|
|
11
|
-
editable: boolean
|
|
12
|
-
userdata: K
|
|
13
|
-
silent: boolean
|
|
14
|
-
lineWidth: number
|
|
15
|
-
stroke: string
|
|
16
|
-
dash: boolean
|
|
8
|
+
show: boolean;
|
|
9
|
+
cursor: string;
|
|
10
|
+
coordinates?: number[][];
|
|
11
|
+
editable: boolean;
|
|
12
|
+
userdata: K;
|
|
13
|
+
silent: boolean;
|
|
14
|
+
lineWidth: number;
|
|
15
|
+
stroke: string;
|
|
16
|
+
dash: boolean;
|
|
17
17
|
menu?: ContextMenuItem[];
|
|
18
|
-
icon: string
|
|
19
|
-
flow: boolean
|
|
18
|
+
icon: string;
|
|
19
|
+
flow: boolean;
|
|
20
|
+
height?: number;
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
export class Polyline<K = undefined> extends MapElement<PolylineOption<K>>{
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
type = 'Polyline'
|
|
23
|
+
export class Polyline<K = undefined> extends MapElement<PolylineOption<K>> {
|
|
24
|
+
type = "Polyline";
|
|
26
25
|
event = new Eventful<{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}>()
|
|
26
|
+
"data-loaded": () => void;
|
|
27
|
+
"pointer-in": () => void;
|
|
28
|
+
"pointer-out": () => void;
|
|
29
|
+
"left-click": () => void;
|
|
30
|
+
"right-click": () => void;
|
|
31
|
+
"start-edit": () => void;
|
|
32
|
+
"stop-edit": () => void;
|
|
33
|
+
update: (keys: Set<string>) => void;
|
|
34
|
+
destroy: () => void;
|
|
35
|
+
}>();
|
|
37
36
|
|
|
38
37
|
get userdata() {
|
|
39
|
-
return this._option.userdata
|
|
38
|
+
return this._option.userdata;
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
get cursor() {
|
|
43
|
-
return this._option.cursor
|
|
42
|
+
return this._option.cursor;
|
|
44
43
|
}
|
|
45
44
|
|
|
46
45
|
get show() {
|
|
47
|
-
return this._option.show
|
|
46
|
+
return this._option.show;
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
set show(val) {
|
|
51
50
|
if (this._option.show != val) {
|
|
52
|
-
this._option.show = val
|
|
53
|
-
this._update(
|
|
51
|
+
this._option.show = val;
|
|
52
|
+
this._update("show");
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
get menu() {
|
|
58
|
-
return this._option.menu
|
|
57
|
+
return this._option.menu;
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
set menu(val) {
|
|
62
|
-
this._option.menu = val
|
|
61
|
+
this._option.menu = val;
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
get silent() {
|
|
66
|
-
return this._option.silent
|
|
65
|
+
return this._option.silent;
|
|
67
66
|
}
|
|
68
67
|
|
|
69
68
|
set silent(val) {
|
|
70
69
|
if (this._option.silent != val) {
|
|
71
|
-
this._option.silent = val
|
|
72
|
-
this._update(
|
|
70
|
+
this._option.silent = val;
|
|
71
|
+
this._update("silent");
|
|
73
72
|
}
|
|
74
73
|
}
|
|
75
74
|
|
|
76
75
|
get editable() {
|
|
77
|
-
return this._option.editable
|
|
76
|
+
return this._option.editable;
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
set editable(val) {
|
|
81
80
|
if (this._option.editable != val) {
|
|
82
|
-
this._option.editable = val
|
|
83
|
-
this._update(
|
|
81
|
+
this._option.editable = val;
|
|
82
|
+
this._update("editable");
|
|
84
83
|
}
|
|
85
84
|
}
|
|
86
85
|
|
|
87
86
|
get coordinates() {
|
|
88
|
-
return this._option.coordinates
|
|
87
|
+
return this._option.coordinates;
|
|
89
88
|
}
|
|
90
89
|
|
|
91
90
|
set coordinates(val) {
|
|
92
91
|
if (this._option.coordinates != val) {
|
|
93
|
-
this._option.coordinates = val
|
|
94
|
-
this._update(
|
|
92
|
+
this._option.coordinates = val;
|
|
93
|
+
this._update("coordinates");
|
|
95
94
|
}
|
|
96
95
|
}
|
|
97
96
|
|
|
98
97
|
get lineWidth() {
|
|
99
|
-
return this._option.lineWidth
|
|
98
|
+
return this._option.lineWidth;
|
|
100
99
|
}
|
|
101
100
|
|
|
102
101
|
set lineWidth(val) {
|
|
103
102
|
if (this._option.lineWidth != val) {
|
|
104
|
-
this._option.lineWidth = val
|
|
105
|
-
this._update(
|
|
103
|
+
this._option.lineWidth = val;
|
|
104
|
+
this._update("lineWidth");
|
|
106
105
|
}
|
|
107
106
|
}
|
|
108
107
|
|
|
109
108
|
get stroke() {
|
|
110
|
-
return this._option.stroke
|
|
109
|
+
return this._option.stroke;
|
|
111
110
|
}
|
|
112
111
|
|
|
113
112
|
set stroke(val) {
|
|
114
113
|
if (this._option.stroke != val) {
|
|
115
|
-
this._option.stroke = val
|
|
116
|
-
this._update(
|
|
114
|
+
this._option.stroke = val;
|
|
115
|
+
this._update("stroke");
|
|
117
116
|
}
|
|
118
117
|
}
|
|
119
118
|
get dash() {
|
|
120
|
-
return this._option.dash
|
|
119
|
+
return this._option.dash;
|
|
121
120
|
}
|
|
122
121
|
|
|
123
122
|
set dash(val) {
|
|
124
123
|
if (this._option.dash != val) {
|
|
125
|
-
this._option.dash = val
|
|
126
|
-
this._update(
|
|
124
|
+
this._option.dash = val;
|
|
125
|
+
this._update("dash");
|
|
127
126
|
}
|
|
128
127
|
}
|
|
129
128
|
|
|
130
129
|
get icon() {
|
|
131
|
-
return this._option.icon
|
|
130
|
+
return this._option.icon;
|
|
132
131
|
}
|
|
133
132
|
|
|
134
133
|
set icon(val) {
|
|
135
134
|
if (this._option.icon != val) {
|
|
136
|
-
this._option.icon = val
|
|
137
|
-
this._update(
|
|
135
|
+
this._option.icon = val;
|
|
136
|
+
this._update("icon");
|
|
138
137
|
}
|
|
139
138
|
}
|
|
140
139
|
|
|
141
140
|
get flow() {
|
|
142
|
-
return this._option.flow
|
|
141
|
+
return this._option.flow;
|
|
143
142
|
}
|
|
144
143
|
|
|
145
144
|
set flow(val) {
|
|
146
145
|
if (this._option.flow != val) {
|
|
147
|
-
this._option.flow = val
|
|
148
|
-
this._update(
|
|
146
|
+
this._option.flow = val;
|
|
147
|
+
this._update("flow");
|
|
149
148
|
}
|
|
150
149
|
}
|
|
151
150
|
|
|
151
|
+
get height() {
|
|
152
|
+
return this._option.height;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
set height(val) {
|
|
156
|
+
if (this._option.height != val) {
|
|
157
|
+
this._option.height = val;
|
|
158
|
+
this._update("height");
|
|
159
|
+
}
|
|
160
|
+
}
|
|
152
161
|
|
|
153
162
|
constructor(map: MapCombine, option: Partial<PolylineOption<K>> = {}) {
|
|
154
|
-
super(map, Object.assign({ ...Polyline.option }, option))
|
|
163
|
+
super(map, Object.assign({ ...Polyline.option }, option));
|
|
155
164
|
}
|
|
156
165
|
|
|
157
166
|
static option: PolylineOption<undefined> = {
|
|
158
|
-
name:
|
|
167
|
+
name: "线",
|
|
159
168
|
show: true,
|
|
160
169
|
editable: false,
|
|
161
|
-
cursor:
|
|
170
|
+
cursor: "pointer",
|
|
162
171
|
userdata: undefined,
|
|
163
172
|
silent: false,
|
|
164
173
|
lineWidth: 2,
|
|
165
|
-
stroke:
|
|
174
|
+
stroke: "#FA792A",
|
|
166
175
|
dash: false,
|
|
167
|
-
icon:
|
|
176
|
+
icon: "",
|
|
168
177
|
flow: false,
|
|
169
|
-
|
|
178
|
+
height: 2,
|
|
179
|
+
};
|
|
170
180
|
|
|
171
|
-
private _needUpdate?: Set<string
|
|
181
|
+
private _needUpdate?: Set<string>;
|
|
172
182
|
private _update(key: string) {
|
|
173
183
|
if (this._needUpdate) {
|
|
174
|
-
this._needUpdate.add(key)
|
|
184
|
+
this._needUpdate.add(key);
|
|
175
185
|
} else {
|
|
176
|
-
this._needUpdate = new Set([key])
|
|
186
|
+
this._needUpdate = new Set([key]);
|
|
177
187
|
setTimeout(() => {
|
|
178
|
-
this.event.trigger(
|
|
179
|
-
this._needUpdate = undefined
|
|
188
|
+
this.event.trigger("update", this._needUpdate);
|
|
189
|
+
this._needUpdate = undefined;
|
|
180
190
|
});
|
|
181
191
|
}
|
|
182
192
|
}
|
|
183
193
|
|
|
184
194
|
protected _onDestroy(): void {
|
|
185
|
-
this.event.trigger(
|
|
195
|
+
this.event.trigger("destroy");
|
|
186
196
|
}
|
|
187
197
|
|
|
188
198
|
startEdit() {
|
|
189
|
-
this.event.trigger(
|
|
199
|
+
this.event.trigger("start-edit");
|
|
190
200
|
}
|
|
191
201
|
stopEdit() {
|
|
192
|
-
this.event.trigger(
|
|
202
|
+
this.event.trigger("stop-edit");
|
|
193
203
|
}
|
|
194
|
-
}
|
|
204
|
+
}
|
package/src/basic/ReactPopup.tsx
CHANGED
|
@@ -2,14 +2,13 @@ import { ReactElement } from "react";
|
|
|
2
2
|
import ReactDOM from "react-dom";
|
|
3
3
|
import { MapCombine } from "./MapCombine";
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
export interface ReactPopupOption {
|
|
7
6
|
/** 弹框内容 */
|
|
8
7
|
element: ReactElement;
|
|
9
8
|
/** 层高 */
|
|
10
9
|
zIndex?: number;
|
|
11
10
|
show?: boolean;
|
|
12
|
-
name?: string
|
|
11
|
+
name?: string;
|
|
13
12
|
}
|
|
14
13
|
|
|
15
14
|
export class ReactPopup {
|
|
@@ -17,16 +16,19 @@ export class ReactPopup {
|
|
|
17
16
|
option: ReactPopupOption;
|
|
18
17
|
node: HTMLDivElement;
|
|
19
18
|
map: MapCombine;
|
|
20
|
-
constructor(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
19
|
+
constructor(
|
|
20
|
+
map,
|
|
21
|
+
option: ReactPopupOption = {
|
|
22
|
+
element: <></>,
|
|
23
|
+
zIndex: 10,
|
|
24
|
+
show: true,
|
|
25
|
+
name: "bubble",
|
|
26
|
+
},
|
|
27
|
+
) {
|
|
26
28
|
this.map = map;
|
|
27
29
|
this.dom = document.createElement("div");
|
|
28
30
|
this.option = option;
|
|
29
|
-
const coordinate = map.geographyTcanvas(map.event.geography)
|
|
31
|
+
const coordinate = map.geographyTcanvas(map.event.geography);
|
|
30
32
|
this.dom.style.position = "absolute";
|
|
31
33
|
this.dom.style.top = coordinate[1] + "px";
|
|
32
34
|
this.dom.style.left = coordinate[0] + "px";
|
|
@@ -45,7 +47,7 @@ export class ReactPopup {
|
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
showAt(lon, lat) {
|
|
48
|
-
const coordinate = this.map.geographyTcanvas([lon, lat, 0])
|
|
50
|
+
const coordinate = this.map.geographyTcanvas([lon, lat, 0]);
|
|
49
51
|
this.dom.style.position = "absolute";
|
|
50
52
|
this.dom.style.top = coordinate[1] + "px";
|
|
51
53
|
this.dom.style.left = coordinate[0] + "px";
|