842485ac
 Administrator
add select point ...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core';
import { AgEditorComponent } from 'ag-grid-ng2/main';
import * as L from 'leaflet';
@Component({
selector: 'editor-cell',
template: `
<div class="md-select-panel map-container">
<div id="mapId"></div>
</div>
`
})
export class MapEditorComponent implements AgEditorComponent, AfterViewInit {
@ViewChild('container', {read: ViewContainerRef})
public container;
public item: Object = null;
public data: Object[];
private params: any;
public map: L.Map;
public icon: L.Icon;
public status: boolean = false;
ngAfterViewInit() {
}
agInit(params: any): void {
this.params = params;
this.icon = L.icon({
iconUrl: '/assets/icons/marker-icon.png',
iconSize: [25, 41], // size of the icon
popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor
});
this.map = L.map('mapId').setView([51.505, -0.09], 13);
L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(this.map);
if(params.value != null){
this.status = true;
let options = {
draggable:true,
icon: this.icon,
};
let latLng = params.value.split(',');
let marker = L.marker(new L.LatLng(latLng[0],latLng[1]),options);
marker.on('dragend', this.onDraged.bind(this));
this.map.addLayer(marker);
}
this.data = params.data || [];
this.map.on('click', this.onMapClick.bind(this));
console.log(this);
}
getValue(): any {
return this.item;
}
isPopup(): boolean {
return true;
}
setValue(item: Object): void {
this.item = item;
}
onDraged(e){
let marker = e.target;
let position = marker.getLatLng();
marker.setLatLng(new L.LatLng(position.lat, position.lng),{draggable:true});
this.item = position.lat +','+ position.lng;
}
onClick(item: Object) {
this.setValue(item);
this.params.api.stopEditing();
}
onKeyDown(event): boolean {
event.stopPropagation();
return false;
}
onMapClick(e) {
if(!this.status){
let options = {
draggable:true,
icon: this.icon,
};
let marker = L.marker(e.latlng,options);
this.item = e.latlng.lat +','+ e.latlng.lng;
this.map.addLayer(marker);
marker.on('dragend', this.onDraged.bind(this));
}
};
}
|
