简柏林 / 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 7
8 8 import { MapOptions, MarkerSettings } from './map-models';
9 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 13 export default class LeafletMap {
13 14
14 15 markers = [];
15 16 tooltips = [];
16 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 20 options: MapOptions;
19 21 isMarketCluster;
20 22
... ... @@ -47,7 +49,7 @@ export default class LeafletMap {
47 49
48 50 public setMap(map: L.Map) {
49 51 this.map = map;
50   - this.map$ = of(this.map);
  52 + this.map$.next(this.map);
51 53 }
52 54
53 55 getContainer() {
... ... @@ -121,14 +123,20 @@ export default class LeafletMap {
121 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 142 updateMarker() {
... ...
... ... @@ -22,5 +22,6 @@ export enum MapProviders {
22 22 export interface MarkerSettings{
23 23 showLabel?: boolean,
24 24 draggable?: boolean,
25   - displayTooltip?: boolean
  25 + displayTooltip?: boolean,
  26 + color: string
26 27 }
\ No newline at end of file
... ...
... ... @@ -72,7 +72,10 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
72 72 return;
73 73 }
74 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 79 this.schema = providerSets[mapProvider]?.schema;
77 80 }
78 81
... ...
... ... @@ -2,6 +2,7 @@ import L from 'leaflet';
2 2 import { createTooltip } from './maps-utils';
3 3 import { MarkerSettings } from './map-models';
4 4 import { Observable } from 'rxjs';
  5 +import { aspectCache } from '@app/core/utils';
5 6
6 7 export class Marker {
7 8
... ... @@ -11,21 +12,22 @@ export class Marker {
11 12 tooltipOffset;
12 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 16 //this.map = map;
16 17 this.leafletMarker = L.marker(location, {
17 18 draggable: settings.draggable
18 19 });
19 20
20   - this.createMarkerIcon(this.leafletMarker, settings, (iconInfo) => {
  21 + this.createMarkerIcon(settings, (iconInfo) => {
21 22 this.leafletMarker.setIcon(iconInfo.icon);
22 23 if (settings.showLabel) {
23 24 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
24 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 32 if (settings.displayTooltip) {
31 33 this.tooltip = createTooltip(this.leafletMarker, settings, markerArgs);
... ... @@ -48,14 +50,14 @@ export class Marker {
48 50 { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset });
49 51 }
50 52
51   - updateMarkerColor(marker, color) {
  53 + updateMarkerColor(color) {
52 54 this.createDefaultMarkerIcon(color, (iconInfo) => {
53 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 61 this.leafletMarker.setIcon(iconInfo.icon);
60 62 if (settings.showLabel) {
61 63 this.tooltipOffset = [0, -iconInfo.size[1] + 10];
... ... @@ -66,41 +68,41 @@ export class Marker {
66 68
67 69
68 70
69   - createMarkerIcon(marker, settings, onMarkerIconReady) {
  71 + createMarkerIcon(settings, onMarkerIconReady) {
70 72 var currentImage = settings.currentImage;
71 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 108 createDefaultMarkerIcon(color, onMarkerIconReady) {
... ... @@ -124,8 +126,8 @@ export class Marker {
124 126
125 127
126 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 133 extendBoundsWithMarker(bounds) {
... ...
... ... @@ -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 110 pointToLatLng(x, y) {
106 111 return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1);
... ...