dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add bounds padding

Browse Source
This commit is contained in:
Artem Halushko 2020-03-20 19:24:19 +02:00
parent ab29be731e
commit c79b32e769
5 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
View File

@ -210,8 +210,8 @@ export default abstract class LeafletMap {
private createMarker(key, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, setFocus = true) { private createMarker(key, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, setFocus = true) {
this.ready$.subscribe(() => { this.ready$.subscribe(() => {
const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources, () => { }, this.dragMarker); const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources, () => { }, this.dragMarker);
if (setFocus) if (setFocus && settings.fitMapBounds)
this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()).pad(0.2));
this.markers.set(key, newMarker); this.markers.set(key, newMarker);
}); });
} }
@ -245,10 +245,10 @@ export default abstract class LeafletMap {
if (data.length) { if (data.length) {
const dataSource = polyData.map(arr => arr[0]); const dataSource = polyData.map(arr => arr[0]);
if (this.poly) { if (this.poly) {
this.updatePolyline(data, dataSource, this.options); this.updatePolyline(data, polyData, this.options);
} }
else { else {
this.createPolyline(data, dataSource, this.options); this.createPolyline(data, polyData, this.options);
} }
} }
}) })

1
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
View File

@ -70,6 +70,7 @@ export type MarkerSettings = {
markerImages?: string[]; markerImages?: string[];
useMarkerImage: boolean; useMarkerImage: boolean;
markerImageSize: number; markerImageSize: number;
fitMapBounds: boolean;
markerImage: { markerImage: {
length: number length: number
} }

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
View File

@ -166,6 +166,8 @@ export class MapWidgetController implements MapWidgetInterface {
} }
update() { update() {
console.log(parseArray(this.data));
if (this.drawRoutes) if (this.drawRoutes)
this.map.updatePolylines(parseArray(this.data)); this.map.updatePolylines(parseArray(this.data));
if (this.settings.showPolygon) { if (this.settings.showPolygon) {

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
View File

@ -46,9 +46,7 @@ export class Polygon {
} }
updatePolygonColor(settings) { updatePolygonColor(settings) {
console.log('Polygon -> updatePolygonColor -> settings', settings)
const style: L.PathOptions = { const style: L.PathOptions = {
fill: true, fill: true,
fillColor: settings.color, fillColor: settings.color,
color: settings.color, color: settings.color,

5
ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts
View File

@ -34,6 +34,7 @@ export class Polyline {
this.leafletPoly = L.polyline(locations, this.leafletPoly = L.polyline(locations,
this.getPolyStyle(settings) this.getPolyStyle(settings)
).addTo(this.map); ).addTo(this.map);
if (settings.usePolylineDecorator) { if (settings.usePolylineDecorator) {
this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map); this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
} }
@ -62,12 +63,16 @@ export class Polyline {
updatePolyline(settings, data, dataSources) { updatePolyline(settings, data, dataSources) {
this.leafletPoly.setStyle(this.getPolyStyle(settings)); this.leafletPoly.setStyle(this.getPolyStyle(settings));
console.log( this.getPolyStyle(settings));
// this.setPolylineLatLngs(data); // this.setPolylineLatLngs(data);
if(this.polylineDecorator) if(this.polylineDecorator)
this.polylineDecorator.setPaths(this.leafletPoly); this.polylineDecorator.setPaths(this.leafletPoly);
} }
getPolyStyle(settings: PolylineSettings): L.PolylineOptions { getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
console.log(this.data,this.dataSources, this.dataSources[this.data[0]?.dsIndex], this.data[0]?.dsIndex);
return { return {
color: settings.useColorFunction ? color: settings.useColorFunction ?
safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color, safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color,