简柏林 / thingskit · Commits

Commit 8149d9d42d3913895c00bcb02120497e2b8ffc69

Authored by Artem Halushko
1 parent 7412f5fb

add simple marker suppor

Inline Side-by-side
Showing 5 changed files with 72 additions and 53 deletions
@@ -7,14 +7,16 @@ import 'leaflet.markercluster/dist/leaflet.markercluster' @@ -7,14 +7,16 @@ import 'leaflet.markercluster/dist/leaflet.markercluster'
7 7
8 import { MapOptions, MarkerSettings } from './map-models'; 8 import { MapOptions, MarkerSettings } from './map-models';
9 import { Marker } from './markers'; 9 import { Marker } from './markers';
10 -import { Observable, of } from 'rxjs'; 10 +import { Observable, of, BehaviorSubject, Subject } from 'rxjs';
  11 +import { filter } from 'rxjs/operators';
11 12
12 export default class LeafletMap { 13 export default class LeafletMap {
13 14
14 markers = []; 15 markers = [];
15 tooltips = []; 16 tooltips = [];
16 map: L.Map; 17 map: L.Map;
17 - map$: Observable<L.Map>; 18 + map$: BehaviorSubject<L.Map> = new BehaviorSubject(null);
  19 + ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map));
18 options: MapOptions; 20 options: MapOptions;
19 isMarketCluster; 21 isMarketCluster;
20 22
@@ -47,7 +49,7 @@ export default class LeafletMap { @@ -47,7 +49,7 @@ export default class LeafletMap {
47 49
48 public setMap(map: L.Map) { 50 public setMap(map: L.Map) {
49 this.map = map; 51 this.map = map;
50 - this.map$ = of(this.map); 52 + this.map$.next(this.map);
51 } 53 }
52 54
53 getContainer() { 55 getContainer() {
@@ -121,14 +123,20 @@ export default class LeafletMap { @@ -121,14 +123,20 @@ export default class LeafletMap {
121 return this.map.getCenter(); 123 return this.map.getCenter();
122 } 124 }
123 125
124 - ////Markers 126 + convertPosition(expression: L.LatLngExpression | { x, y }): L.LatLngExpression {
  127 + return expression as L.LatLngExpression;
  128 + }
125 129
  130 + ////Markers
126 131
127 - createMarker() {  
128 - let setings: MarkerSettings = {  
129 132
130 - }  
131 - this.markers.push(new Marker(this.map$, { lat: 0, lng: 0 }, setings)) 133 + createMarker(location, settings: MarkerSettings) {
  134 + this.ready$.subscribe(() => {
  135 + let defaultSettings: MarkerSettings = {
  136 + color: '#FD2785'
  137 + }
  138 + this.markers.push(new Marker(this.map, this.convertPosition(location), { ...defaultSettings, ...settings }))
  139 + });
132 } 140 }
133 141
134 updateMarker() { 142 updateMarker() {
@@ -22,5 +22,6 @@ export enum MapProviders { @@ -22,5 +22,6 @@ export enum MapProviders {
22 export interface MarkerSettings{ 22 export interface MarkerSettings{
23 showLabel?: boolean, 23 showLabel?: boolean,
24 draggable?: boolean, 24 draggable?: boolean,
25 - displayTooltip?: boolean 25 + displayTooltip?: boolean,
  26 + color: string
26 } 27 }
@@ -72,7 +72,10 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { @@ -72,7 +72,10 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
72 return; 72 return;
73 } 73 }
74 this.map = new MapClass($element, { ...baseOptions, ...ctx.settings }) 74 this.map = new MapClass($element, { ...baseOptions, ...ctx.settings })
75 - this.map.createMarker(); 75 + if(mapProvider !== "image-map")
  76 + this.map.createMarker({ lat: 0, lng: 0 }, { color: '#FD2785' })
  77 + else
  78 + this.map.createMarker({ x: 500, y: 500 }, { color: '#6D2785' });
76 this.schema = providerSets[mapProvider]?.schema; 79 this.schema = providerSets[mapProvider]?.schema;
77 } 80 }
78 81
@@ -2,6 +2,7 @@ import L from 'leaflet'; @@ -2,6 +2,7 @@ import L from 'leaflet';
2 import { createTooltip } from './maps-utils'; 2 import { createTooltip } from './maps-utils';
3 import { MarkerSettings } from './map-models'; 3 import { MarkerSettings } from './map-models';
4 import { Observable } from 'rxjs'; 4 import { Observable } from 'rxjs';
  5 +import { aspectCache } from '@app/core/utils';
5 6
6 export class Marker { 7 export class Marker {
7 8
@@ -11,21 +12,22 @@ export class Marker { @@ -11,21 +12,22 @@ export class Marker {
11 tooltipOffset; 12 tooltipOffset;
12 tooltip; 13 tooltip;
13 14
14 - constructor(private map$: Observable<L.Map>, location: L.LatLngExpression, settings: MarkerSettings, onClickListener?, markerArgs?, onDragendListener?) { 15 + constructor(private map: L.Map, location: L.LatLngExpression, settings: MarkerSettings, onClickListener?, markerArgs?, onDragendListener?) {
15 //this.map = map; 16 //this.map = map;
16 this.leafletMarker = L.marker(location, { 17 this.leafletMarker = L.marker(location, {
17 draggable: settings.draggable 18 draggable: settings.draggable
18 }); 19 });
19 20
20 - this.createMarkerIcon(this.leafletMarker, settings, (iconInfo) => { 21 + this.createMarkerIcon(settings, (iconInfo) => {
21 this.leafletMarker.setIcon(iconInfo.icon); 22 this.leafletMarker.setIcon(iconInfo.icon);
22 if (settings.showLabel) { 23 if (settings.showLabel) {
23 this.tooltipOffset = [0, -iconInfo.size[1] + 10]; 24 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
24 this.updateMarkerLabel(settings) 25 this.updateMarkerLabel(settings)
25 } 26 }
26 - map$.subscribe(map =>  
27 - this.leafletMarker.addTo(map))  
28 - }); 27 +
  28 + this.leafletMarker.addTo(map)
  29 + }
  30 + );
29 31
30 if (settings.displayTooltip) { 32 if (settings.displayTooltip) {
31 this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs); 33 this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs);
@@ -48,14 +50,14 @@ export class Marker { @@ -48,14 +50,14 @@ export class Marker {
48 { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset }); 50 { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset });
49 } 51 }
50 52
51 - updateMarkerColor(marker, color) { 53 + updateMarkerColor(color) {
52 this.createDefaultMarkerIcon(color, (iconInfo) => { 54 this.createDefaultMarkerIcon(color, (iconInfo) => {
53 this.leafletMarker.setIcon(iconInfo.icon); 55 this.leafletMarker.setIcon(iconInfo.icon);
54 }); 56 });
55 } 57 }
56 58
57 - updateMarkerIcon(marker, settings) {  
58 - this.createMarkerIcon(marker, settings, (iconInfo) => { 59 + updateMarkerIcon( settings) {
  60 + this.createMarkerIcon(settings, (iconInfo) => {
59 this.leafletMarker.setIcon(iconInfo.icon); 61 this.leafletMarker.setIcon(iconInfo.icon);
60 if (settings.showLabel) { 62 if (settings.showLabel) {
61 this.tooltipOffset = [0, -iconInfo.size[1] + 10]; 63 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
@@ -66,41 +68,41 @@ export class Marker { @@ -66,41 +68,41 @@ export class Marker {
66 68
67 69
68 70
69 - createMarkerIcon(marker, settings, onMarkerIconReady) { 71 + createMarkerIcon(settings, onMarkerIconReady) {
70 var currentImage = settings.currentImage; 72 var currentImage = settings.currentImage;
71 // var opMap = this; 73 // var opMap = this;
72 - /* if (currentImage && currentImage.url) {  
73 - this.utils.loadImageAspect(currentImage.url).then(  
74 - (aspect) => {  
75 - if (aspect) {  
76 - var width;  
77 - var height;  
78 - if (aspect > 1) {  
79 - width = currentImage.size;  
80 - height = currentImage.size / aspect;  
81 - } else {  
82 - width = currentImage.size * aspect;  
83 - height = currentImage.size;  
84 - }  
85 - var icon = L.icon({  
86 - iconUrl: currentImage.url,  
87 - iconSize: [width, height],  
88 - iconAnchor: [width / 2, height],  
89 - popupAnchor: [0, -height]  
90 - });  
91 - var iconInfo = {  
92 - size: [width, height],  
93 - icon: icon  
94 - };  
95 - onMarkerIconReady(iconInfo);  
96 - } else {  
97 - opMap.createDefaultMarkerIcon(settings.color, onMarkerIconReady);  
98 - }  
99 - }  
100 - );  
101 - } else {  
102 - this.createDefaultMarkerIcon(settings.color, onMarkerIconReady);  
103 - }*/ 74 + if (currentImage && currentImage.url) {
  75 + aspectCache(currentImage.url).subscribe(
  76 + (aspect) => {
  77 + if (aspect) {
  78 + var width;
  79 + var height;
  80 + if (aspect > 1) {
  81 + width = currentImage.size;
  82 + height = currentImage.size / aspect;
  83 + } else {
  84 + width = currentImage.size * aspect;
  85 + height = currentImage.size;
  86 + }
  87 + var icon = L.icon({
  88 + iconUrl: currentImage.url,
  89 + iconSize: [width, height],
  90 + iconAnchor: [width / 2, height],
  91 + popupAnchor: [0, -height]
  92 + });
  93 + var iconInfo = {
  94 + size: [width, height],
  95 + icon: icon
  96 + };
  97 + onMarkerIconReady(iconInfo);
  98 + } else {
  99 + this.createDefaultMarkerIcon(settings.color, onMarkerIconReady);
  100 + }
  101 + }
  102 + );
  103 + } else {
  104 + this.createDefaultMarkerIcon(settings.color, onMarkerIconReady);
  105 + }
104 } 106 }
105 107
106 createDefaultMarkerIcon(color, onMarkerIconReady) { 108 createDefaultMarkerIcon(color, onMarkerIconReady) {
@@ -124,8 +126,8 @@ export class Marker { @@ -124,8 +126,8 @@ export class Marker {
124 126
125 127
126 removeMarker() { 128 removeMarker() {
127 - this.map$.subscribe(map =>  
128 - this.leafletMarker.addTo(map)) 129 + /* this.map$.subscribe(map =>
  130 + this.leafletMarker.addTo(map))*/
129 } 131 }
130 132
131 extendBoundsWithMarker(bounds) { 133 extendBoundsWithMarker(bounds) {
@@ -101,6 +101,11 @@ export class ImageMap extends LeafletMap { @@ -101,6 +101,11 @@ export class ImageMap extends LeafletMap {
101 } 101 }
102 } 102 }
103 103
  104 + convertPosition(expression: { x, y }): L.LatLngExpression {
  105 + console.log("ImageMap -> expression", expression)
  106 + return this.pointToLatLng(expression.x, expression.y) as L.LatLngExpression;
  107 + }
  108 +
104 109
105 pointToLatLng(x, y) { 110 pointToLatLng(x, y) {
106 return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1); 111 return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);