@antv/l7-component 2.21.0 → 2.21.2
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 -393
- package/es/control/zoom.js +80 -112
- package/es/css/index.css +10 -7
- package/es/index.js +667 -1
- package/es/marker-layer.js +274 -326
- package/es/marker.d.ts +0 -2
- package/es/marker.js +394 -453
- 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 -392
- 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 +683 -17
- package/lib/interface.d.ts +18 -0
- package/lib/marker-layer.d.ts +55 -0
- package/lib/marker-layer.js +276 -324
- package/lib/marker.d.ts +58 -0
- package/lib/marker.js +395 -452
- 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
- package/CHANGELOG.md +0 -325
- package/LICENSE.md +0 -21
package/es/popup/layerPopup.js
CHANGED
|
@@ -1,368 +1,324 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
-
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
|
-
import _get from "@babel/runtime/helpers/esm/get";
|
|
6
|
-
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
7
|
-
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
8
|
-
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
9
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
10
|
-
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); }; }
|
|
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
3
|
import { DOM, lodashUtil } from '@antv/l7-utils';
|
|
13
4
|
import Popup from "./popup";
|
|
14
|
-
|
|
5
|
+
const {
|
|
6
|
+
get
|
|
7
|
+
} = lodashUtil;
|
|
15
8
|
export { LayerPopup };
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
function LayerPopup() {
|
|
20
|
-
var _this;
|
|
21
|
-
_classCallCheck(this, LayerPopup);
|
|
22
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
23
|
-
args[_key] = arguments[_key];
|
|
24
|
-
}
|
|
25
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
9
|
+
export default class LayerPopup extends Popup {
|
|
10
|
+
constructor(...args) {
|
|
11
|
+
super(...args);
|
|
26
12
|
/**
|
|
27
13
|
* 用于统计当前帧当中,layer 被点击的次数
|
|
28
14
|
*/
|
|
29
|
-
_defineProperty(
|
|
15
|
+
_defineProperty(this, "layerClickCountByFrame", 0);
|
|
30
16
|
/**
|
|
31
17
|
* 用于保存图层对应的事件回调以及配置信息
|
|
32
18
|
* @protected
|
|
33
19
|
*/
|
|
34
|
-
_defineProperty(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
_defineProperty(this, "layerConfigMap", new WeakMap());
|
|
21
|
+
/**
|
|
22
|
+
* 当期正在展示的图层以及对应元素 id 的信息
|
|
23
|
+
* @protected
|
|
24
|
+
*/
|
|
25
|
+
_defineProperty(this, "displayFeatureInfo", void 0);
|
|
26
|
+
_defineProperty(this, "onLayerClick", (layer, e) => {
|
|
27
|
+
requestAnimationFrame(() => {
|
|
28
|
+
if (this.popupOption.closeOnClick) {
|
|
29
|
+
this.layerClickCountByFrame++;
|
|
39
30
|
}
|
|
40
|
-
if (
|
|
41
|
-
|
|
31
|
+
if (this.isShow && this.isSameFeature(layer, e.featureId)) {
|
|
32
|
+
this.hide();
|
|
42
33
|
} else {
|
|
43
|
-
|
|
44
|
-
title
|
|
45
|
-
content
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
34
|
+
const {
|
|
35
|
+
title,
|
|
36
|
+
content
|
|
37
|
+
} = this.getLayerInfoFrag(layer, e);
|
|
38
|
+
this.setDOMContent(content);
|
|
39
|
+
this.setLnglat(e.lngLat);
|
|
40
|
+
this.setTitle(title);
|
|
41
|
+
this.setDisplayFeatureInfo({
|
|
42
|
+
layer,
|
|
51
43
|
featureId: e.featureId
|
|
52
44
|
});
|
|
53
|
-
|
|
45
|
+
this.show();
|
|
54
46
|
}
|
|
55
47
|
});
|
|
56
48
|
});
|
|
57
|
-
_defineProperty(
|
|
58
|
-
|
|
59
|
-
requestAnimationFrame(
|
|
60
|
-
if (!
|
|
61
|
-
|
|
49
|
+
_defineProperty(this, "onSceneClick", () => {
|
|
50
|
+
this.layerClickCountByFrame = 0;
|
|
51
|
+
requestAnimationFrame(() => {
|
|
52
|
+
if (!this.layerClickCountByFrame) {
|
|
53
|
+
this.hide();
|
|
62
54
|
}
|
|
63
55
|
});
|
|
64
56
|
});
|
|
65
|
-
_defineProperty(
|
|
66
|
-
|
|
67
|
-
|
|
57
|
+
_defineProperty(this, "onLayerHide", () => {
|
|
58
|
+
this.hide();
|
|
59
|
+
this.setDisplayFeatureInfo(undefined);
|
|
68
60
|
});
|
|
69
61
|
/**
|
|
70
62
|
* 覆盖 Popup 中的默认的 closeOnClick 行为
|
|
71
63
|
*/
|
|
72
64
|
// tslint:disable-next-line:no-empty
|
|
73
|
-
_defineProperty(
|
|
74
|
-
return _this;
|
|
65
|
+
_defineProperty(this, "updateCloseOnClick", () => {});
|
|
75
66
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
67
|
+
get layerConfigItems() {
|
|
68
|
+
var _ref;
|
|
69
|
+
const {
|
|
70
|
+
config,
|
|
71
|
+
items
|
|
72
|
+
} = this.popupOption;
|
|
73
|
+
return (_ref = config !== null && config !== void 0 ? config : items) !== null && _ref !== void 0 ? _ref : [];
|
|
74
|
+
}
|
|
75
|
+
addTo(scene) {
|
|
76
|
+
super.addTo(scene);
|
|
77
|
+
this.bindLayerEvent();
|
|
78
|
+
this.hide();
|
|
79
|
+
return this;
|
|
80
|
+
}
|
|
81
|
+
remove() {
|
|
82
|
+
super.remove();
|
|
83
|
+
this.unbindLayerEvent();
|
|
84
|
+
return this;
|
|
85
|
+
}
|
|
86
|
+
setOptions(option) {
|
|
87
|
+
this.unbindLayerEvent();
|
|
88
|
+
const newOption = _objectSpread({}, option);
|
|
89
|
+
const trigger = newOption.trigger || this.popupOption.trigger;
|
|
90
|
+
const items = newOption.items || this.popupOption.items;
|
|
91
|
+
const isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
|
|
92
|
+
newOption.followCursor = trigger === 'hover' && !isEmptyItems;
|
|
93
|
+
const isShow = this.isShow;
|
|
94
|
+
super.setOptions(newOption);
|
|
95
|
+
this.bindLayerEvent();
|
|
96
|
+
if (isEmptyItems || !isShow) {
|
|
96
97
|
this.hide();
|
|
97
|
-
return this;
|
|
98
|
-
}
|
|
99
|
-
}, {
|
|
100
|
-
key: "remove",
|
|
101
|
-
value: function remove() {
|
|
102
|
-
_get(_getPrototypeOf(LayerPopup.prototype), "remove", this).call(this);
|
|
103
|
-
this.unbindLayerEvent();
|
|
104
|
-
return this;
|
|
105
|
-
}
|
|
106
|
-
}, {
|
|
107
|
-
key: "setOptions",
|
|
108
|
-
value: function setOptions(option) {
|
|
109
|
-
this.unbindLayerEvent();
|
|
110
|
-
var newOption = _objectSpread({}, option);
|
|
111
|
-
var trigger = newOption.trigger || this.popupOption.trigger;
|
|
112
|
-
var items = newOption.items || this.popupOption.items;
|
|
113
|
-
var isEmptyItems = (items === null || items === void 0 ? void 0 : items.length) === 0;
|
|
114
|
-
newOption.followCursor = trigger === 'hover' && !isEmptyItems;
|
|
115
|
-
var isShow = this.isShow;
|
|
116
|
-
_get(_getPrototypeOf(LayerPopup.prototype), "setOptions", this).call(this, newOption);
|
|
117
|
-
this.bindLayerEvent();
|
|
118
|
-
if (isEmptyItems || !isShow) {
|
|
119
|
-
this.hide();
|
|
120
|
-
}
|
|
121
|
-
return this;
|
|
122
|
-
}
|
|
123
|
-
}, {
|
|
124
|
-
key: "getDefault",
|
|
125
|
-
value: function getDefault(option) {
|
|
126
|
-
var isHoverTrigger = option.trigger === 'hover';
|
|
127
|
-
return _objectSpread(_objectSpread({}, _get(_getPrototypeOf(LayerPopup.prototype), "getDefault", this).call(this, option)), {}, {
|
|
128
|
-
trigger: 'hover',
|
|
129
|
-
followCursor: isHoverTrigger,
|
|
130
|
-
lngLat: {
|
|
131
|
-
lng: 0,
|
|
132
|
-
lat: 0
|
|
133
|
-
},
|
|
134
|
-
offsets: [0, 10],
|
|
135
|
-
closeButton: false,
|
|
136
|
-
closeOnClick: true,
|
|
137
|
-
autoClose: false,
|
|
138
|
-
closeOnEsc: false
|
|
139
|
-
});
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* 绑定对应的图层事件
|
|
144
|
-
* @protected
|
|
145
|
-
*/
|
|
146
|
-
}, {
|
|
147
|
-
key: "bindLayerEvent",
|
|
148
|
-
value: function bindLayerEvent() {
|
|
149
|
-
var _this2 = this;
|
|
150
|
-
var _this$popupOption2 = this.popupOption,
|
|
151
|
-
trigger = _this$popupOption2.trigger,
|
|
152
|
-
closeOnClick = _this$popupOption2.closeOnClick;
|
|
153
|
-
this.layerConfigItems.forEach(function (configItem) {
|
|
154
|
-
var _layer$getSource;
|
|
155
|
-
var layer = _this2.getLayerByConfig(configItem);
|
|
156
|
-
if (!layer) {
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
var layerInfo = _objectSpread({}, configItem);
|
|
160
|
-
if (trigger === 'hover') {
|
|
161
|
-
var onMouseMove = _this2.onLayerMouseMove.bind(_this2, layer);
|
|
162
|
-
var onMouseOut = _this2.onLayerMouseOut.bind(_this2, layer);
|
|
163
|
-
layerInfo.onMouseMove = onMouseMove;
|
|
164
|
-
layerInfo.onMouseOut = onMouseOut;
|
|
165
|
-
layer === null || layer === void 0 || layer.on('mousemove', onMouseMove);
|
|
166
|
-
layer === null || layer === void 0 || layer.on('mouseout', onMouseOut);
|
|
167
|
-
} else {
|
|
168
|
-
var _this2$mapsService;
|
|
169
|
-
var onLayerClick = _this2.onLayerClick.bind(_this2, layer);
|
|
170
|
-
layerInfo.onClick = onLayerClick;
|
|
171
|
-
layer === null || layer === void 0 || layer.on('click', onLayerClick);
|
|
172
|
-
var mapContainer = (_this2$mapsService = _this2.mapsService) === null || _this2$mapsService === void 0 ? void 0 : _this2$mapsService.getMapContainer();
|
|
173
|
-
if (mapContainer && closeOnClick) {
|
|
174
|
-
mapContainer.addEventListener('click', _this2.onSceneClick);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
var source = layer === null || layer === void 0 || (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
|
|
178
|
-
var onSourceUpdate = _this2.onSourceUpdate.bind(_this2);
|
|
179
|
-
source === null || source === void 0 || source.on('update', onSourceUpdate);
|
|
180
|
-
layerInfo.onSourceUpdate = onSourceUpdate;
|
|
181
|
-
_this2.layerConfigMap.set(layer, layerInfo);
|
|
182
|
-
});
|
|
183
98
|
}
|
|
99
|
+
return this;
|
|
100
|
+
}
|
|
101
|
+
getDefault(option) {
|
|
102
|
+
const isHoverTrigger = option.trigger === 'hover';
|
|
103
|
+
return _objectSpread(_objectSpread({}, super.getDefault(option)), {}, {
|
|
104
|
+
trigger: 'hover',
|
|
105
|
+
followCursor: isHoverTrigger,
|
|
106
|
+
lngLat: {
|
|
107
|
+
lng: 0,
|
|
108
|
+
lat: 0
|
|
109
|
+
},
|
|
110
|
+
offsets: [0, 10],
|
|
111
|
+
closeButton: false,
|
|
112
|
+
closeOnClick: true,
|
|
113
|
+
autoClose: false,
|
|
114
|
+
closeOnEsc: false
|
|
115
|
+
});
|
|
116
|
+
}
|
|
184
117
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
}
|
|
217
|
-
var mapContainer = (_this3$mapsService = _this3.mapsService) === null || _this3$mapsService === void 0 ? void 0 : _this3$mapsService.getMapContainer();
|
|
218
|
-
if (mapContainer) {
|
|
219
|
-
mapContainer.removeEventListener('click', _this3.onSceneClick);
|
|
118
|
+
/**
|
|
119
|
+
* 绑定对应的图层事件
|
|
120
|
+
* @protected
|
|
121
|
+
*/
|
|
122
|
+
bindLayerEvent() {
|
|
123
|
+
const {
|
|
124
|
+
trigger,
|
|
125
|
+
closeOnClick
|
|
126
|
+
} = this.popupOption;
|
|
127
|
+
this.layerConfigItems.forEach(configItem => {
|
|
128
|
+
var _layer$getSource;
|
|
129
|
+
const layer = this.getLayerByConfig(configItem);
|
|
130
|
+
if (!layer) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
const layerInfo = _objectSpread({}, configItem);
|
|
134
|
+
if (trigger === 'hover') {
|
|
135
|
+
const onMouseMove = this.onLayerMouseMove.bind(this, layer);
|
|
136
|
+
const onMouseOut = this.onLayerMouseOut.bind(this, layer);
|
|
137
|
+
layerInfo.onMouseMove = onMouseMove;
|
|
138
|
+
layerInfo.onMouseOut = onMouseOut;
|
|
139
|
+
layer === null || layer === void 0 || layer.on('mousemove', onMouseMove);
|
|
140
|
+
layer === null || layer === void 0 || layer.on('mouseout', onMouseOut);
|
|
141
|
+
} else {
|
|
142
|
+
var _this$mapsService;
|
|
143
|
+
const onLayerClick = this.onLayerClick.bind(this, layer);
|
|
144
|
+
layerInfo.onClick = onLayerClick;
|
|
145
|
+
layer === null || layer === void 0 || layer.on('click', onLayerClick);
|
|
146
|
+
const mapContainer = (_this$mapsService = this.mapsService) === null || _this$mapsService === void 0 ? void 0 : _this$mapsService.getMapContainer();
|
|
147
|
+
if (mapContainer && closeOnClick) {
|
|
148
|
+
mapContainer.addEventListener('click', this.onSceneClick);
|
|
220
149
|
}
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
}, {
|
|
224
|
-
key: "onLayerMouseMove",
|
|
225
|
-
value: function onLayerMouseMove(layer, e) {
|
|
226
|
-
if (!this.isSameFeature(layer, e.featureId)) {
|
|
227
|
-
var _this$getLayerInfoFra2 = this.getLayerInfoFrag(layer, e),
|
|
228
|
-
title = _this$getLayerInfoFra2.title,
|
|
229
|
-
content = _this$getLayerInfoFra2.content;
|
|
230
|
-
this.setDOMContent(content);
|
|
231
|
-
this.setTitle(title);
|
|
232
|
-
this.setDisplayFeatureInfo({
|
|
233
|
-
layer: layer,
|
|
234
|
-
featureId: e.featureId
|
|
235
|
-
});
|
|
236
|
-
this.show();
|
|
237
150
|
}
|
|
238
|
-
|
|
151
|
+
const source = layer === null || layer === void 0 || (_layer$getSource = layer.getSource) === null || _layer$getSource === void 0 ? void 0 : _layer$getSource.call(layer);
|
|
152
|
+
const onSourceUpdate = this.onSourceUpdate.bind(this);
|
|
153
|
+
source === null || source === void 0 || source.on('update', onSourceUpdate);
|
|
154
|
+
layerInfo.onSourceUpdate = onSourceUpdate;
|
|
155
|
+
this.layerConfigMap.set(layer, layerInfo);
|
|
156
|
+
});
|
|
157
|
+
}
|
|
239
158
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
159
|
+
/**
|
|
160
|
+
* 解绑对应的图层事件
|
|
161
|
+
* @protected
|
|
162
|
+
*/
|
|
163
|
+
unbindLayerEvent() {
|
|
164
|
+
this.layerConfigItems.forEach(configItem => {
|
|
165
|
+
var _this$mapsService2;
|
|
166
|
+
const layer = this.getLayerByConfig(configItem);
|
|
167
|
+
const layerInfo = layer && this.layerConfigMap.get(layer);
|
|
168
|
+
if (!layerInfo) {
|
|
169
|
+
return;
|
|
170
|
+
}
|
|
171
|
+
const {
|
|
172
|
+
onMouseMove,
|
|
173
|
+
onMouseOut,
|
|
174
|
+
onClick,
|
|
175
|
+
onSourceUpdate
|
|
176
|
+
} = layerInfo;
|
|
177
|
+
if (onMouseMove) {
|
|
178
|
+
layer.off('mousemove', onMouseMove);
|
|
247
179
|
}
|
|
180
|
+
if (onMouseOut) {
|
|
181
|
+
layer.off('mouseout', onMouseOut);
|
|
182
|
+
}
|
|
183
|
+
if (onClick) {
|
|
184
|
+
layer.off('click', onClick);
|
|
185
|
+
}
|
|
186
|
+
if (onSourceUpdate) {
|
|
187
|
+
var _layer$getSource2;
|
|
188
|
+
layer === null || layer === void 0 || (_layer$getSource2 = layer.getSource()) === null || _layer$getSource2 === void 0 || _layer$getSource2.off('update', onSourceUpdate);
|
|
189
|
+
}
|
|
190
|
+
const mapContainer = (_this$mapsService2 = this.mapsService) === null || _this$mapsService2 === void 0 ? void 0 : _this$mapsService2.getMapContainer();
|
|
191
|
+
if (mapContainer) {
|
|
192
|
+
mapContainer.removeEventListener('click', this.onSceneClick);
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
onLayerMouseMove(layer, e) {
|
|
197
|
+
if (!this.isSameFeature(layer, e.featureId)) {
|
|
198
|
+
const {
|
|
199
|
+
title,
|
|
200
|
+
content
|
|
201
|
+
} = this.getLayerInfoFrag(layer, e);
|
|
202
|
+
this.setDOMContent(content);
|
|
203
|
+
this.setTitle(title);
|
|
204
|
+
this.setDisplayFeatureInfo({
|
|
205
|
+
layer,
|
|
206
|
+
featureId: e.featureId
|
|
207
|
+
});
|
|
208
|
+
this.show();
|
|
248
209
|
}
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
213
|
+
onLayerMouseOut(layer, e) {
|
|
214
|
+
this.setDisplayFeatureInfo(undefined);
|
|
215
|
+
if (this.isShow) {
|
|
252
216
|
this.hide();
|
|
253
|
-
this.setDisplayFeatureInfo(undefined);
|
|
254
217
|
}
|
|
218
|
+
}
|
|
219
|
+
onSourceUpdate() {
|
|
220
|
+
this.hide();
|
|
221
|
+
this.setDisplayFeatureInfo(undefined);
|
|
222
|
+
}
|
|
255
223
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
if (
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
224
|
+
/**
|
|
225
|
+
* 通过当前图层和对应选中的元素获取气泡展示的 HTML 内容
|
|
226
|
+
* @param layer
|
|
227
|
+
* @param e
|
|
228
|
+
* @protected
|
|
229
|
+
*/
|
|
230
|
+
getLayerInfoFrag(layer, e) {
|
|
231
|
+
const layerInfo = this.layerConfigMap.get(layer);
|
|
232
|
+
let titleFrag;
|
|
233
|
+
const contentFrag = document.createDocumentFragment();
|
|
234
|
+
if (layerInfo) {
|
|
235
|
+
let feature = e.feature;
|
|
236
|
+
if (feature.type === 'Feature' && 'properties' in feature && 'geometry' in feature) {
|
|
237
|
+
feature = feature.properties;
|
|
238
|
+
}
|
|
239
|
+
const {
|
|
240
|
+
title,
|
|
241
|
+
fields,
|
|
242
|
+
customContent
|
|
243
|
+
} = layerInfo;
|
|
244
|
+
if (title) {
|
|
245
|
+
titleFrag = document.createDocumentFragment();
|
|
246
|
+
const titleElement = title instanceof Function ? title(feature) : title;
|
|
247
|
+
DOM.appendElementType(titleFrag, titleElement);
|
|
248
|
+
}
|
|
249
|
+
if (customContent) {
|
|
250
|
+
const content = customContent instanceof Function ? customContent(feature) : customContent;
|
|
251
|
+
DOM.appendElementType(contentFrag, content);
|
|
252
|
+
} else if (fields !== null && fields !== void 0 && fields.length) {
|
|
253
|
+
fields === null || fields === void 0 || fields.forEach(fieldConfig => {
|
|
254
|
+
var _ref2, _ref3;
|
|
255
|
+
const {
|
|
256
|
+
field,
|
|
257
|
+
formatField,
|
|
258
|
+
formatValue,
|
|
259
|
+
getValue
|
|
260
|
+
} = typeof fieldConfig === 'string' ?
|
|
261
|
+
// tslint:disable-next-line:no-object-literal-type-assertion
|
|
262
|
+
{
|
|
263
|
+
field: fieldConfig
|
|
264
|
+
} : fieldConfig;
|
|
265
|
+
const row = DOM.create('div', 'l7-layer-popup__row');
|
|
266
|
+
const value = getValue ? getValue(e.feature) : get(feature, field);
|
|
267
|
+
const fieldElement = (_ref2 = formatField instanceof Function ? formatField(field, feature) : formatField) !== null && _ref2 !== void 0 ? _ref2 : field;
|
|
268
|
+
let valueElement = (_ref3 = formatValue instanceof Function ? formatValue(value, feature) : formatValue) !== null && _ref3 !== void 0 ? _ref3 : value;
|
|
269
|
+
const fieldSpan = DOM.create('span', 'l7-layer-popup__key', row);
|
|
270
|
+
DOM.appendElementType(fieldSpan, fieldElement);
|
|
271
|
+
DOM.appendElementType(fieldSpan, document.createTextNode(':'));
|
|
272
|
+
const valueSpan = DOM.create('span', 'l7-layer-popup__value', row);
|
|
304
273
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
}
|
|
313
|
-
DOM.appendElementType(valueSpan, valueElement);
|
|
314
|
-
contentFrag.appendChild(row);
|
|
315
|
-
});
|
|
316
|
-
}
|
|
274
|
+
// 当 value 中每项元素均为基础数据类型时,用逗号隔开
|
|
275
|
+
if (Array.isArray(valueElement) && valueElement.every(item => !(item instanceof Object))) {
|
|
276
|
+
valueElement = valueElement.map(item => String(item)).join(',');
|
|
277
|
+
}
|
|
278
|
+
DOM.appendElementType(valueSpan, valueElement);
|
|
279
|
+
contentFrag.appendChild(row);
|
|
280
|
+
});
|
|
317
281
|
}
|
|
318
|
-
return {
|
|
319
|
-
title: titleFrag,
|
|
320
|
-
content: contentFrag
|
|
321
|
-
};
|
|
322
282
|
}
|
|
283
|
+
return {
|
|
284
|
+
title: titleFrag,
|
|
285
|
+
content: contentFrag
|
|
286
|
+
};
|
|
287
|
+
}
|
|
323
288
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
if (typeof layer === 'string') {
|
|
337
|
-
return this.layerService.getLayer(layer) || this.layerService.getLayerByName(layer);
|
|
338
|
-
}
|
|
289
|
+
/**
|
|
290
|
+
* 通过 Layer 配置访问到真实的 Layer 实例
|
|
291
|
+
* @param configItem
|
|
292
|
+
* @protected
|
|
293
|
+
*/
|
|
294
|
+
getLayerByConfig(configItem) {
|
|
295
|
+
const layer = configItem.layer;
|
|
296
|
+
if (layer instanceof Object) {
|
|
297
|
+
return layer;
|
|
298
|
+
}
|
|
299
|
+
if (typeof layer === 'string') {
|
|
300
|
+
return this.layerService.getLayer(layer) || this.layerService.getLayerByName(layer);
|
|
339
301
|
}
|
|
302
|
+
}
|
|
340
303
|
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
304
|
+
/**
|
|
305
|
+
* 判断当前展示的 Feature 是否和上一次查看的一致
|
|
306
|
+
* @param layer
|
|
307
|
+
* @param featureId
|
|
308
|
+
* @protected
|
|
309
|
+
*/
|
|
310
|
+
isSameFeature(layer, featureId) {
|
|
311
|
+
const displayFeatureInfo = this.displayFeatureInfo;
|
|
312
|
+
return displayFeatureInfo && layer === displayFeatureInfo.layer && featureId === displayFeatureInfo.featureId;
|
|
313
|
+
}
|
|
314
|
+
setDisplayFeatureInfo(displayFeatureInfo) {
|
|
315
|
+
const oldDisplayFeatureInfo = this.displayFeatureInfo;
|
|
316
|
+
if (oldDisplayFeatureInfo) {
|
|
317
|
+
oldDisplayFeatureInfo.layer.off('hide', this.onLayerHide);
|
|
352
318
|
}
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
value: function setDisplayFeatureInfo(displayFeatureInfo) {
|
|
356
|
-
var oldDisplayFeatureInfo = this.displayFeatureInfo;
|
|
357
|
-
if (oldDisplayFeatureInfo) {
|
|
358
|
-
oldDisplayFeatureInfo.layer.off('hide', this.onLayerHide);
|
|
359
|
-
}
|
|
360
|
-
if (displayFeatureInfo) {
|
|
361
|
-
displayFeatureInfo.layer.on('hide', this.onLayerHide);
|
|
362
|
-
}
|
|
363
|
-
this.displayFeatureInfo = displayFeatureInfo;
|
|
319
|
+
if (displayFeatureInfo) {
|
|
320
|
+
displayFeatureInfo.layer.on('hide', this.onLayerHide);
|
|
364
321
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
}
|
|
368
|
-
export { LayerPopup as default };
|
|
322
|
+
this.displayFeatureInfo = displayFeatureInfo;
|
|
323
|
+
}
|
|
324
|
+
}
|