1 | import * as i0 from '@angular/core';
|
2 | import { EventEmitter, Directive, Input, Output, HostListener, NgModule } from '@angular/core';
|
3 | import { latLng, map, control, tileLayer } from 'leaflet';
|
4 |
|
5 | class LeafletUtil {
|
6 | static mapToArray(map) {
|
7 | const toReturn = [];
|
8 | for (const k in map) {
|
9 | if (map.hasOwnProperty(k)) {
|
10 | toReturn.push(map[k]);
|
11 | }
|
12 | }
|
13 | return toReturn;
|
14 | }
|
15 | static handleEvent(zone, eventEmitter, event) {
|
16 |
|
17 | if (0 < eventEmitter.observers.length) {
|
18 | zone.run(() => {
|
19 | eventEmitter.emit(event);
|
20 | });
|
21 | }
|
22 | }
|
23 | }
|
24 |
|
25 | class LeafletDirective {
|
26 | constructor(element, zone) {
|
27 | this.element = element;
|
28 | this.zone = zone;
|
29 | this.DEFAULT_ZOOM = 1;
|
30 | this.DEFAULT_CENTER = latLng(38.907192, -77.036871);
|
31 | this.DEFAULT_FPZ_OPTIONS = {};
|
32 | this.fitBoundsOptions = this.DEFAULT_FPZ_OPTIONS;
|
33 | this.panOptions = this.DEFAULT_FPZ_OPTIONS;
|
34 | this.zoomOptions = this.DEFAULT_FPZ_OPTIONS;
|
35 | this.zoomPanOptions = this.DEFAULT_FPZ_OPTIONS;
|
36 |
|
37 | this.options = {};
|
38 |
|
39 | this.mapReady = new EventEmitter();
|
40 | this.zoomChange = new EventEmitter();
|
41 | this.centerChange = new EventEmitter();
|
42 |
|
43 | this.onClick = new EventEmitter();
|
44 | this.onDoubleClick = new EventEmitter();
|
45 | this.onMouseDown = new EventEmitter();
|
46 | this.onMouseUp = new EventEmitter();
|
47 | this.onMouseMove = new EventEmitter();
|
48 | this.onMouseOver = new EventEmitter();
|
49 | this.onMouseOut = new EventEmitter();
|
50 |
|
51 | this.onMapMove = new EventEmitter();
|
52 | this.onMapMoveStart = new EventEmitter();
|
53 | this.onMapMoveEnd = new EventEmitter();
|
54 |
|
55 | this.onMapZoom = new EventEmitter();
|
56 | this.onMapZoomStart = new EventEmitter();
|
57 | this.onMapZoomEnd = new EventEmitter();
|
58 |
|
59 | }
|
60 | ngOnInit() {
|
61 |
|
62 | this.zone.runOutsideAngular(() => {
|
63 |
|
64 | this.map = map(this.element.nativeElement, this.options);
|
65 | this.addMapEventListeners();
|
66 | });
|
67 |
|
68 | if (null != this.center && null != this.zoom) {
|
69 | this.setView(this.center, this.zoom);
|
70 | }
|
71 |
|
72 | if (null != this.fitBounds) {
|
73 | this.setFitBounds(this.fitBounds);
|
74 | }
|
75 | if (null != this.maxBounds) {
|
76 | this.setMaxBounds(this.maxBounds);
|
77 | }
|
78 | if (null != this.minZoom) {
|
79 | this.setMinZoom(this.minZoom);
|
80 | }
|
81 | if (null != this.maxZoom) {
|
82 | this.setMaxZoom(this.maxZoom);
|
83 | }
|
84 | this.doResize();
|
85 |
|
86 | this.mapReady.emit(this.map);
|
87 | }
|
88 | ngOnChanges(changes) {
|
89 | |
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | if (changes['zoom'] && changes['center'] && null != this.zoom && null != this.center) {
|
99 | this.setView(changes['center'].currentValue, changes['zoom'].currentValue);
|
100 | }
|
101 |
|
102 | else if (changes['zoom']) {
|
103 | this.setZoom(changes['zoom'].currentValue);
|
104 | }
|
105 |
|
106 | else if (changes['center']) {
|
107 | this.setCenter(changes['center'].currentValue);
|
108 | }
|
109 |
|
110 | if (changes['fitBounds']) {
|
111 | this.setFitBounds(changes['fitBounds'].currentValue);
|
112 | }
|
113 | if (changes['maxBounds']) {
|
114 | this.setMaxBounds(changes['maxBounds'].currentValue);
|
115 | }
|
116 | if (changes['minZoom']) {
|
117 | this.setMinZoom(changes['minZoom'].currentValue);
|
118 | }
|
119 | if (changes['maxZoom']) {
|
120 | this.setMaxZoom(changes['maxZoom'].currentValue);
|
121 | }
|
122 | }
|
123 | ngOnDestroy() {
|
124 |
|
125 | if (null != this.map) {
|
126 | this.map.remove();
|
127 | }
|
128 | }
|
129 | getMap() {
|
130 | return this.map;
|
131 | }
|
132 | onResize() {
|
133 | this.delayResize();
|
134 | }
|
135 | addMapEventListeners() {
|
136 | const registerEventHandler = (eventName, handler) => {
|
137 | this.map.on(eventName, handler);
|
138 | };
|
139 |
|
140 | registerEventHandler('click', (e) => LeafletUtil.handleEvent(this.zone, this.onClick, e));
|
141 | registerEventHandler('dblclick', (e) => LeafletUtil.handleEvent(this.zone, this.onDoubleClick, e));
|
142 | registerEventHandler('mousedown', (e) => LeafletUtil.handleEvent(this.zone, this.onMouseDown, e));
|
143 | registerEventHandler('mouseup', (e) => LeafletUtil.handleEvent(this.zone, this.onMouseUp, e));
|
144 | registerEventHandler('mouseover', (e) => LeafletUtil.handleEvent(this.zone, this.onMouseOver, e));
|
145 | registerEventHandler('mouseout', (e) => LeafletUtil.handleEvent(this.zone, this.onMouseOut, e));
|
146 | registerEventHandler('mousemove', (e) => LeafletUtil.handleEvent(this.zone, this.onMouseMove, e));
|
147 | registerEventHandler('zoomstart', (e) => LeafletUtil.handleEvent(this.zone, this.onMapZoomStart, e));
|
148 | registerEventHandler('zoom', (e) => LeafletUtil.handleEvent(this.zone, this.onMapZoom, e));
|
149 | registerEventHandler('zoomend', (e) => LeafletUtil.handleEvent(this.zone, this.onMapZoomEnd, e));
|
150 | registerEventHandler('movestart', (e) => LeafletUtil.handleEvent(this.zone, this.onMapMoveStart, e));
|
151 | registerEventHandler('move', (e) => LeafletUtil.handleEvent(this.zone, this.onMapMove, e));
|
152 | registerEventHandler('moveend', (e) => LeafletUtil.handleEvent(this.zone, this.onMapMoveEnd, e));
|
153 |
|
154 | const outputUpdateHandler = () => {
|
155 | const zoom = this.map.getZoom();
|
156 | if (zoom !== this.zoom) {
|
157 | this.zoom = zoom;
|
158 | LeafletUtil.handleEvent(this.zone, this.zoomChange, zoom);
|
159 | }
|
160 | const center = this.map.getCenter();
|
161 | if (null != center || null != this.center) {
|
162 | if (((null == center || null == this.center) && center !== this.center)
|
163 | || (center.lat !== this.center.lat || center.lng !== this.center.lng)) {
|
164 | this.center = center;
|
165 | LeafletUtil.handleEvent(this.zone, this.centerChange, center);
|
166 | }
|
167 | }
|
168 | };
|
169 | registerEventHandler('moveend', outputUpdateHandler);
|
170 | registerEventHandler('zoomend', outputUpdateHandler);
|
171 | }
|
172 | |
173 |
|
174 |
|
175 | doResize() {
|
176 |
|
177 | this.zone.runOutsideAngular(() => {
|
178 |
|
179 | if (null != this.map) {
|
180 | this.map.invalidateSize({});
|
181 | }
|
182 | });
|
183 | }
|
184 | |
185 |
|
186 |
|
187 | delayResize() {
|
188 | if (null != this.resizeTimer) {
|
189 | clearTimeout(this.resizeTimer);
|
190 | }
|
191 | this.resizeTimer = setTimeout(this.doResize.bind(this), 200);
|
192 | }
|
193 | |
194 |
|
195 |
|
196 |
|
197 |
|
198 | setView(center, zoom) {
|
199 | if (null != this.map && null != center && null != zoom) {
|
200 | this.map.setView(center, zoom, this.zoomPanOptions);
|
201 | }
|
202 | }
|
203 | |
204 |
|
205 |
|
206 |
|
207 | setZoom(zoom) {
|
208 | if (null != this.map && null != zoom) {
|
209 | this.map.setZoom(zoom, this.zoomOptions);
|
210 | }
|
211 | }
|
212 | |
213 |
|
214 |
|
215 |
|
216 | setCenter(center) {
|
217 | if (null != this.map && null != center) {
|
218 | this.map.panTo(center, this.panOptions);
|
219 | }
|
220 | }
|
221 | |
222 |
|
223 |
|
224 |
|
225 | setFitBounds(latLngBounds) {
|
226 | if (null != this.map && null != latLngBounds) {
|
227 | this.map.fitBounds(latLngBounds, this.fitBoundsOptions);
|
228 | }
|
229 | }
|
230 | |
231 |
|
232 |
|
233 |
|
234 | setMaxBounds(latLngBounds) {
|
235 | if (null != this.map && null != latLngBounds) {
|
236 | this.map.setMaxBounds(latLngBounds);
|
237 | }
|
238 | }
|
239 | |
240 |
|
241 |
|
242 |
|
243 | setMinZoom(zoom) {
|
244 | if (null != this.map && null != zoom) {
|
245 | this.map.setMinZoom(zoom);
|
246 | }
|
247 | }
|
248 | |
249 |
|
250 |
|
251 |
|
252 | setMaxZoom(zoom) {
|
253 | if (null != this.map && null != zoom) {
|
254 | this.map.setMaxZoom(zoom);
|
255 | }
|
256 | }
|
257 | }
|
258 | LeafletDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
259 | LeafletDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: LeafletDirective, selector: "[leaflet]", inputs: { fitBoundsOptions: ["leafletFitBoundsOptions", "fitBoundsOptions"], panOptions: ["leafletPanOptions", "panOptions"], zoomOptions: ["leafletZoomOptions", "zoomOptions"], zoomPanOptions: ["leafletZoomPanOptions", "zoomPanOptions"], options: ["leafletOptions", "options"], zoom: ["leafletZoom", "zoom"], center: ["leafletCenter", "center"], fitBounds: ["leafletFitBounds", "fitBounds"], maxBounds: ["leafletMaxBounds", "maxBounds"], minZoom: ["leafletMinZoom", "minZoom"], maxZoom: ["leafletMaxZoom", "maxZoom"] }, outputs: { mapReady: "leafletMapReady", zoomChange: "leafletZoomChange", centerChange: "leafletCenterChange", onClick: "leafletClick", onDoubleClick: "leafletDoubleClick", onMouseDown: "leafletMouseDown", onMouseUp: "leafletMouseUp", onMouseMove: "leafletMouseMove", onMouseOver: "leafletMouseOver", onMouseOut: "leafletMouseOut", onMapMove: "leafletMapMove", onMapMoveStart: "leafletMapMoveStart", onMapMoveEnd: "leafletMapMoveEnd", onMapZoom: "leafletMapZoom", onMapZoomStart: "leafletMapZoomStart", onMapZoomEnd: "leafletMapZoomEnd" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0 });
|
260 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletDirective, decorators: [{
|
261 | type: Directive,
|
262 | args: [{
|
263 | selector: '[leaflet]'
|
264 | }]
|
265 | }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { fitBoundsOptions: [{
|
266 | type: Input,
|
267 | args: ['leafletFitBoundsOptions']
|
268 | }], panOptions: [{
|
269 | type: Input,
|
270 | args: ['leafletPanOptions']
|
271 | }], zoomOptions: [{
|
272 | type: Input,
|
273 | args: ['leafletZoomOptions']
|
274 | }], zoomPanOptions: [{
|
275 | type: Input,
|
276 | args: ['leafletZoomPanOptions']
|
277 | }], options: [{
|
278 | type: Input,
|
279 | args: ['leafletOptions']
|
280 | }], mapReady: [{
|
281 | type: Output,
|
282 | args: ['leafletMapReady']
|
283 | }], zoom: [{
|
284 | type: Input,
|
285 | args: ['leafletZoom']
|
286 | }], zoomChange: [{
|
287 | type: Output,
|
288 | args: ['leafletZoomChange']
|
289 | }], center: [{
|
290 | type: Input,
|
291 | args: ['leafletCenter']
|
292 | }], centerChange: [{
|
293 | type: Output,
|
294 | args: ['leafletCenterChange']
|
295 | }], fitBounds: [{
|
296 | type: Input,
|
297 | args: ['leafletFitBounds']
|
298 | }], maxBounds: [{
|
299 | type: Input,
|
300 | args: ['leafletMaxBounds']
|
301 | }], minZoom: [{
|
302 | type: Input,
|
303 | args: ['leafletMinZoom']
|
304 | }], maxZoom: [{
|
305 | type: Input,
|
306 | args: ['leafletMaxZoom']
|
307 | }], onClick: [{
|
308 | type: Output,
|
309 | args: ['leafletClick']
|
310 | }], onDoubleClick: [{
|
311 | type: Output,
|
312 | args: ['leafletDoubleClick']
|
313 | }], onMouseDown: [{
|
314 | type: Output,
|
315 | args: ['leafletMouseDown']
|
316 | }], onMouseUp: [{
|
317 | type: Output,
|
318 | args: ['leafletMouseUp']
|
319 | }], onMouseMove: [{
|
320 | type: Output,
|
321 | args: ['leafletMouseMove']
|
322 | }], onMouseOver: [{
|
323 | type: Output,
|
324 | args: ['leafletMouseOver']
|
325 | }], onMouseOut: [{
|
326 | type: Output,
|
327 | args: ['leafletMouseOut']
|
328 | }], onMapMove: [{
|
329 | type: Output,
|
330 | args: ['leafletMapMove']
|
331 | }], onMapMoveStart: [{
|
332 | type: Output,
|
333 | args: ['leafletMapMoveStart']
|
334 | }], onMapMoveEnd: [{
|
335 | type: Output,
|
336 | args: ['leafletMapMoveEnd']
|
337 | }], onMapZoom: [{
|
338 | type: Output,
|
339 | args: ['leafletMapZoom']
|
340 | }], onMapZoomStart: [{
|
341 | type: Output,
|
342 | args: ['leafletMapZoomStart']
|
343 | }], onMapZoomEnd: [{
|
344 | type: Output,
|
345 | args: ['leafletMapZoomEnd']
|
346 | }], onResize: [{
|
347 | type: HostListener,
|
348 | args: ['window:resize', []]
|
349 | }] } });
|
350 |
|
351 | class LeafletDirectiveWrapper {
|
352 | constructor(leafletDirective) {
|
353 | this.leafletDirective = leafletDirective;
|
354 | }
|
355 | init() {
|
356 |
|
357 | }
|
358 | getMap() {
|
359 | return this.leafletDirective.getMap();
|
360 | }
|
361 | }
|
362 |
|
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 | class LeafletLayerDirective {
|
371 | constructor(leafletDirective, zone) {
|
372 | this.zone = zone;
|
373 |
|
374 | this.onAdd = new EventEmitter();
|
375 | this.onRemove = new EventEmitter();
|
376 | this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
|
377 | }
|
378 | ngOnInit() {
|
379 |
|
380 | this.leafletDirective.init();
|
381 | }
|
382 | ngOnDestroy() {
|
383 | if (null != this.layer) {
|
384 |
|
385 | this.removeLayerEventListeners(this.layer);
|
386 |
|
387 | this.layer.remove();
|
388 | }
|
389 | }
|
390 | ngOnChanges(changes) {
|
391 | if (changes['layer']) {
|
392 |
|
393 | const p = changes['layer'].previousValue;
|
394 | const n = changes['layer'].currentValue;
|
395 | this.zone.runOutsideAngular(() => {
|
396 | if (null != p) {
|
397 | this.removeLayerEventListeners(p);
|
398 | p.remove();
|
399 | }
|
400 | if (null != n) {
|
401 | this.addLayerEventListeners(n);
|
402 | this.leafletDirective.getMap().addLayer(n);
|
403 | }
|
404 | });
|
405 | }
|
406 | }
|
407 | addLayerEventListeners(l) {
|
408 | this.onAddLayerHandler = (e) => LeafletUtil.handleEvent(this.zone, this.onAdd, e);
|
409 | l.on('add', this.onAddLayerHandler);
|
410 | this.onRemoveLayerHandler = (e) => LeafletUtil.handleEvent(this.zone, this.onRemove, e);
|
411 | l.on('remove', this.onRemoveLayerHandler);
|
412 | }
|
413 | removeLayerEventListeners(l) {
|
414 | l.off('add', this.onAddLayerHandler);
|
415 | l.off('remove', this.onRemoveLayerHandler);
|
416 | }
|
417 | }
|
418 | LeafletLayerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletLayerDirective, deps: [{ token: LeafletDirective }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
419 | LeafletLayerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: LeafletLayerDirective, selector: "[leafletLayer]", inputs: { layer: ["leafletLayer", "layer"] }, outputs: { onAdd: "leafletLayerAdd", onRemove: "leafletLayerRemove" }, usesOnChanges: true, ngImport: i0 });
|
420 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletLayerDirective, decorators: [{
|
421 | type: Directive,
|
422 | args: [{
|
423 | selector: '[leafletLayer]'
|
424 | }]
|
425 | }], ctorParameters: function () { return [{ type: LeafletDirective }, { type: i0.NgZone }]; }, propDecorators: { layer: [{
|
426 | type: Input,
|
427 | args: ['leafletLayer']
|
428 | }], onAdd: [{
|
429 | type: Output,
|
430 | args: ['leafletLayerAdd']
|
431 | }], onRemove: [{
|
432 | type: Output,
|
433 | args: ['leafletLayerRemove']
|
434 | }] } });
|
435 |
|
436 |
|
437 |
|
438 |
|
439 |
|
440 |
|
441 |
|
442 |
|
443 |
|
444 |
|
445 |
|
446 |
|
447 |
|
448 |
|
449 |
|
450 |
|
451 | class LeafletLayersDirective {
|
452 | constructor(leafletDirective, differs, zone) {
|
453 | this.differs = differs;
|
454 | this.zone = zone;
|
455 | this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
|
456 | this.layersDiffer = this.differs.find([]).create();
|
457 | }
|
458 |
|
459 | set layers(v) {
|
460 | this.layersValue = v;
|
461 |
|
462 | this.updateLayers();
|
463 | }
|
464 | get layers() {
|
465 | return this.layersValue;
|
466 | }
|
467 | ngDoCheck() {
|
468 | this.updateLayers();
|
469 | }
|
470 | ngOnInit() {
|
471 |
|
472 | this.leafletDirective.init();
|
473 |
|
474 | this.updateLayers();
|
475 | }
|
476 | ngOnDestroy() {
|
477 | this.layers = [];
|
478 | }
|
479 | |
480 |
|
481 |
|
482 |
|
483 |
|
484 |
|
485 | updateLayers() {
|
486 | const map = this.leafletDirective.getMap();
|
487 | if (null != map && null != this.layersDiffer) {
|
488 | const changes = this.layersDiffer.diff(this.layersValue);
|
489 | if (null != changes) {
|
490 |
|
491 | this.zone.runOutsideAngular(() => {
|
492 | changes.forEachRemovedItem((c) => {
|
493 | map.removeLayer(c.item);
|
494 | });
|
495 | changes.forEachAddedItem((c) => {
|
496 | map.addLayer(c.item);
|
497 | });
|
498 | });
|
499 | }
|
500 | }
|
501 | }
|
502 | }
|
503 | LeafletLayersDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.IterableDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
504 | LeafletLayersDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: LeafletLayersDirective, selector: "[leafletLayers]", inputs: { layers: ["leafletLayers", "layers"] }, ngImport: i0 });
|
505 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletLayersDirective, decorators: [{
|
506 | type: Directive,
|
507 | args: [{
|
508 | selector: '[leafletLayers]'
|
509 | }]
|
510 | }], ctorParameters: function () { return [{ type: LeafletDirective }, { type: i0.IterableDiffers }, { type: i0.NgZone }]; }, propDecorators: { layers: [{
|
511 | type: Input,
|
512 | args: ['leafletLayers']
|
513 | }] } });
|
514 |
|
515 | class LeafletControlLayersChanges {
|
516 | constructor() {
|
517 | this.layersRemoved = 0;
|
518 | this.layersChanged = 0;
|
519 | this.layersAdded = 0;
|
520 | }
|
521 | changed() {
|
522 | return !(this.layersRemoved === 0 && this.layersChanged === 0 && this.layersAdded === 0);
|
523 | }
|
524 | }
|
525 |
|
526 | class LeafletControlLayersWrapper {
|
527 | constructor(zone, layersControlReady) {
|
528 | this.zone = zone;
|
529 | this.layersControlReady = layersControlReady;
|
530 | }
|
531 | getLayersControl() {
|
532 | return this.layersControl;
|
533 | }
|
534 | init(controlConfig, controlOptions) {
|
535 | const baseLayers = controlConfig.baseLayers || {};
|
536 | const overlays = controlConfig.overlays || {};
|
537 |
|
538 | this.zone.runOutsideAngular(() => {
|
539 | this.layersControl = control.layers(baseLayers, overlays, controlOptions);
|
540 | });
|
541 | this.layersControlReady.emit(this.layersControl);
|
542 | return this.layersControl;
|
543 | }
|
544 | applyBaseLayerChanges(changes) {
|
545 | let results = new LeafletControlLayersChanges();
|
546 | if (null != this.layersControl) {
|
547 | results = this.applyChanges(changes, this.layersControl.addBaseLayer);
|
548 | }
|
549 | return results;
|
550 | }
|
551 | applyOverlayChanges(changes) {
|
552 | let results = new LeafletControlLayersChanges();
|
553 | if (null != this.layersControl) {
|
554 | results = this.applyChanges(changes, this.layersControl.addOverlay);
|
555 | }
|
556 | return results;
|
557 | }
|
558 | applyChanges(changes, addFn) {
|
559 | const results = new LeafletControlLayersChanges();
|
560 | if (null != changes) {
|
561 |
|
562 | this.zone.runOutsideAngular(() => {
|
563 | changes.forEachChangedItem((c) => {
|
564 | this.layersControl.removeLayer(c.previousValue);
|
565 | addFn.call(this.layersControl, c.currentValue, c.key);
|
566 | results.layersChanged++;
|
567 | });
|
568 | changes.forEachRemovedItem((c) => {
|
569 | this.layersControl.removeLayer(c.previousValue);
|
570 | results.layersRemoved++;
|
571 | });
|
572 | changes.forEachAddedItem((c) => {
|
573 | addFn.call(this.layersControl, c.currentValue, c.key);
|
574 | results.layersAdded++;
|
575 | });
|
576 | });
|
577 | }
|
578 | return results;
|
579 | }
|
580 | }
|
581 |
|
582 | class LeafletControlLayersConfig {
|
583 | constructor() {
|
584 | this.baseLayers = {};
|
585 | this.overlays = {};
|
586 | }
|
587 | }
|
588 |
|
589 |
|
590 |
|
591 |
|
592 |
|
593 |
|
594 |
|
595 |
|
596 |
|
597 |
|
598 |
|
599 | class LeafletLayersControlDirective {
|
600 | constructor(leafletDirective, differs, zone) {
|
601 | this.differs = differs;
|
602 | this.zone = zone;
|
603 | this.layersControlReady = new EventEmitter();
|
604 | this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
|
605 | this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
|
606 |
|
607 | this.baseLayersDiffer = this.differs.find({}).create();
|
608 | this.overlaysDiffer = this.differs.find({}).create();
|
609 | }
|
610 | set layersControlConfig(v) {
|
611 |
|
612 | if (null == v) {
|
613 | v = new LeafletControlLayersConfig();
|
614 | }
|
615 | if (null == v.baseLayers) {
|
616 | v.baseLayers = {};
|
617 | }
|
618 | if (null == v.overlays) {
|
619 | v.overlays = {};
|
620 | }
|
621 |
|
622 | this.layersControlConfigValue = v;
|
623 |
|
624 | this.updateLayers();
|
625 | }
|
626 | get layersControlConfig() {
|
627 | return this.layersControlConfigValue;
|
628 | }
|
629 | ngOnInit() {
|
630 |
|
631 | this.leafletDirective.init();
|
632 |
|
633 | this.zone.runOutsideAngular(() => {
|
634 |
|
635 | this.controlLayers
|
636 | .init({}, this.layersControlOptions)
|
637 | .addTo(this.leafletDirective.getMap());
|
638 | });
|
639 | this.updateLayers();
|
640 | }
|
641 | ngOnDestroy() {
|
642 | this.layersControlConfig = { baseLayers: {}, overlays: {} };
|
643 | this.controlLayers.getLayersControl().remove();
|
644 | }
|
645 | ngDoCheck() {
|
646 | this.updateLayers();
|
647 | }
|
648 | updateLayers() {
|
649 | const map = this.leafletDirective.getMap();
|
650 | const layersControl = this.controlLayers.getLayersControl();
|
651 | if (null != map && null != layersControl) {
|
652 |
|
653 | if (null != this.baseLayersDiffer && null != this.layersControlConfigValue.baseLayers) {
|
654 | const changes = this.baseLayersDiffer.diff(this.layersControlConfigValue.baseLayers);
|
655 | this.controlLayers.applyBaseLayerChanges(changes);
|
656 | }
|
657 |
|
658 | if (null != this.overlaysDiffer && null != this.layersControlConfigValue.overlays) {
|
659 | const changes = this.overlaysDiffer.diff(this.layersControlConfigValue.overlays);
|
660 | this.controlLayers.applyOverlayChanges(changes);
|
661 | }
|
662 | }
|
663 | }
|
664 | }
|
665 | LeafletLayersControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletLayersControlDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
666 | LeafletLayersControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: LeafletLayersControlDirective, selector: "[leafletLayersControl]", inputs: { layersControlConfig: ["leafletLayersControl", "layersControlConfig"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 });
|
667 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletLayersControlDirective, decorators: [{
|
668 | type: Directive,
|
669 | args: [{
|
670 | selector: '[leafletLayersControl]'
|
671 | }]
|
672 | }], ctorParameters: function () { return [{ type: LeafletDirective }, { type: i0.KeyValueDiffers }, { type: i0.NgZone }]; }, propDecorators: { layersControlConfig: [{
|
673 | type: Input,
|
674 | args: ['leafletLayersControl']
|
675 | }], layersControlOptions: [{
|
676 | type: Input,
|
677 | args: ['leafletLayersControlOptions']
|
678 | }], layersControlReady: [{
|
679 | type: Output,
|
680 | args: ['leafletLayersControlReady']
|
681 | }] } });
|
682 |
|
683 |
|
684 |
|
685 |
|
686 |
|
687 |
|
688 |
|
689 |
|
690 |
|
691 |
|
692 |
|
693 |
|
694 | class LeafletBaseLayersDirective {
|
695 | constructor(leafletDirective, differs, zone) {
|
696 | this.differs = differs;
|
697 | this.zone = zone;
|
698 |
|
699 | this.layersControlReady = new EventEmitter();
|
700 | this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
|
701 | this.controlLayers = new LeafletControlLayersWrapper(this.zone, this.layersControlReady);
|
702 | this.baseLayersDiffer = this.differs.find({}).create();
|
703 | }
|
704 |
|
705 | set baseLayers(v) {
|
706 | this.baseLayersValue = v;
|
707 | this.updateBaseLayers();
|
708 | }
|
709 | get baseLayers() {
|
710 | return this.baseLayersValue;
|
711 | }
|
712 | ngOnDestroy() {
|
713 | this.baseLayers = {};
|
714 | if (null != this.controlLayers.getLayersControl()) {
|
715 | this.controlLayers.getLayersControl().remove();
|
716 | }
|
717 | }
|
718 | ngOnInit() {
|
719 |
|
720 | this.leafletDirective.init();
|
721 |
|
722 | this.zone.runOutsideAngular(() => {
|
723 |
|
724 | this.controlLayers
|
725 | .init({}, this.layersControlOptions)
|
726 | .addTo(this.leafletDirective.getMap());
|
727 | });
|
728 | this.updateBaseLayers();
|
729 | }
|
730 | ngDoCheck() {
|
731 | this.updateBaseLayers();
|
732 | }
|
733 | updateBaseLayers() {
|
734 | const map = this.leafletDirective.getMap();
|
735 | const layersControl = this.controlLayers.getLayersControl();
|
736 | if (null != map && null != layersControl && null != this.baseLayersDiffer) {
|
737 | const changes = this.baseLayersDiffer.diff(this.baseLayersValue);
|
738 | const results = this.controlLayers.applyBaseLayerChanges(changes);
|
739 | if (results.changed()) {
|
740 | this.syncBaseLayer();
|
741 | }
|
742 | }
|
743 | }
|
744 | |
745 |
|
746 |
|
747 | syncBaseLayer() {
|
748 | const map = this.leafletDirective.getMap();
|
749 | const layers = LeafletUtil.mapToArray(this.baseLayers);
|
750 | let foundLayer;
|
751 |
|
752 | map.eachLayer((l) => {
|
753 | foundLayer = layers.find((bl) => (l === bl));
|
754 | });
|
755 |
|
756 | if (null != foundLayer) {
|
757 |
|
758 | this.baseLayer = foundLayer;
|
759 | }
|
760 | else {
|
761 |
|
762 | if (layers.length > 0) {
|
763 | this.baseLayer = layers[0];
|
764 |
|
765 | this.zone.runOutsideAngular(() => {
|
766 | this.baseLayer.addTo(map);
|
767 | });
|
768 | }
|
769 | }
|
770 | }
|
771 | }
|
772 | LeafletBaseLayersDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletBaseLayersDirective, deps: [{ token: LeafletDirective }, { token: i0.KeyValueDiffers }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
773 | LeafletBaseLayersDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: LeafletBaseLayersDirective, selector: "[leafletBaseLayers]", inputs: { baseLayers: ["leafletBaseLayers", "baseLayers"], layersControlOptions: ["leafletLayersControlOptions", "layersControlOptions"] }, outputs: { layersControlReady: "leafletLayersControlReady" }, ngImport: i0 });
|
774 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletBaseLayersDirective, decorators: [{
|
775 | type: Directive,
|
776 | args: [{
|
777 | selector: '[leafletBaseLayers]'
|
778 | }]
|
779 | }], ctorParameters: function () { return [{ type: LeafletDirective }, { type: i0.KeyValueDiffers }, { type: i0.NgZone }]; }, propDecorators: { baseLayers: [{
|
780 | type: Input,
|
781 | args: ['leafletBaseLayers']
|
782 | }], layersControlOptions: [{
|
783 | type: Input,
|
784 | args: ['leafletLayersControlOptions']
|
785 | }], layersControlReady: [{
|
786 | type: Output,
|
787 | args: ['leafletLayersControlReady']
|
788 | }] } });
|
789 |
|
790 | class LeafletModule {
|
791 | }
|
792 | LeafletModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
793 | LeafletModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.4", ngImport: i0, type: LeafletModule, declarations: [LeafletDirective,
|
794 | LeafletLayerDirective,
|
795 | LeafletLayersDirective,
|
796 | LeafletLayersControlDirective,
|
797 | LeafletBaseLayersDirective], exports: [LeafletDirective,
|
798 | LeafletLayerDirective,
|
799 | LeafletLayersDirective,
|
800 | LeafletLayersControlDirective,
|
801 | LeafletBaseLayersDirective] });
|
802 | LeafletModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletModule });
|
803 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: LeafletModule, decorators: [{
|
804 | type: NgModule,
|
805 | args: [{
|
806 | exports: [
|
807 | LeafletDirective,
|
808 | LeafletLayerDirective,
|
809 | LeafletLayersDirective,
|
810 | LeafletLayersControlDirective,
|
811 | LeafletBaseLayersDirective
|
812 | ],
|
813 | declarations: [
|
814 | LeafletDirective,
|
815 | LeafletLayerDirective,
|
816 | LeafletLayersDirective,
|
817 | LeafletLayersControlDirective,
|
818 | LeafletBaseLayersDirective
|
819 | ]
|
820 | }]
|
821 | }] });
|
822 |
|
823 | class LeafletTileLayerDefinition {
|
824 | constructor(type, url, options) {
|
825 | this.type = type;
|
826 | this.url = url;
|
827 | this.options = options;
|
828 | }
|
829 | |
830 |
|
831 |
|
832 |
|
833 |
|
834 |
|
835 |
|
836 | static createTileLayer(layerDef) {
|
837 | let layer;
|
838 | switch (layerDef.type) {
|
839 | case 'xyz':
|
840 | layer = tileLayer(layerDef.url, layerDef.options);
|
841 | break;
|
842 | case 'wms':
|
843 | default:
|
844 | layer = tileLayer.wms(layerDef.url, layerDef.options);
|
845 | break;
|
846 | }
|
847 | return layer;
|
848 | }
|
849 | |
850 |
|
851 |
|
852 |
|
853 |
|
854 |
|
855 |
|
856 | static createTileLayers(layerDefs) {
|
857 | const layers = {};
|
858 | for (const k in layerDefs) {
|
859 | if (layerDefs.hasOwnProperty(k)) {
|
860 | layers[k] = (LeafletTileLayerDefinition.createTileLayer(layerDefs[k]));
|
861 | }
|
862 | }
|
863 | return layers;
|
864 | }
|
865 | |
866 |
|
867 |
|
868 |
|
869 |
|
870 | createTileLayer() {
|
871 | return LeafletTileLayerDefinition.createTileLayer(this);
|
872 | }
|
873 | }
|
874 |
|
875 |
|
876 |
|
877 |
|
878 |
|
879 | export { LeafletBaseLayersDirective, LeafletControlLayersChanges, LeafletControlLayersConfig, LeafletControlLayersWrapper, LeafletDirective, LeafletDirectiveWrapper, LeafletLayerDirective, LeafletLayersControlDirective, LeafletLayersDirective, LeafletModule, LeafletTileLayerDefinition, LeafletUtil };
|
880 |
|