@antv/l7-component 2.21.1 → 2.21.3
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/assets/iconfont/iconfont.js +6 -6
- package/es/constants/index.js +2 -2
- package/es/control/baseControl/buttonControl.js +109 -144
- package/es/control/baseControl/control.js +212 -258
- package/es/control/baseControl/popperControl.js +67 -95
- package/es/control/baseControl/selectControl.js +132 -178
- package/es/control/exportImage.js +59 -142
- package/es/control/fullscreen.js +69 -100
- package/es/control/geoLocate.js +37 -84
- package/es/control/layerSwitch.js +111 -154
- package/es/control/logo.js +43 -69
- package/es/control/mapTheme.js +57 -98
- package/es/control/mouseLocation.js +37 -69
- package/es/control/scale.js +107 -135
- package/es/control/swipe.js +297 -389
- package/es/control/zoom.js +80 -112
- package/es/css/index.css +10 -7
- package/es/index.js +675 -1
- package/es/marker-layer.js +275 -326
- package/es/marker.js +394 -446
- package/es/popup/layerPopup.js +277 -321
- package/es/popup/popup.js +422 -482
- package/es/utils/anchor.js +6 -6
- package/es/utils/icon.js +4 -4
- package/es/utils/popper.js +180 -196
- package/es/utils/screenfull.js +29 -51
- package/lib/assets/iconfont/iconfont.js +6 -6
- package/lib/constants/index.d.ts +60 -0
- package/lib/constants/index.js +2 -2
- package/lib/control/baseControl/buttonControl.d.ts +60 -0
- package/lib/control/baseControl/buttonControl.js +110 -143
- package/lib/control/baseControl/control.d.ts +112 -0
- package/lib/control/baseControl/control.js +213 -257
- package/lib/control/baseControl/index.d.ts +4 -0
- package/lib/control/baseControl/index.js +5 -5
- package/lib/control/baseControl/popperControl.d.ts +28 -0
- package/lib/control/baseControl/popperControl.js +68 -94
- package/lib/control/baseControl/selectControl.d.ts +53 -0
- package/lib/control/baseControl/selectControl.js +133 -177
- package/lib/control/exportImage.d.ts +19 -0
- package/lib/control/exportImage.js +60 -141
- package/lib/control/fullscreen.d.ts +20 -0
- package/lib/control/fullscreen.js +70 -99
- package/lib/control/geoLocate.d.ts +17 -0
- package/lib/control/geoLocate.js +38 -83
- package/lib/control/layerSwitch.d.ts +27 -0
- package/lib/control/layerSwitch.js +112 -153
- package/lib/control/logo.d.ts +14 -0
- package/lib/control/logo.js +44 -69
- package/lib/control/mapTheme.d.ts +11 -0
- package/lib/control/mapTheme.js +58 -97
- package/lib/control/mouseLocation.d.ts +16 -0
- package/lib/control/mouseLocation.js +38 -68
- package/lib/control/scale.d.ts +35 -0
- package/lib/control/scale.js +108 -134
- package/lib/control/swipe.d.ts +66 -0
- package/lib/control/swipe.js +298 -388
- package/lib/control/zoom.d.ts +39 -0
- package/lib/control/zoom.js +81 -111
- package/lib/css/index.css +10 -7
- package/lib/index.d.ts +19 -0
- package/lib/index.js +691 -17
- package/lib/interface.d.ts +18 -0
- package/lib/marker-layer.d.ts +55 -0
- package/lib/marker-layer.js +277 -324
- package/lib/marker.d.ts +58 -0
- package/lib/marker.js +395 -445
- package/lib/popup/layerPopup.d.ts +99 -0
- package/lib/popup/layerPopup.js +278 -320
- package/lib/popup/popup.d.ts +142 -0
- package/lib/popup/popup.js +423 -481
- package/lib/utils/anchor.d.ts +22 -0
- package/lib/utils/anchor.js +6 -6
- package/lib/utils/icon.d.ts +1 -0
- package/lib/utils/icon.js +6 -5
- package/lib/utils/popper.d.ts +76 -0
- package/lib/utils/popper.js +184 -196
- package/lib/utils/screenfull.d.ts +2 -0
- package/lib/utils/screenfull.js +29 -52
- package/package.json +16 -20
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { PositionType } from '@antv/l7-core';
|
|
2
|
+
import { DOM } from '@antv/l7-utils';
|
|
3
|
+
import type { IControlOption } from './baseControl';
|
|
4
|
+
import { Control } from './baseControl';
|
|
5
|
+
export interface IZoomControlOption extends IControlOption {
|
|
6
|
+
zoomInText: DOM.ELType | string;
|
|
7
|
+
zoomInTitle: string;
|
|
8
|
+
zoomOutText: DOM.ELType | string;
|
|
9
|
+
zoomOutTitle: string;
|
|
10
|
+
showZoom: boolean;
|
|
11
|
+
}
|
|
12
|
+
export { Zoom };
|
|
13
|
+
export default class Zoom extends Control<IZoomControlOption> {
|
|
14
|
+
private disabled;
|
|
15
|
+
private zoomInButton;
|
|
16
|
+
private zoomOutButton;
|
|
17
|
+
private zoomNumDiv;
|
|
18
|
+
getDefault(option: Partial<IZoomControlOption>): {
|
|
19
|
+
position: PositionType;
|
|
20
|
+
name: string;
|
|
21
|
+
zoomInText: SVGSVGElement;
|
|
22
|
+
zoomInTitle: string;
|
|
23
|
+
zoomOutText: SVGSVGElement;
|
|
24
|
+
zoomOutTitle: string;
|
|
25
|
+
showZoom: boolean;
|
|
26
|
+
className?: string | undefined;
|
|
27
|
+
style?: string | undefined;
|
|
28
|
+
};
|
|
29
|
+
setOptions(newOptions: Partial<IZoomControlOption>): void;
|
|
30
|
+
onAdd(): HTMLElement;
|
|
31
|
+
onRemove(): void;
|
|
32
|
+
disable(): this;
|
|
33
|
+
enable(): this;
|
|
34
|
+
zoomIn: () => void;
|
|
35
|
+
zoomOut: () => void;
|
|
36
|
+
private resetButtonGroup;
|
|
37
|
+
private createButton;
|
|
38
|
+
private updateDisabled;
|
|
39
|
+
}
|
package/lib/control/zoom.js
CHANGED
|
@@ -6,132 +6,102 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Zoom = void 0;
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
12
|
-
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
|
|
13
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
15
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
16
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
10
|
var _l7Core = require("@antv/l7-core");
|
|
18
11
|
var _l7Utils = require("@antv/l7-utils");
|
|
19
12
|
var _icon = require("../utils/icon");
|
|
20
13
|
var _baseControl = require("./baseControl");
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
(0,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
33
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "zoomIn", function () {
|
|
34
|
-
if (!_this.disabled && _this.mapsService.getZoom() < _this.mapsService.getMaxZoom()) {
|
|
35
|
-
_this.mapsService.zoomIn();
|
|
14
|
+
class Zoom extends _baseControl.Control {
|
|
15
|
+
constructor(...args) {
|
|
16
|
+
super(...args);
|
|
17
|
+
(0, _defineProperty2.default)(this, "disabled", void 0);
|
|
18
|
+
(0, _defineProperty2.default)(this, "zoomInButton", void 0);
|
|
19
|
+
(0, _defineProperty2.default)(this, "zoomOutButton", void 0);
|
|
20
|
+
(0, _defineProperty2.default)(this, "zoomNumDiv", void 0);
|
|
21
|
+
(0, _defineProperty2.default)(this, "zoomIn", () => {
|
|
22
|
+
if (!this.disabled && this.mapsService.getZoom() < this.mapsService.getMaxZoom()) {
|
|
23
|
+
this.mapsService.zoomIn();
|
|
36
24
|
}
|
|
37
25
|
});
|
|
38
|
-
(0, _defineProperty2.default)(
|
|
39
|
-
if (!
|
|
40
|
-
|
|
26
|
+
(0, _defineProperty2.default)(this, "zoomOut", () => {
|
|
27
|
+
if (!this.disabled && this.mapsService.getZoom() > this.mapsService.getMinZoom()) {
|
|
28
|
+
this.mapsService.zoomOut();
|
|
41
29
|
}
|
|
42
30
|
});
|
|
43
|
-
(0, _defineProperty2.default)(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
if (
|
|
48
|
-
|
|
31
|
+
(0, _defineProperty2.default)(this, "updateDisabled", () => {
|
|
32
|
+
const mapsService = this.mapsService;
|
|
33
|
+
this.zoomInButton.removeAttribute('disabled');
|
|
34
|
+
this.zoomOutButton.removeAttribute('disabled');
|
|
35
|
+
if (this.disabled || mapsService.getZoom() <= mapsService.getMinZoom()) {
|
|
36
|
+
this.zoomOutButton.setAttribute('disabled', 'true');
|
|
49
37
|
}
|
|
50
|
-
if (
|
|
51
|
-
|
|
38
|
+
if (this.controlOption.showZoom && this.zoomNumDiv) {
|
|
39
|
+
this.zoomNumDiv.innerText = String(Math.floor(mapsService.getZoom()));
|
|
52
40
|
}
|
|
53
|
-
if (
|
|
54
|
-
|
|
41
|
+
if (this.disabled || mapsService.getZoom() >= mapsService.getMaxZoom()) {
|
|
42
|
+
this.zoomInButton.setAttribute('disabled', 'true');
|
|
55
43
|
}
|
|
56
44
|
});
|
|
57
|
-
return _this;
|
|
58
45
|
}
|
|
59
|
-
(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
value: function setOptions(newOptions) {
|
|
75
|
-
(0, _get2.default)((0, _getPrototypeOf2.default)(Zoom.prototype), "setOptions", this).call(this, newOptions);
|
|
76
|
-
if (this.checkUpdateOption(newOptions, ['zoomInText', 'zoomInTitle', 'zoomOutText', 'zoomOutTitle', 'showZoom'])) {
|
|
77
|
-
this.resetButtonGroup(this.container);
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}, {
|
|
81
|
-
key: "onAdd",
|
|
82
|
-
value: function onAdd() {
|
|
83
|
-
var container = _l7Utils.DOM.create('div', 'l7-control-zoom');
|
|
84
|
-
this.resetButtonGroup(container);
|
|
85
|
-
this.mapsService.on('zoomend', this.updateDisabled);
|
|
86
|
-
this.mapsService.on('zoomchange', this.updateDisabled);
|
|
87
|
-
return container;
|
|
88
|
-
}
|
|
89
|
-
}, {
|
|
90
|
-
key: "onRemove",
|
|
91
|
-
value: function onRemove() {
|
|
92
|
-
this.mapsService.off('zoomend', this.updateDisabled);
|
|
93
|
-
this.mapsService.off('zoomchange', this.updateDisabled);
|
|
94
|
-
}
|
|
95
|
-
}, {
|
|
96
|
-
key: "disable",
|
|
97
|
-
value: function disable() {
|
|
98
|
-
this.disabled = true;
|
|
99
|
-
this.updateDisabled();
|
|
100
|
-
return this;
|
|
46
|
+
getDefault(option) {
|
|
47
|
+
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, super.getDefault(option)), {}, {
|
|
48
|
+
position: _l7Core.PositionType.BOTTOMRIGHT,
|
|
49
|
+
name: 'zoom',
|
|
50
|
+
zoomInText: (0, _icon.createL7Icon)('l7-icon-enlarge'),
|
|
51
|
+
zoomInTitle: 'Zoom in',
|
|
52
|
+
zoomOutText: (0, _icon.createL7Icon)('l7-icon-narrow'),
|
|
53
|
+
zoomOutTitle: 'Zoom out',
|
|
54
|
+
showZoom: false
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
setOptions(newOptions) {
|
|
58
|
+
super.setOptions(newOptions);
|
|
59
|
+
if (this.checkUpdateOption(newOptions, ['zoomInText', 'zoomInTitle', 'zoomOutText', 'zoomOutTitle', 'showZoom'])) {
|
|
60
|
+
this.resetButtonGroup(this.container);
|
|
101
61
|
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
62
|
+
}
|
|
63
|
+
onAdd() {
|
|
64
|
+
const container = _l7Utils.DOM.create('div', 'l7-control-zoom');
|
|
65
|
+
this.resetButtonGroup(container);
|
|
66
|
+
this.mapsService.on('zoomend', this.updateDisabled);
|
|
67
|
+
this.mapsService.on('zoomchange', this.updateDisabled);
|
|
68
|
+
return container;
|
|
69
|
+
}
|
|
70
|
+
onRemove() {
|
|
71
|
+
this.mapsService.off('zoomend', this.updateDisabled);
|
|
72
|
+
this.mapsService.off('zoomchange', this.updateDisabled);
|
|
73
|
+
}
|
|
74
|
+
disable() {
|
|
75
|
+
this.disabled = true;
|
|
76
|
+
this.updateDisabled();
|
|
77
|
+
return this;
|
|
78
|
+
}
|
|
79
|
+
enable() {
|
|
80
|
+
this.disabled = false;
|
|
81
|
+
this.updateDisabled();
|
|
82
|
+
return this;
|
|
83
|
+
}
|
|
84
|
+
resetButtonGroup(container) {
|
|
85
|
+
_l7Utils.DOM.clearChildren(container);
|
|
86
|
+
this.zoomInButton = this.createButton(this.controlOption.zoomInText, this.controlOption.zoomInTitle, 'l7-button-control', container, this.zoomIn);
|
|
87
|
+
if (this.controlOption.showZoom) {
|
|
88
|
+
this.zoomNumDiv = this.createButton('0', '', 'l7-button-control l7-control-zoom__number', container);
|
|
108
89
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
this.updateDisabled();
|
|
90
|
+
this.zoomOutButton = this.createButton(this.controlOption.zoomOutText, this.controlOption.zoomOutTitle, 'l7-button-control', container, this.zoomOut);
|
|
91
|
+
this.updateDisabled();
|
|
92
|
+
}
|
|
93
|
+
createButton(html, tile, className, container, fn) {
|
|
94
|
+
const link = _l7Utils.DOM.create('button', className, container);
|
|
95
|
+
if (typeof html === 'string') {
|
|
96
|
+
link.innerHTML = html;
|
|
97
|
+
} else {
|
|
98
|
+
link.append(html);
|
|
119
99
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
var link = _l7Utils.DOM.create('button', className, container);
|
|
124
|
-
if (typeof html === 'string') {
|
|
125
|
-
link.innerHTML = html;
|
|
126
|
-
} else {
|
|
127
|
-
link.append(html);
|
|
128
|
-
}
|
|
129
|
-
link.title = tile;
|
|
130
|
-
if (fn) {
|
|
131
|
-
link.addEventListener('click', fn);
|
|
132
|
-
}
|
|
133
|
-
return link;
|
|
100
|
+
link.title = tile;
|
|
101
|
+
if (fn) {
|
|
102
|
+
link.addEventListener('click', fn);
|
|
134
103
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
}
|
|
104
|
+
return link;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
exports.default = exports.Zoom = Zoom;
|
package/lib/css/index.css
CHANGED
|
@@ -23,7 +23,11 @@
|
|
|
23
23
|
height: 30px;
|
|
24
24
|
margin-top: 5px;
|
|
25
25
|
margin-left: 5px;
|
|
26
|
-
font:
|
|
26
|
+
font:
|
|
27
|
+
12px 'Helvetica Neue',
|
|
28
|
+
Arial,
|
|
29
|
+
Helvetica,
|
|
30
|
+
sans-serif;
|
|
27
31
|
text-align: center;
|
|
28
32
|
background-color: rgba(110, 204, 57, 0.6);
|
|
29
33
|
border-radius: 15px;
|
|
@@ -53,7 +57,11 @@
|
|
|
53
57
|
box-sizing: border-box;
|
|
54
58
|
}
|
|
55
59
|
.l7-control-container {
|
|
56
|
-
font:
|
|
60
|
+
font:
|
|
61
|
+
12px/1.5 'Helvetica Neue',
|
|
62
|
+
Arial,
|
|
63
|
+
Helvetica,
|
|
64
|
+
sans-serif;
|
|
57
65
|
}
|
|
58
66
|
.l7-control-container .l7-control {
|
|
59
67
|
position: relative;
|
|
@@ -322,11 +330,6 @@
|
|
|
322
330
|
top: 0;
|
|
323
331
|
right: 0;
|
|
324
332
|
}
|
|
325
|
-
.l7-select-control--image .l7-select-control-item input[type='radio'] {
|
|
326
|
-
position: absolute;
|
|
327
|
-
top: 0;
|
|
328
|
-
right: 0;
|
|
329
|
-
}
|
|
330
333
|
.l7-select-control--image .l7-select-control-item .l7-select-control-item-row {
|
|
331
334
|
display: flex;
|
|
332
335
|
align-items: center;
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import Marker from './marker';
|
|
2
|
+
import MarkerLayer from './marker-layer';
|
|
3
|
+
import './assets/iconfont/iconfont.js';
|
|
4
|
+
import './css/index.css';
|
|
5
|
+
export * from './control/baseControl';
|
|
6
|
+
export { ExportImage, type IExportImageControlOption, } from './control/exportImage';
|
|
7
|
+
export { Fullscreen, type IFullscreenControlOption, } from './control/fullscreen';
|
|
8
|
+
export { GeoLocate, type IGeoLocateOption } from './control/geoLocate';
|
|
9
|
+
export { LayerSwitch, type ILayerSwitchOption } from './control/layerSwitch';
|
|
10
|
+
export { Logo, type ILogoControlOption } from './control/logo';
|
|
11
|
+
export { MapTheme } from './control/mapTheme';
|
|
12
|
+
export { MouseLocation, type IMouseLocationControlOption, } from './control/mouseLocation';
|
|
13
|
+
export { Scale, type IScaleControlOption } from './control/scale';
|
|
14
|
+
export { Swipe, type ISwipeControlOption } from './control/swipe';
|
|
15
|
+
export { Zoom, type IZoomControlOption } from './control/zoom';
|
|
16
|
+
export * from './interface';
|
|
17
|
+
export { LayerPopup, type ILayerPopupOption, type LayerField, type LayerPopupConfigItem, } from './popup/layerPopup';
|
|
18
|
+
export { Popup } from './popup/popup';
|
|
19
|
+
export { Marker, MarkerLayer };
|