@antv/l7-scene 2.9.36 → 2.9.37-alpha.1
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/es/boxSelect.d.ts +23 -0
- package/es/boxSelect.js +148 -0
- package/es/index.d.ts +6 -1
- package/es/index.js +88 -27
- package/lib/boxSelect.js +119 -0
- package/lib/index.js +67 -19
- package/package.json +10 -9
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { EventEmitter } from 'eventemitter3';
|
|
2
|
+
import { Scene } from './index';
|
|
3
|
+
export declare const BoxSelectEventList: string[];
|
|
4
|
+
export declare type BoxSelectOptions = {
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
export default class BoxSelect extends EventEmitter {
|
|
8
|
+
protected scene: Scene;
|
|
9
|
+
protected options: BoxSelectOptions;
|
|
10
|
+
protected isEnable: boolean;
|
|
11
|
+
protected box: HTMLElement;
|
|
12
|
+
protected startEvent: any;
|
|
13
|
+
protected endEvent: any;
|
|
14
|
+
constructor(scene: Scene, options?: BoxSelectOptions);
|
|
15
|
+
get container(): HTMLElement;
|
|
16
|
+
enable(): void;
|
|
17
|
+
disable(): void;
|
|
18
|
+
protected onDragStart: (e: any) => void;
|
|
19
|
+
protected onDragging: (e: any) => void;
|
|
20
|
+
protected onDragEnd: (e: any) => void;
|
|
21
|
+
protected syncBoxBound(): void;
|
|
22
|
+
protected getLngLatBox(): import("@turf/helpers").BBox;
|
|
23
|
+
}
|
package/es/boxSelect.js
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
4
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
5
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
+
|
|
9
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
10
|
+
|
|
11
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
|
+
|
|
13
|
+
import { DOM, getBBoxFromPoints } from '@antv/l7-utils';
|
|
14
|
+
import { EventEmitter } from 'eventemitter3';
|
|
15
|
+
export var BoxSelectEventList = ['selectstart', 'selecting', 'selectend'];
|
|
16
|
+
|
|
17
|
+
// TODO: 将 BoxSelect 模块放在哪里比较合适
|
|
18
|
+
var BoxSelect = /*#__PURE__*/function (_EventEmitter) {
|
|
19
|
+
_inherits(BoxSelect, _EventEmitter);
|
|
20
|
+
|
|
21
|
+
var _super = _createSuper(BoxSelect);
|
|
22
|
+
|
|
23
|
+
function BoxSelect(scene) {
|
|
24
|
+
var _this;
|
|
25
|
+
|
|
26
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
27
|
+
|
|
28
|
+
_classCallCheck(this, BoxSelect);
|
|
29
|
+
|
|
30
|
+
_this = _super.call(this);
|
|
31
|
+
|
|
32
|
+
_defineProperty(_assertThisInitialized(_this), "isEnable", false);
|
|
33
|
+
|
|
34
|
+
_defineProperty(_assertThisInitialized(_this), "onDragStart", function (e) {
|
|
35
|
+
_this.box.style.display = 'block';
|
|
36
|
+
_this.startEvent = _this.endEvent = e;
|
|
37
|
+
|
|
38
|
+
_this.syncBoxBound();
|
|
39
|
+
|
|
40
|
+
_this.emit('selectstart', _this.getLngLatBox(), _this.startEvent, _this.endEvent);
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
_defineProperty(_assertThisInitialized(_this), "onDragging", function (e) {
|
|
44
|
+
_this.endEvent = e;
|
|
45
|
+
|
|
46
|
+
_this.syncBoxBound();
|
|
47
|
+
|
|
48
|
+
_this.emit('selecting', _this.getLngLatBox(), _this.startEvent, _this.endEvent);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
_defineProperty(_assertThisInitialized(_this), "onDragEnd", function (e) {
|
|
52
|
+
_this.endEvent = e;
|
|
53
|
+
_this.box.style.display = 'none';
|
|
54
|
+
|
|
55
|
+
_this.emit('selectend', _this.getLngLatBox(), _this.startEvent, _this.endEvent);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
_this.scene = scene;
|
|
59
|
+
_this.options = options;
|
|
60
|
+
return _this;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
_createClass(BoxSelect, [{
|
|
64
|
+
key: "container",
|
|
65
|
+
get: function get() {
|
|
66
|
+
return this.scene.getMapService().getMarkerContainer();
|
|
67
|
+
}
|
|
68
|
+
}, {
|
|
69
|
+
key: "enable",
|
|
70
|
+
value: function enable() {
|
|
71
|
+
if (this.isEnable) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
var className = this.options.className;
|
|
76
|
+
this.scene.setMapStatus({
|
|
77
|
+
dragEnable: false
|
|
78
|
+
});
|
|
79
|
+
this.container.style.cursor = 'crosshair';
|
|
80
|
+
|
|
81
|
+
if (!this.box) {
|
|
82
|
+
var box = DOM.create('div', undefined, this.container);
|
|
83
|
+
box.classList.add('l7-select-box');
|
|
84
|
+
|
|
85
|
+
if (className) {
|
|
86
|
+
box.classList.add(className);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
box.style.display = 'none';
|
|
90
|
+
this.box = box;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
this.scene.on('dragstart', this.onDragStart);
|
|
94
|
+
this.scene.on('dragging', this.onDragging);
|
|
95
|
+
this.scene.on('dragend', this.onDragEnd);
|
|
96
|
+
this.isEnable = true;
|
|
97
|
+
}
|
|
98
|
+
}, {
|
|
99
|
+
key: "disable",
|
|
100
|
+
value: function disable() {
|
|
101
|
+
if (!this.isEnable) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
this.scene.setMapStatus({
|
|
106
|
+
dragEnable: true
|
|
107
|
+
});
|
|
108
|
+
this.container.style.cursor = 'auto';
|
|
109
|
+
this.scene.off('dragstart', this.onDragStart);
|
|
110
|
+
this.scene.off('dragging', this.onDragging);
|
|
111
|
+
this.scene.off('dragend', this.onDragEnd);
|
|
112
|
+
this.isEnable = false;
|
|
113
|
+
}
|
|
114
|
+
}, {
|
|
115
|
+
key: "syncBoxBound",
|
|
116
|
+
value: function syncBoxBound() {
|
|
117
|
+
var _this$startEvent = this.startEvent,
|
|
118
|
+
x1 = _this$startEvent.x,
|
|
119
|
+
y1 = _this$startEvent.y;
|
|
120
|
+
var _this$endEvent = this.endEvent,
|
|
121
|
+
x2 = _this$endEvent.x,
|
|
122
|
+
y2 = _this$endEvent.y;
|
|
123
|
+
var left = Math.min(x1, x2);
|
|
124
|
+
var top = Math.min(y1, y2);
|
|
125
|
+
var width = Math.abs(x1 - x2);
|
|
126
|
+
var height = Math.abs(y1 - y2);
|
|
127
|
+
this.box.style.top = "".concat(top, "px");
|
|
128
|
+
this.box.style.left = "".concat(left, "px");
|
|
129
|
+
this.box.style.width = "".concat(width, "px");
|
|
130
|
+
this.box.style.height = "".concat(height, "px");
|
|
131
|
+
}
|
|
132
|
+
}, {
|
|
133
|
+
key: "getLngLatBox",
|
|
134
|
+
value: function getLngLatBox() {
|
|
135
|
+
var _this$startEvent$lngL = this.startEvent.lngLat,
|
|
136
|
+
lng1 = _this$startEvent$lngL.lng,
|
|
137
|
+
lat1 = _this$startEvent$lngL.lat;
|
|
138
|
+
var _this$endEvent$lngLat = this.endEvent.lngLat,
|
|
139
|
+
lng2 = _this$endEvent$lngLat.lng,
|
|
140
|
+
lat2 = _this$endEvent$lngLat.lat;
|
|
141
|
+
return getBBoxFromPoints([[lng1, lat1], [lng2, lat2]]);
|
|
142
|
+
}
|
|
143
|
+
}]);
|
|
144
|
+
|
|
145
|
+
return BoxSelect;
|
|
146
|
+
}(EventEmitter);
|
|
147
|
+
|
|
148
|
+
export { BoxSelect as default };
|
package/es/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
|
|
|
25
25
|
private popupService;
|
|
26
26
|
private fontService;
|
|
27
27
|
private interactionService;
|
|
28
|
+
private boxSelect;
|
|
28
29
|
private container;
|
|
29
30
|
constructor(config: ISceneConfig);
|
|
30
31
|
get map(): unknown;
|
|
@@ -42,6 +43,7 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
|
|
|
42
43
|
registerRenderService(render: any): void;
|
|
43
44
|
setBgColor(color: string): void;
|
|
44
45
|
addLayer(layer: ILayer): void;
|
|
46
|
+
initMask(layer: ILayer): ILayer | undefined;
|
|
45
47
|
addMask(mask: ILayer, layerId: string): void;
|
|
46
48
|
getPickedLayer(): number;
|
|
47
49
|
getLayers(): ILayer[];
|
|
@@ -70,12 +72,13 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
|
|
|
70
72
|
addIconFontGlyphs(fontFamily: string, glyphs: IIconFontGlyph[]): void;
|
|
71
73
|
addControl(ctr: IControl): void;
|
|
72
74
|
removeControl(ctr: IControl): void;
|
|
73
|
-
getControlByName(name: string): IControl | undefined;
|
|
75
|
+
getControlByName(name: string): IControl<any> | undefined;
|
|
74
76
|
addMarker(marker: IMarker): void;
|
|
75
77
|
addMarkerLayer(layer: IMarkerLayer): void;
|
|
76
78
|
removeMarkerLayer(layer: IMarkerLayer): void;
|
|
77
79
|
removeAllMakers(): void;
|
|
78
80
|
addPopup(popup: IPopup): void;
|
|
81
|
+
removePopup(popup: IPopup): void;
|
|
79
82
|
on(type: string, handle: (...args: any[]) => void): void;
|
|
80
83
|
once(type: string, handle: (...args: any[]) => void): void;
|
|
81
84
|
emit(type: string, handle: (...args: any[]) => void): void;
|
|
@@ -106,6 +109,8 @@ declare class Scene implements IPostProcessingPassPluggable, IMapController, ILa
|
|
|
106
109
|
registerPostProcessingPass(constructor: new (...args: any[]) => IPostProcessingPass<unknown>, name: string): void;
|
|
107
110
|
enableShaderPick(): void;
|
|
108
111
|
diasbleShaderPick(): void;
|
|
112
|
+
enableBoxSelect(once?: boolean): void;
|
|
113
|
+
disableBoxSelect(): void;
|
|
109
114
|
getPointSizeRange(): Float32Array;
|
|
110
115
|
private initComponent;
|
|
111
116
|
private initControl;
|
package/es/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import { createLayerContainer, createSceneContainer, SceneEventList, TYPES } fro
|
|
|
7
7
|
import { MaskLayer } from '@antv/l7-layers';
|
|
8
8
|
import { ReglRendererService } from '@antv/l7-renderer';
|
|
9
9
|
import { DOM, isMini } from '@antv/l7-utils';
|
|
10
|
+
import BoxSelect, { BoxSelectEventList } from "./boxSelect";
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
13
|
* 暴露 Scene API
|
|
@@ -45,6 +46,7 @@ var Scene = /*#__PURE__*/function () {
|
|
|
45
46
|
this.markerService = sceneContainer.get(TYPES.IMarkerService);
|
|
46
47
|
this.interactionService = sceneContainer.get(TYPES.IInteractionService);
|
|
47
48
|
this.popupService = sceneContainer.get(TYPES.IPopupService);
|
|
49
|
+
this.boxSelect = new BoxSelect(this, {});
|
|
48
50
|
|
|
49
51
|
if (isMini) {
|
|
50
52
|
this.sceneService.initMiniScene(config);
|
|
@@ -141,36 +143,47 @@ var Scene = /*#__PURE__*/function () {
|
|
|
141
143
|
}, {
|
|
142
144
|
key: "addLayer",
|
|
143
145
|
value: function addLayer(layer) {
|
|
146
|
+
var _this2 = this;
|
|
147
|
+
|
|
144
148
|
// 为当前图层创建一个容器
|
|
145
149
|
// TODO: 初始化的时候设置 容器
|
|
146
150
|
var layerContainer = createLayerContainer(this.container);
|
|
147
151
|
layer.setContainer(layerContainer, this.container);
|
|
148
|
-
this.sceneService.addLayer(layer);
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
var mask = layerConfig.mask,
|
|
154
|
-
maskfence = layerConfig.maskfence,
|
|
155
|
-
_layerConfig$maskColo = layerConfig.maskColor,
|
|
156
|
-
maskColor = _layerConfig$maskColo === void 0 ? '#000' : _layerConfig$maskColo,
|
|
157
|
-
_layerConfig$maskOpac = layerConfig.maskOpacity,
|
|
158
|
-
maskOpacity = _layerConfig$maskOpac === void 0 ? 0 : _layerConfig$maskOpac;
|
|
159
|
-
|
|
160
|
-
if (mask && maskfence) {
|
|
161
|
-
var maskInstance = new MaskLayer().source(maskfence).shape('fill').style({
|
|
162
|
-
color: maskColor,
|
|
163
|
-
opacity: maskOpacity
|
|
164
|
-
});
|
|
165
|
-
this.addMask(maskInstance, layer.id);
|
|
166
|
-
}
|
|
152
|
+
this.sceneService.addLayer(layer); // mask 在 scene loaded 之后执行
|
|
153
|
+
|
|
154
|
+
if (layer.inited) {
|
|
155
|
+
var maskInstance = this.initMask(layer);
|
|
156
|
+
this.addMask(maskInstance, layer.id);
|
|
167
157
|
} else {
|
|
168
|
-
|
|
158
|
+
layer.on('inited', function () {
|
|
159
|
+
var maskInstance = _this2.initMask(layer);
|
|
160
|
+
|
|
161
|
+
_this2.addMask(maskInstance, layer.id);
|
|
162
|
+
});
|
|
169
163
|
}
|
|
170
164
|
}
|
|
165
|
+
}, {
|
|
166
|
+
key: "initMask",
|
|
167
|
+
value: function initMask(layer) {
|
|
168
|
+
var _layer$getLayerConfig = layer.getLayerConfig(),
|
|
169
|
+
mask = _layer$getLayerConfig.mask,
|
|
170
|
+
maskfence = _layer$getLayerConfig.maskfence,
|
|
171
|
+
_layer$getLayerConfig2 = _layer$getLayerConfig.maskColor,
|
|
172
|
+
maskColor = _layer$getLayerConfig2 === void 0 ? '#000' : _layer$getLayerConfig2,
|
|
173
|
+
_layer$getLayerConfig3 = _layer$getLayerConfig.maskOpacity,
|
|
174
|
+
maskOpacity = _layer$getLayerConfig3 === void 0 ? 0 : _layer$getLayerConfig3;
|
|
175
|
+
|
|
176
|
+
if (!mask) return undefined;
|
|
177
|
+
var maskInstance = new MaskLayer().source(maskfence).shape('fill').style({
|
|
178
|
+
color: maskColor,
|
|
179
|
+
opacity: maskOpacity
|
|
180
|
+
});
|
|
181
|
+
return maskInstance;
|
|
182
|
+
}
|
|
171
183
|
}, {
|
|
172
184
|
key: "addMask",
|
|
173
185
|
value: function addMask(mask, layerId) {
|
|
186
|
+
if (!mask) return;
|
|
174
187
|
var parent = this.getLayer(layerId);
|
|
175
188
|
|
|
176
189
|
if (parent) {
|
|
@@ -237,14 +250,14 @@ var Scene = /*#__PURE__*/function () {
|
|
|
237
250
|
}, {
|
|
238
251
|
key: "addIconFonts",
|
|
239
252
|
value: function addIconFonts(options) {
|
|
240
|
-
var
|
|
253
|
+
var _this3 = this;
|
|
241
254
|
|
|
242
255
|
options.forEach(function (_ref) {
|
|
243
256
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
244
257
|
name = _ref2[0],
|
|
245
258
|
fontUnicode = _ref2[1];
|
|
246
259
|
|
|
247
|
-
|
|
260
|
+
_this3.fontService.addIconFont(name, fontUnicode);
|
|
248
261
|
});
|
|
249
262
|
}
|
|
250
263
|
/**
|
|
@@ -256,10 +269,10 @@ var Scene = /*#__PURE__*/function () {
|
|
|
256
269
|
}, {
|
|
257
270
|
key: "addFontFace",
|
|
258
271
|
value: function addFontFace(fontFamily, fontPath) {
|
|
259
|
-
var
|
|
272
|
+
var _this4 = this;
|
|
260
273
|
|
|
261
274
|
this.fontService.once('fontloaded', function (e) {
|
|
262
|
-
|
|
275
|
+
_this4.emit('fontloaded', e);
|
|
263
276
|
});
|
|
264
277
|
this.fontService.addFontFace(fontFamily, fontPath);
|
|
265
278
|
}
|
|
@@ -329,15 +342,36 @@ var Scene = /*#__PURE__*/function () {
|
|
|
329
342
|
value: function addPopup(popup) {
|
|
330
343
|
this.popupService.addPopup(popup);
|
|
331
344
|
}
|
|
345
|
+
}, {
|
|
346
|
+
key: "removePopup",
|
|
347
|
+
value: function removePopup(popup) {
|
|
348
|
+
this.popupService.removePopup(popup);
|
|
349
|
+
}
|
|
332
350
|
}, {
|
|
333
351
|
key: "on",
|
|
334
352
|
value: function on(type, handle) {
|
|
335
|
-
|
|
353
|
+
if (BoxSelectEventList.includes(type)) {
|
|
354
|
+
var _this$boxSelect;
|
|
355
|
+
|
|
356
|
+
(_this$boxSelect = this.boxSelect) === null || _this$boxSelect === void 0 ? void 0 : _this$boxSelect.on(type, handle);
|
|
357
|
+
} else if (SceneEventList.includes(type)) {
|
|
358
|
+
this.sceneService.on(type, handle);
|
|
359
|
+
} else {
|
|
360
|
+
this.mapService.on(type, handle);
|
|
361
|
+
}
|
|
336
362
|
}
|
|
337
363
|
}, {
|
|
338
364
|
key: "once",
|
|
339
365
|
value: function once(type, handle) {
|
|
340
|
-
|
|
366
|
+
if (BoxSelectEventList.includes(type)) {
|
|
367
|
+
var _this$boxSelect2;
|
|
368
|
+
|
|
369
|
+
(_this$boxSelect2 = this.boxSelect) === null || _this$boxSelect2 === void 0 ? void 0 : _this$boxSelect2.once(type, handle);
|
|
370
|
+
} else if (SceneEventList.includes(type)) {
|
|
371
|
+
this.sceneService.once(type, handle);
|
|
372
|
+
} else {
|
|
373
|
+
this.mapService.once(type, handle);
|
|
374
|
+
}
|
|
341
375
|
}
|
|
342
376
|
}, {
|
|
343
377
|
key: "emit",
|
|
@@ -347,7 +381,15 @@ var Scene = /*#__PURE__*/function () {
|
|
|
347
381
|
}, {
|
|
348
382
|
key: "off",
|
|
349
383
|
value: function off(type, handle) {
|
|
350
|
-
|
|
384
|
+
if (BoxSelectEventList.includes(type)) {
|
|
385
|
+
var _this$boxSelect3;
|
|
386
|
+
|
|
387
|
+
(_this$boxSelect3 = this.boxSelect) === null || _this$boxSelect3 === void 0 ? void 0 : _this$boxSelect3.off(type, handle);
|
|
388
|
+
} else if (SceneEventList.includes(type)) {
|
|
389
|
+
this.sceneService.off(type, handle);
|
|
390
|
+
} else {
|
|
391
|
+
this.mapService.off(type, handle);
|
|
392
|
+
}
|
|
351
393
|
} // implements IMapController
|
|
352
394
|
|
|
353
395
|
}, {
|
|
@@ -488,6 +530,25 @@ var Scene = /*#__PURE__*/function () {
|
|
|
488
530
|
key: "diasbleShaderPick",
|
|
489
531
|
value: function diasbleShaderPick() {
|
|
490
532
|
this.layerService.disableShaderPick();
|
|
533
|
+
}
|
|
534
|
+
}, {
|
|
535
|
+
key: "enableBoxSelect",
|
|
536
|
+
value: function enableBoxSelect() {
|
|
537
|
+
var _this5 = this;
|
|
538
|
+
|
|
539
|
+
var once = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
|
540
|
+
this.boxSelect.enable();
|
|
541
|
+
|
|
542
|
+
if (once) {
|
|
543
|
+
this.boxSelect.once('selectend', function () {
|
|
544
|
+
_this5.disableBoxSelect();
|
|
545
|
+
});
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
}, {
|
|
549
|
+
key: "disableBoxSelect",
|
|
550
|
+
value: function disableBoxSelect() {
|
|
551
|
+
this.boxSelect.disable();
|
|
491
552
|
} // get current point size info
|
|
492
553
|
|
|
493
554
|
}, {
|
package/lib/boxSelect.js
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/boxSelect.ts
|
|
20
|
+
var boxSelect_exports = {};
|
|
21
|
+
__export(boxSelect_exports, {
|
|
22
|
+
BoxSelectEventList: () => BoxSelectEventList,
|
|
23
|
+
default: () => BoxSelect
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(boxSelect_exports);
|
|
26
|
+
var import_l7_utils = require("@antv/l7-utils");
|
|
27
|
+
var import_eventemitter3 = require("eventemitter3");
|
|
28
|
+
var BoxSelectEventList = ["selectstart", "selecting", "selectend"];
|
|
29
|
+
var BoxSelect = class extends import_eventemitter3.EventEmitter {
|
|
30
|
+
constructor(scene, options = {}) {
|
|
31
|
+
super();
|
|
32
|
+
this.isEnable = false;
|
|
33
|
+
this.onDragStart = (e) => {
|
|
34
|
+
this.box.style.display = "block";
|
|
35
|
+
this.startEvent = this.endEvent = e;
|
|
36
|
+
this.syncBoxBound();
|
|
37
|
+
this.emit("selectstart", this.getLngLatBox(), this.startEvent, this.endEvent);
|
|
38
|
+
};
|
|
39
|
+
this.onDragging = (e) => {
|
|
40
|
+
this.endEvent = e;
|
|
41
|
+
this.syncBoxBound();
|
|
42
|
+
this.emit("selecting", this.getLngLatBox(), this.startEvent, this.endEvent);
|
|
43
|
+
};
|
|
44
|
+
this.onDragEnd = (e) => {
|
|
45
|
+
this.endEvent = e;
|
|
46
|
+
this.box.style.display = "none";
|
|
47
|
+
this.emit("selectend", this.getLngLatBox(), this.startEvent, this.endEvent);
|
|
48
|
+
};
|
|
49
|
+
this.scene = scene;
|
|
50
|
+
this.options = options;
|
|
51
|
+
}
|
|
52
|
+
get container() {
|
|
53
|
+
return this.scene.getMapService().getMarkerContainer();
|
|
54
|
+
}
|
|
55
|
+
enable() {
|
|
56
|
+
if (this.isEnable) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const { className } = this.options;
|
|
60
|
+
this.scene.setMapStatus({
|
|
61
|
+
dragEnable: false
|
|
62
|
+
});
|
|
63
|
+
this.container.style.cursor = "crosshair";
|
|
64
|
+
if (!this.box) {
|
|
65
|
+
const box = import_l7_utils.DOM.create("div", void 0, this.container);
|
|
66
|
+
box.classList.add("l7-select-box");
|
|
67
|
+
if (className) {
|
|
68
|
+
box.classList.add(className);
|
|
69
|
+
}
|
|
70
|
+
box.style.display = "none";
|
|
71
|
+
this.box = box;
|
|
72
|
+
}
|
|
73
|
+
this.scene.on("dragstart", this.onDragStart);
|
|
74
|
+
this.scene.on("dragging", this.onDragging);
|
|
75
|
+
this.scene.on("dragend", this.onDragEnd);
|
|
76
|
+
this.isEnable = true;
|
|
77
|
+
}
|
|
78
|
+
disable() {
|
|
79
|
+
if (!this.isEnable) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
this.scene.setMapStatus({
|
|
83
|
+
dragEnable: true
|
|
84
|
+
});
|
|
85
|
+
this.container.style.cursor = "auto";
|
|
86
|
+
this.scene.off("dragstart", this.onDragStart);
|
|
87
|
+
this.scene.off("dragging", this.onDragging);
|
|
88
|
+
this.scene.off("dragend", this.onDragEnd);
|
|
89
|
+
this.isEnable = false;
|
|
90
|
+
}
|
|
91
|
+
syncBoxBound() {
|
|
92
|
+
const { x: x1, y: y1 } = this.startEvent;
|
|
93
|
+
const { x: x2, y: y2 } = this.endEvent;
|
|
94
|
+
const left = Math.min(x1, x2);
|
|
95
|
+
const top = Math.min(y1, y2);
|
|
96
|
+
const width = Math.abs(x1 - x2);
|
|
97
|
+
const height = Math.abs(y1 - y2);
|
|
98
|
+
this.box.style.top = `${top}px`;
|
|
99
|
+
this.box.style.left = `${left}px`;
|
|
100
|
+
this.box.style.width = `${width}px`;
|
|
101
|
+
this.box.style.height = `${height}px`;
|
|
102
|
+
}
|
|
103
|
+
getLngLatBox() {
|
|
104
|
+
const {
|
|
105
|
+
lngLat: { lng: lng1, lat: lat1 }
|
|
106
|
+
} = this.startEvent;
|
|
107
|
+
const {
|
|
108
|
+
lngLat: { lng: lng2, lat: lat2 }
|
|
109
|
+
} = this.endEvent;
|
|
110
|
+
return (0, import_l7_utils.getBBoxFromPoints)([
|
|
111
|
+
[lng1, lat1],
|
|
112
|
+
[lng2, lat2]
|
|
113
|
+
]);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
117
|
+
0 && (module.exports = {
|
|
118
|
+
BoxSelectEventList
|
|
119
|
+
});
|
package/lib/index.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
1
2
|
var __defProp = Object.defineProperty;
|
|
2
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
4
6
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
7
|
var __export = (target, all) => {
|
|
6
8
|
for (var name in all)
|
|
@@ -14,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
14
16
|
}
|
|
15
17
|
return to;
|
|
16
18
|
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
17
20
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
21
|
|
|
19
22
|
// src/index.ts
|
|
@@ -27,6 +30,7 @@ var import_l7_core = require("@antv/l7-core");
|
|
|
27
30
|
var import_l7_layers = require("@antv/l7-layers");
|
|
28
31
|
var import_l7_renderer = require("@antv/l7-renderer");
|
|
29
32
|
var import_l7_utils = require("@antv/l7-utils");
|
|
33
|
+
var import_boxSelect = __toESM(require("./boxSelect"));
|
|
30
34
|
var Scene = class {
|
|
31
35
|
constructor(config) {
|
|
32
36
|
const { id, map, canvas, hasBaseMap } = config;
|
|
@@ -43,6 +47,7 @@ var Scene = class {
|
|
|
43
47
|
this.markerService = sceneContainer.get(import_l7_core.TYPES.IMarkerService);
|
|
44
48
|
this.interactionService = sceneContainer.get(import_l7_core.TYPES.IInteractionService);
|
|
45
49
|
this.popupService = sceneContainer.get(import_l7_core.TYPES.IPopupService);
|
|
50
|
+
this.boxSelect = new import_boxSelect.default(this, {});
|
|
46
51
|
if (import_l7_utils.isMini) {
|
|
47
52
|
this.sceneService.initMiniScene(config);
|
|
48
53
|
} else {
|
|
@@ -105,26 +110,34 @@ var Scene = class {
|
|
|
105
110
|
const layerContainer = (0, import_l7_core.createLayerContainer)(this.container);
|
|
106
111
|
layer.setContainer(layerContainer, this.container);
|
|
107
112
|
this.sceneService.addLayer(layer);
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
mask,
|
|
112
|
-
maskfence,
|
|
113
|
-
maskColor = "#000",
|
|
114
|
-
maskOpacity = 0
|
|
115
|
-
} = layerConfig;
|
|
116
|
-
if (mask && maskfence) {
|
|
117
|
-
const maskInstance = new import_l7_layers.MaskLayer().source(maskfence).shape("fill").style({
|
|
118
|
-
color: maskColor,
|
|
119
|
-
opacity: maskOpacity
|
|
120
|
-
});
|
|
121
|
-
this.addMask(maskInstance, layer.id);
|
|
122
|
-
}
|
|
113
|
+
if (layer.inited) {
|
|
114
|
+
const maskInstance = this.initMask(layer);
|
|
115
|
+
this.addMask(maskInstance, layer.id);
|
|
123
116
|
} else {
|
|
124
|
-
|
|
117
|
+
layer.on("inited", () => {
|
|
118
|
+
const maskInstance = this.initMask(layer);
|
|
119
|
+
this.addMask(maskInstance, layer.id);
|
|
120
|
+
});
|
|
125
121
|
}
|
|
126
122
|
}
|
|
123
|
+
initMask(layer) {
|
|
124
|
+
const {
|
|
125
|
+
mask,
|
|
126
|
+
maskfence,
|
|
127
|
+
maskColor = "#000",
|
|
128
|
+
maskOpacity = 0
|
|
129
|
+
} = layer.getLayerConfig();
|
|
130
|
+
if (!mask)
|
|
131
|
+
return void 0;
|
|
132
|
+
const maskInstance = new import_l7_layers.MaskLayer().source(maskfence).shape("fill").style({
|
|
133
|
+
color: maskColor,
|
|
134
|
+
opacity: maskOpacity
|
|
135
|
+
});
|
|
136
|
+
return maskInstance;
|
|
137
|
+
}
|
|
127
138
|
addMask(mask, layerId) {
|
|
139
|
+
if (!mask)
|
|
140
|
+
return;
|
|
128
141
|
const parent = this.getLayer(layerId);
|
|
129
142
|
if (parent) {
|
|
130
143
|
const layerContainer = (0, import_l7_core.createLayerContainer)(this.container);
|
|
@@ -213,17 +226,41 @@ var Scene = class {
|
|
|
213
226
|
addPopup(popup) {
|
|
214
227
|
this.popupService.addPopup(popup);
|
|
215
228
|
}
|
|
229
|
+
removePopup(popup) {
|
|
230
|
+
this.popupService.removePopup(popup);
|
|
231
|
+
}
|
|
216
232
|
on(type, handle) {
|
|
217
|
-
|
|
233
|
+
var _a;
|
|
234
|
+
if (import_boxSelect.BoxSelectEventList.includes(type)) {
|
|
235
|
+
(_a = this.boxSelect) == null ? void 0 : _a.on(type, handle);
|
|
236
|
+
} else if (import_l7_core.SceneEventList.includes(type)) {
|
|
237
|
+
this.sceneService.on(type, handle);
|
|
238
|
+
} else {
|
|
239
|
+
this.mapService.on(type, handle);
|
|
240
|
+
}
|
|
218
241
|
}
|
|
219
242
|
once(type, handle) {
|
|
220
|
-
|
|
243
|
+
var _a;
|
|
244
|
+
if (import_boxSelect.BoxSelectEventList.includes(type)) {
|
|
245
|
+
(_a = this.boxSelect) == null ? void 0 : _a.once(type, handle);
|
|
246
|
+
} else if (import_l7_core.SceneEventList.includes(type)) {
|
|
247
|
+
this.sceneService.once(type, handle);
|
|
248
|
+
} else {
|
|
249
|
+
this.mapService.once(type, handle);
|
|
250
|
+
}
|
|
221
251
|
}
|
|
222
252
|
emit(type, handle) {
|
|
223
253
|
import_l7_core.SceneEventList.indexOf(type) === -1 ? this.mapService.on(type, handle) : this.sceneService.emit(type, handle);
|
|
224
254
|
}
|
|
225
255
|
off(type, handle) {
|
|
226
|
-
|
|
256
|
+
var _a;
|
|
257
|
+
if (import_boxSelect.BoxSelectEventList.includes(type)) {
|
|
258
|
+
(_a = this.boxSelect) == null ? void 0 : _a.off(type, handle);
|
|
259
|
+
} else if (import_l7_core.SceneEventList.includes(type)) {
|
|
260
|
+
this.sceneService.off(type, handle);
|
|
261
|
+
} else {
|
|
262
|
+
this.mapService.off(type, handle);
|
|
263
|
+
}
|
|
227
264
|
}
|
|
228
265
|
getZoom() {
|
|
229
266
|
return this.mapService.getZoom();
|
|
@@ -307,6 +344,17 @@ var Scene = class {
|
|
|
307
344
|
diasbleShaderPick() {
|
|
308
345
|
this.layerService.disableShaderPick();
|
|
309
346
|
}
|
|
347
|
+
enableBoxSelect(once = true) {
|
|
348
|
+
this.boxSelect.enable();
|
|
349
|
+
if (once) {
|
|
350
|
+
this.boxSelect.once("selectend", () => {
|
|
351
|
+
this.disableBoxSelect();
|
|
352
|
+
});
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
disableBoxSelect() {
|
|
356
|
+
this.boxSelect.disable();
|
|
357
|
+
}
|
|
310
358
|
getPointSizeRange() {
|
|
311
359
|
return this.sceneService.getPointSizeRange();
|
|
312
360
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antv/l7-scene",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.37-alpha.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -23,21 +23,22 @@
|
|
|
23
23
|
"author": "xiaoiver",
|
|
24
24
|
"license": "ISC",
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@antv/l7-component": "2.9.
|
|
27
|
-
"@antv/l7-core": "2.9.
|
|
28
|
-
"@antv/l7-layers": "2.9.
|
|
29
|
-
"@antv/l7-maps": "2.9.
|
|
30
|
-
"@antv/l7-renderer": "2.9.
|
|
31
|
-
"@antv/l7-utils": "2.9.
|
|
26
|
+
"@antv/l7-component": "2.9.37-alpha.1",
|
|
27
|
+
"@antv/l7-core": "2.9.37-alpha.1",
|
|
28
|
+
"@antv/l7-layers": "2.9.37-alpha.1",
|
|
29
|
+
"@antv/l7-maps": "2.9.37-alpha.1",
|
|
30
|
+
"@antv/l7-renderer": "2.9.37-alpha.1",
|
|
31
|
+
"@antv/l7-utils": "2.9.37-alpha.1",
|
|
32
32
|
"@babel/runtime": "^7.7.7",
|
|
33
|
+
"eventemitter3": "^4.0.7",
|
|
33
34
|
"inversify": "^5.0.1",
|
|
34
35
|
"mapbox-gl": "^1.2.1",
|
|
35
36
|
"reflect-metadata": "^0.1.13"
|
|
36
37
|
},
|
|
37
38
|
"devDependencies": {
|
|
38
|
-
"@antv/l7-test-utils": "2.9.
|
|
39
|
+
"@antv/l7-test-utils": "2.9.37-alpha.1"
|
|
39
40
|
},
|
|
40
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "6ac153816c5f28967f71888c2a3e9684eb6e7be8",
|
|
41
42
|
"publishConfig": {
|
|
42
43
|
"access": "public"
|
|
43
44
|
}
|