[3.0] Fixed polygon functionality (#2747)
* Add default setting and title for group * Fix polygon: updateColor, functions tooltip and color polygon, update coordinate polygon * Improvement code * Refactoring code
This commit is contained in:
Vladyslav
GitHub
parent
76300e400e
commit
7f53d53163
@ -14,7 +14,7 @@
|
||||
/// limitations under the License.
|
||||
///
|
||||
|
||||
import L, { LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions, FeatureGroup, LayerGroup } from 'leaflet';
|
||||
import L, { FeatureGroup, LatLngBounds, LatLngTuple, markerClusterGroup, MarkerClusterGroupOptions } from 'leaflet';
|
||||
|
||||
import 'leaflet-providers';
|
||||
import 'leaflet.markercluster/dist/leaflet.markercluster';
|
||||
@ -32,8 +32,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { Polyline } from './polyline';
|
||||
import { Polygon } from './polygon';
|
||||
import { DatasourceData } from '@app/shared/models/widget.models';
|
||||
import { safeExecute, createTooltip } from '@home/components/widget/lib/maps/maps-utils';
|
||||
import { createTooltip, safeExecute } from '@home/components/widget/lib/maps/maps-utils';
|
||||
|
||||
export default abstract class LeafletMap {
|
||||
|
||||
@ -379,13 +378,13 @@ export default abstract class LeafletMap {
|
||||
|
||||
// Polygon
|
||||
|
||||
updatePolygons(polyData: DatasourceData[]) {
|
||||
polyData.forEach((data: DatasourceData) => {
|
||||
if (data.data.length && data.dataKey.name === this.options.polygonKeyName) {
|
||||
if (typeof (data?.data[0][1]) === 'string') {
|
||||
data.data = JSON.parse(data.data[0][1]) as LatLngTuple[];
|
||||
updatePolygons(polyData: FormattedData[]) {
|
||||
polyData.forEach((data: FormattedData) => {
|
||||
if (data.hasOwnProperty(this.options.polygonKeyName)) {
|
||||
if (typeof (data[this.options.polygonKeyName]) === 'string') {
|
||||
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]) as LatLngTuple[];
|
||||
}
|
||||
if (this.polygons.get(data.datasource.entityName)) {
|
||||
if (this.polygons.get(data.$datasource.entityName)) {
|
||||
this.updatePolygon(data, polyData, this.options);
|
||||
}
|
||||
else {
|
||||
@ -395,16 +394,16 @@ export default abstract class LeafletMap {
|
||||
});
|
||||
}
|
||||
|
||||
createPolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) {
|
||||
createPolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
|
||||
this.ready$.subscribe(() => {
|
||||
const polygon = new Polygon(this.map, polyData, dataSources, settings);
|
||||
const bounds = polygon.leafletPoly.getBounds();
|
||||
this.fitBounds(bounds);
|
||||
this.polygons.set(polyData.datasource.entityName, polygon);
|
||||
this.polygons.set(polyData.$datasource.entityName, polygon);
|
||||
});
|
||||
}
|
||||
|
||||
updatePolygon(polyData: DatasourceData, dataSources: DatasourceData[], settings: PolygonSettings) {
|
||||
updatePolygon(polyData: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) {
|
||||
this.ready$.subscribe(() => {
|
||||
const poly = this.polygons.get(polyData.datasource.entityName);
|
||||
poly.updatePolygon(polyData.data, dataSources, settings);
|
||||
|
||||
@ -217,6 +217,7 @@ export class MapWidgetController implements MapWidgetInterface {
|
||||
tooltipFunction: parseFunction(settings.tooltipFunction, functionParams),
|
||||
colorFunction: parseFunction(settings.colorFunction, functionParams),
|
||||
polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams),
|
||||
polygonTooltipFunction: parseFunction(settings.polygonTooltipFunction, functionParams),
|
||||
markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
|
||||
labelColor: this.ctx.widgetConfig.color,
|
||||
polygonKeyName: settings.polKeyName ? settings.polKeyName : settings.polygonKeyName,
|
||||
@ -236,7 +237,7 @@ export class MapWidgetController implements MapWidgetInterface {
|
||||
if (this.drawRoutes)
|
||||
this.map.updatePolylines(parseArray(this.data));
|
||||
if (this.settings.showPolygon) {
|
||||
this.map.updatePolygons(this.data);
|
||||
this.map.updatePolygons(parseData(this.data));
|
||||
}
|
||||
if (this.settings.draggableMarker) {
|
||||
this.map.setDataSources(parseData(this.data));
|
||||
|
||||
@ -16,8 +16,7 @@
|
||||
|
||||
import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet';
|
||||
import { createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
|
||||
import { PolygonSettings } from './map-models';
|
||||
import { DatasourceData } from '@app/shared/models/widget.models';
|
||||
import { FormattedData, PolygonSettings } from './map-models';
|
||||
|
||||
export class Polygon {
|
||||
|
||||
@ -26,19 +25,22 @@ export class Polygon {
|
||||
data;
|
||||
dataSources;
|
||||
|
||||
constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings) {
|
||||
this.leafletPoly = L.polygon(polyData.data, {
|
||||
fill: true,
|
||||
fillColor: settings.polygonColor,
|
||||
color: settings.polygonStrokeColor,
|
||||
weight: settings.polygonStrokeWeight,
|
||||
fillOpacity: settings.polygonOpacity,
|
||||
opacity: settings.polygonStrokeOpacity
|
||||
}).addTo(this.map);
|
||||
constructor(public map, polyData: FormattedData, dataSources, private settings: PolygonSettings) {
|
||||
this.dataSources = dataSources;
|
||||
this.data = polyData;
|
||||
const polygonColor = this.getPolygonColor(settings);
|
||||
|
||||
this.leafletPoly = L.polygon(polyData[this.settings.polygonKeyName], {
|
||||
fill: true,
|
||||
fillColor: polygonColor,
|
||||
color: settings.polygonStrokeColor,
|
||||
weight: settings.polygonStrokeWeight,
|
||||
fillOpacity: settings.polygonOpacity,
|
||||
opacity: settings.polygonStrokeOpacity
|
||||
}).addTo(this.map);
|
||||
|
||||
if (settings.showPolygonTooltip) {
|
||||
this.tooltip = createTooltip(this.leafletPoly, settings, polyData.datasource);
|
||||
this.tooltip = createTooltip(this.leafletPoly, settings, polyData.$datasource);
|
||||
this.updateTooltip(polyData);
|
||||
}
|
||||
if (settings.polygonClick) {
|
||||
@ -52,17 +54,17 @@ export class Polygon {
|
||||
}
|
||||
}
|
||||
|
||||
updateTooltip(data: DatasourceData) {
|
||||
updateTooltip(data: FormattedData) {
|
||||
const pattern = this.settings.usePolygonTooltipFunction ?
|
||||
safeExecute(this.settings.polygonTooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) :
|
||||
this.settings.polygonTooltipPattern;
|
||||
this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true));
|
||||
}
|
||||
|
||||
updatePolygon(data: LatLngTuple[], dataSources: DatasourceData[], settings: PolygonSettings) {
|
||||
updatePolygon(data: LatLngTuple[], dataSources: FormattedData[], settings: PolygonSettings) {
|
||||
this.data = data;
|
||||
this.dataSources = dataSources;
|
||||
this.leafletPoly.setLatLngs(data);
|
||||
this.leafletPoly.setLatLngs(data[this.settings.polygonKeyName]);
|
||||
if (settings.showPolygonTooltip)
|
||||
this.updateTooltip(this.data);
|
||||
this.updatePolygonColor(settings);
|
||||
@ -73,11 +75,10 @@ export class Polygon {
|
||||
}
|
||||
|
||||
updatePolygonColor(settings: PolygonSettings) {
|
||||
const color = settings.usePolygonColorFunction ?
|
||||
safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.polygonColor;
|
||||
const polygonColor = this.getPolygonColor(settings);
|
||||
const style: L.PathOptions = {
|
||||
fill: true,
|
||||
fillColor: color,
|
||||
fillColor: polygonColor,
|
||||
color: settings.polygonStrokeColor,
|
||||
weight: settings.polygonStrokeWeight,
|
||||
fillOpacity: settings.polygonOpacity,
|
||||
@ -94,4 +95,12 @@ export class Polygon {
|
||||
this.leafletPoly.setLatLngs(latLngs);
|
||||
this.leafletPoly.redraw();
|
||||
}
|
||||
|
||||
private getPolygonColor(settings: PolygonSettings): string | null {
|
||||
if (settings.usePolygonColorFunction) {
|
||||
return safeExecute(settings.polygonColorFunction, [this.data, this.dataSources, this.data.dsIndex]);
|
||||
} else {
|
||||
return settings.polygonColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,8 @@ export const googleMapSettingsSchema =
|
||||
properties: {
|
||||
gmApiKey: {
|
||||
title: 'Google Maps API Key',
|
||||
type: 'string'
|
||||
type: 'string',
|
||||
default: 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q'
|
||||
},
|
||||
gmDefaultMapType: {
|
||||
title: 'Default map type',
|
||||
@ -30,8 +31,7 @@ export const googleMapSettingsSchema =
|
||||
default: 'roadmap'
|
||||
}
|
||||
},
|
||||
required: [
|
||||
]
|
||||
required: []
|
||||
},
|
||||
form: [
|
||||
'gmApiKey',
|
||||
@ -69,7 +69,8 @@ export const tencentMapSettingsSchema =
|
||||
properties: {
|
||||
tmApiKey: {
|
||||
title: 'Tencent Maps API Key',
|
||||
type: 'string'
|
||||
type: 'string',
|
||||
default: '84d6d83e0e51e481e50454ccbe8986b'
|
||||
},
|
||||
tmDefaultMapType: {
|
||||
title: 'Default map type',
|
||||
@ -77,8 +78,7 @@ export const tencentMapSettingsSchema =
|
||||
default: 'roadmap'
|
||||
}
|
||||
},
|
||||
required: [
|
||||
]
|
||||
required: []
|
||||
},
|
||||
form: [
|
||||
'tmApiKey',
|
||||
@ -117,6 +117,7 @@ export const hereMapSettingsSchema =
|
||||
},
|
||||
credentials: {
|
||||
type: 'object',
|
||||
title: 'Credentials',
|
||||
properties: {
|
||||
app_id: {
|
||||
title: 'HERE app id',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user