Browse Source
* add base map infrastructure * add leaflet css * add tencent map * add google maps support * added image map support * refactor schemes * here maps support && WIP on markers * add simple marker suppor * data update & polyline support * map bouds support * add some settings support * add map provider select to settings * labels support * WIP on trip animation widget * WIP on history control and route interpolation * trip-animation map provider & custom markers * comleted track marker & history controls * add license headers * label fix & tooltips support * WIP on polygons * marker dropping support * add polygon support * add label to trip animation * WIP on tooltips * lint anf typed leaflet AddMarker * some typing and poly improvements * add typing * add marker creation * update proxy * save position fix Co-authored-by: Artem Halushko <ahalushko@thingboards.io> Co-authored-by: Adsumus <artemtv42@gmail.com>pull/2540/head
ArtemHalushko
6 years ago
committed by
GitHub
GitHub
44 changed files with 3926 additions and 54 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,201 @@ |
|||
Apache License |
|||
Version 2.0, January 2004 |
|||
http://www.apache.org/licenses/ |
|||
|
|||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
|||
|
|||
1. Definitions. |
|||
|
|||
"License" shall mean the terms and conditions for use, reproduction, |
|||
and distribution as defined by Sections 1 through 9 of this document. |
|||
|
|||
"Licensor" shall mean the copyright owner or entity authorized by |
|||
the copyright owner that is granting the License. |
|||
|
|||
"Legal Entity" shall mean the union of the acting entity and all |
|||
other entities that control, are controlled by, or are under common |
|||
control with that entity. For the purposes of this definition, |
|||
"control" means (i) the power, direct or indirect, to cause the |
|||
direction or management of such entity, whether by contract or |
|||
otherwise, or (ii) ownership of fifty percent (50%) or more of the |
|||
outstanding shares, or (iii) beneficial ownership of such entity. |
|||
|
|||
"You" (or "Your") shall mean an individual or Legal Entity |
|||
exercising permissions granted by this License. |
|||
|
|||
"Source" form shall mean the preferred form for making modifications, |
|||
including but not limited to software source code, documentation |
|||
source, and configuration files. |
|||
|
|||
"Object" form shall mean any form resulting from mechanical |
|||
transformation or translation of a Source form, including but |
|||
not limited to compiled object code, generated documentation, |
|||
and conversions to other media types. |
|||
|
|||
"Work" shall mean the work of authorship, whether in Source or |
|||
Object form, made available under the License, as indicated by a |
|||
copyright notice that is included in or attached to the work |
|||
(an example is provided in the Appendix below). |
|||
|
|||
"Derivative Works" shall mean any work, whether in Source or Object |
|||
form, that is based on (or derived from) the Work and for which the |
|||
editorial revisions, annotations, elaborations, or other modifications |
|||
represent, as a whole, an original work of authorship. For the purposes |
|||
of this License, Derivative Works shall not include works that remain |
|||
separable from, or merely link (or bind by name) to the interfaces of, |
|||
the Work and Derivative Works thereof. |
|||
|
|||
"Contribution" shall mean any work of authorship, including |
|||
the original version of the Work and any modifications or additions |
|||
to that Work or Derivative Works thereof, that is intentionally |
|||
submitted to Licensor for inclusion in the Work by the copyright owner |
|||
or by an individual or Legal Entity authorized to submit on behalf of |
|||
the copyright owner. For the purposes of this definition, "submitted" |
|||
means any form of electronic, verbal, or written communication sent |
|||
to the Licensor or its representatives, including but not limited to |
|||
communication on electronic mailing lists, source code control systems, |
|||
and issue tracking systems that are managed by, or on behalf of, the |
|||
Licensor for the purpose of discussing and improving the Work, but |
|||
excluding communication that is conspicuously marked or otherwise |
|||
designated in writing by the copyright owner as "Not a Contribution." |
|||
|
|||
"Contributor" shall mean Licensor and any individual or Legal Entity |
|||
on behalf of whom a Contribution has been received by Licensor and |
|||
subsequently incorporated within the Work. |
|||
|
|||
2. Grant of Copyright License. Subject to the terms and conditions of |
|||
this License, each Contributor hereby grants to You a perpetual, |
|||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|||
copyright license to reproduce, prepare Derivative Works of, |
|||
publicly display, publicly perform, sublicense, and distribute the |
|||
Work and such Derivative Works in Source or Object form. |
|||
|
|||
3. Grant of Patent License. Subject to the terms and conditions of |
|||
this License, each Contributor hereby grants to You a perpetual, |
|||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable |
|||
(except as stated in this section) patent license to make, have made, |
|||
use, offer to sell, sell, import, and otherwise transfer the Work, |
|||
where such license applies only to those patent claims licensable |
|||
by such Contributor that are necessarily infringed by their |
|||
Contribution(s) alone or by combination of their Contribution(s) |
|||
with the Work to which such Contribution(s) was submitted. If You |
|||
institute patent litigation against any entity (including a |
|||
cross-claim or counterclaim in a lawsuit) alleging that the Work |
|||
or a Contribution incorporated within the Work constitutes direct |
|||
or contributory patent infringement, then any patent licenses |
|||
granted to You under this License for that Work shall terminate |
|||
as of the date such litigation is filed. |
|||
|
|||
4. Redistribution. You may reproduce and distribute copies of the |
|||
Work or Derivative Works thereof in any medium, with or without |
|||
modifications, and in Source or Object form, provided that You |
|||
meet the following conditions: |
|||
|
|||
(a) You must give any other recipients of the Work or |
|||
Derivative Works a copy of this License; and |
|||
|
|||
(b) You must cause any modified files to carry prominent notices |
|||
stating that You changed the files; and |
|||
|
|||
(c) You must retain, in the Source form of any Derivative Works |
|||
that You distribute, all copyright, patent, trademark, and |
|||
attribution notices from the Source form of the Work, |
|||
excluding those notices that do not pertain to any part of |
|||
the Derivative Works; and |
|||
|
|||
(d) If the Work includes a "NOTICE" text file as part of its |
|||
distribution, then any Derivative Works that You distribute must |
|||
include a readable copy of the attribution notices contained |
|||
within such NOTICE file, excluding those notices that do not |
|||
pertain to any part of the Derivative Works, in at least one |
|||
of the following places: within a NOTICE text file distributed |
|||
as part of the Derivative Works; within the Source form or |
|||
documentation, if provided along with the Derivative Works; or, |
|||
within a display generated by the Derivative Works, if and |
|||
wherever such third-party notices normally appear. The contents |
|||
of the NOTICE file are for informational purposes only and |
|||
do not modify the License. You may add Your own attribution |
|||
notices within Derivative Works that You distribute, alongside |
|||
or as an addendum to the NOTICE text from the Work, provided |
|||
that such additional attribution notices cannot be construed |
|||
as modifying the License. |
|||
|
|||
You may add Your own copyright statement to Your modifications and |
|||
may provide additional or different license terms and conditions |
|||
for use, reproduction, or distribution of Your modifications, or |
|||
for any such Derivative Works as a whole, provided Your use, |
|||
reproduction, and distribution of the Work otherwise complies with |
|||
the conditions stated in this License. |
|||
|
|||
5. Submission of Contributions. Unless You explicitly state otherwise, |
|||
any Contribution intentionally submitted for inclusion in the Work |
|||
by You to the Licensor shall be under the terms and conditions of |
|||
this License, without any additional terms or conditions. |
|||
Notwithstanding the above, nothing herein shall supersede or modify |
|||
the terms of any separate license agreement you may have executed |
|||
with Licensor regarding such Contributions. |
|||
|
|||
6. Trademarks. This License does not grant permission to use the trade |
|||
names, trademarks, service marks, or product names of the Licensor, |
|||
except as required for reasonable and customary use in describing the |
|||
origin of the Work and reproducing the content of the NOTICE file. |
|||
|
|||
7. Disclaimer of Warranty. Unless required by applicable law or |
|||
agreed to in writing, Licensor provides the Work (and each |
|||
Contributor provides its Contributions) on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or |
|||
implied, including, without limitation, any warranties or conditions |
|||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A |
|||
PARTICULAR PURPOSE. You are solely responsible for determining the |
|||
appropriateness of using or redistributing the Work and assume any |
|||
risks associated with Your exercise of permissions under this License. |
|||
|
|||
8. Limitation of Liability. In no event and under no legal theory, |
|||
whether in tort (including negligence), contract, or otherwise, |
|||
unless required by applicable law (such as deliberate and grossly |
|||
negligent acts) or agreed to in writing, shall any Contributor be |
|||
liable to You for damages, including any direct, indirect, special, |
|||
incidental, or consequential damages of any character arising as a |
|||
result of this License or out of the use or inability to use the |
|||
Work (including but not limited to damages for loss of goodwill, |
|||
work stoppage, computer failure or malfunction, or any and all |
|||
other commercial damages or losses), even if such Contributor |
|||
has been advised of the possibility of such damages. |
|||
|
|||
9. Accepting Warranty or Additional Liability. While redistributing |
|||
the Work or Derivative Works thereof, You may choose to offer, |
|||
and charge a fee for, acceptance of support, warranty, indemnity, |
|||
or other liability obligations and/or rights consistent with this |
|||
License. However, in accepting such obligations, You may act only |
|||
on Your own behalf and on Your sole responsibility, not on behalf |
|||
of any other Contributor, and only if You agree to indemnify, |
|||
defend, and hold each Contributor harmless for any liability |
|||
incurred by, or claims asserted against, such Contributor by reason |
|||
of your accepting any such warranty or additional liability. |
|||
|
|||
END OF TERMS AND CONDITIONS |
|||
|
|||
APPENDIX: How to apply the Apache License to your work. |
|||
|
|||
To apply the Apache License to your work, attach the following |
|||
boilerplate notice, with the fields enclosed by brackets "[]" |
|||
replaced with your own identifying information. (Don't include |
|||
the brackets!) The text should be enclosed in the appropriate |
|||
comment syntax for the file format. We also recommend that a |
|||
file or class name and description of purpose be included on the |
|||
same "printed page" as the copyright notice for easier |
|||
identification within third-party archives. |
|||
|
|||
Copyright [yyyy] [name of copyright owner] |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
@ -0,0 +1,83 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { JsonSchema, JsonSettingsSchema } from '@app/shared/public-api'; |
|||
|
|||
|
|||
export function initSchema(): JsonSettingsSchema { |
|||
return { |
|||
schema: { |
|||
type: 'object', |
|||
properties: {}, |
|||
required: [] |
|||
}, |
|||
form: [], |
|||
groupInfoes: [] |
|||
}; |
|||
} |
|||
|
|||
export function addGroupInfo(schema: JsonSettingsSchema, title: string) { |
|||
schema.groupInfoes.push({ |
|||
formIndex: schema.groupInfoes?.length || 0, |
|||
GroupTitle: title |
|||
}); |
|||
} |
|||
|
|||
export function addToSchema(schema: JsonSettingsSchema, newSchema: JsonSettingsSchema) { |
|||
Object.assign(schema.schema.properties, newSchema.schema.properties); |
|||
schema.schema.required = schema.schema.required.concat(newSchema.schema.required); |
|||
schema.form.push(newSchema.form); |
|||
} |
|||
|
|||
export function mergeSchemes(schemes: JsonSettingsSchema[]): JsonSettingsSchema { |
|||
return schemes.reduce((finalSchema: JsonSettingsSchema, schema: JsonSettingsSchema) => { |
|||
return { |
|||
schema: { |
|||
properties: { |
|||
...finalSchema.schema.properties, |
|||
...schema.schema.properties |
|||
}, |
|||
required: [ |
|||
...finalSchema.schema.required, |
|||
...schema.schema.required |
|||
] |
|||
}, |
|||
form: [ |
|||
...finalSchema.form, |
|||
...schema.form |
|||
] |
|||
} as JsonSettingsSchema; |
|||
}, initSchema()); |
|||
} |
|||
|
|||
export function addCondition(schema: JsonSettingsSchema, condition: String): JsonSettingsSchema { |
|||
schema.form = schema.form.map(element => { |
|||
if (typeof element === 'string') { |
|||
return { |
|||
key: element, |
|||
condition |
|||
} |
|||
} |
|||
if (typeof element == 'object') { |
|||
if (element.condition) { |
|||
element.condition += ' && ' + condition |
|||
} |
|||
else element.condition = condition; |
|||
} |
|||
return element; |
|||
}); |
|||
return schema; |
|||
} |
|||
@ -0,0 +1,310 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
|
|||
import 'leaflet-providers'; |
|||
import 'leaflet.markercluster/dist/MarkerCluster.css' |
|||
import 'leaflet.markercluster/dist/MarkerCluster.Default.css' |
|||
import 'leaflet.markercluster/dist/leaflet.markercluster' |
|||
|
|||
import { MapSettings, MarkerSettings, FormattedData, UnitedMapSettings, PolygonSettings } from './map-models'; |
|||
import { Marker } from './markers'; |
|||
import { Observable, of, BehaviorSubject, Subject } from 'rxjs'; |
|||
import { filter } from 'rxjs/operators'; |
|||
import { Polyline } from './polyline'; |
|||
import { Polygon } from './polygon'; |
|||
|
|||
export default abstract class LeafletMap { |
|||
|
|||
markers: Map<string, Marker> = new Map(); |
|||
dragMode = true; |
|||
poly: Polyline; |
|||
polygon: Polygon; |
|||
map: L.Map; |
|||
map$: BehaviorSubject<L.Map> = new BehaviorSubject(null); |
|||
ready$: Observable<L.Map> = this.map$.pipe(filter(map => !!map)); |
|||
options: UnitedMapSettings; |
|||
isMarketCluster: boolean; |
|||
bounds: L.LatLngBounds; |
|||
newMarker: L.Marker; |
|||
datasources: FormattedData[]; |
|||
|
|||
constructor(public $container: HTMLElement, options: UnitedMapSettings) { |
|||
this.options = options; |
|||
} |
|||
|
|||
public initSettings(options: MapSettings) { |
|||
const { initCallback, |
|||
disableScrollZooming, }: MapSettings = options; |
|||
if (disableScrollZooming) { |
|||
this.map.scrollWheelZoom.disable(); |
|||
} |
|||
if (initCallback) { |
|||
setTimeout(options.initCallback, 0); |
|||
} |
|||
} |
|||
|
|||
addMarkerControl() { |
|||
if (this.options.draggableMarker) { |
|||
let mousePositionOnMap: L.LatLng; |
|||
let addMarker: L.Control; |
|||
this.map.on('mouseup', (e: L.LeafletMouseEvent) => { |
|||
mousePositionOnMap = e.latlng |
|||
}) |
|||
const dragListener = (e: L.DragEndEvent) => { |
|||
if (e.type === 'dragend' && mousePositionOnMap) { |
|||
const newMarker = L.marker(mousePositionOnMap).addTo(this.map); |
|||
const datasourcesList = document.createElement('div'); |
|||
const customLatLng = this.convertToCustomFormat(mousePositionOnMap); |
|||
this.datasources.forEach(ds => { |
|||
const dsItem = document.createElement('p'); |
|||
dsItem.appendChild(document.createTextNode(ds.entityName)); |
|||
dsItem.setAttribute('style', 'font-size: 14px'); |
|||
dsItem.onclick = () => { |
|||
const updatedEnttity = { ...ds, ...customLatLng }; |
|||
this.saveMarkerLocation(updatedEnttity); |
|||
this.map.removeLayer(newMarker); |
|||
this.deleteMarker(ds.aliasName); |
|||
this.createMarker(ds.aliasName, updatedEnttity, this.datasources, this.options, false); |
|||
} |
|||
datasourcesList.append(dsItem); |
|||
}) |
|||
const popup = L.popup(); |
|||
popup.setContent(datasourcesList); |
|||
newMarker.bindPopup(popup).openPopup(); |
|||
|
|||
} |
|||
addMarker.setPosition('topright') |
|||
} |
|||
L.Control.AddMarker = L.Control.extend({ |
|||
onAdd(map) { |
|||
const img = L.DomUtil.create('img') as any; |
|||
img.src = `assets/add_location.svg`; |
|||
img.style.width = '32px'; |
|||
img.style.height = '32px'; |
|||
img.onclick = this.dragMarker; |
|||
img.draggable = true; |
|||
const draggableImg = new L.Draggable(img); |
|||
draggableImg.enable(); |
|||
draggableImg.on('dragend', dragListener) |
|||
return img; |
|||
}, |
|||
onRemove(map) { |
|||
}, |
|||
dragMarker: this.dragMarker |
|||
|
|||
} as any); |
|||
|
|||
L.control.addMarker = (opts) => { |
|||
return new L.Control.AddMarker(opts); |
|||
} |
|||
|
|||
addMarker = L.control.addMarker({ position: 'topright' }).addTo(this.map); |
|||
} |
|||
} |
|||
|
|||
public setMap(map: L.Map) { |
|||
this.map = map; |
|||
if (this.options.useDefaultCenterPosition) { |
|||
this.map.panTo(this.options.defaultCenterPosition); |
|||
this.bounds = map.getBounds(); |
|||
} |
|||
else this.bounds = new L.LatLngBounds(null, null); |
|||
if (this.options.draggableMarker) { |
|||
this.addMarkerControl(); |
|||
} |
|||
this.map$.next(this.map); |
|||
} |
|||
|
|||
public setDataSources(dataSources) { |
|||
this.datasources = dataSources; |
|||
} |
|||
|
|||
public saveMarkerLocation(e) { |
|||
|
|||
} |
|||
|
|||
createLatLng(lat: number, lng: number): L.LatLng { |
|||
return L.latLng(lat, lng); |
|||
} |
|||
|
|||
createBounds(): L.LatLngBounds { |
|||
return this.map.getBounds(); |
|||
} |
|||
|
|||
extendBounds(bounds: L.LatLngBounds, polyline: L.Polyline) { |
|||
if (polyline && polyline.getLatLngs() && polyline.getBounds()) { |
|||
bounds.extend(polyline.getBounds()); |
|||
} |
|||
} |
|||
|
|||
invalidateSize() { |
|||
this.map?.invalidateSize(true); |
|||
} |
|||
|
|||
onResize() { |
|||
|
|||
} |
|||
|
|||
getCenter() { |
|||
return this.map.getCenter(); |
|||
} |
|||
|
|||
convertPosition(expression: object): L.LatLng { |
|||
const lat = expression[this.options.latKeyName]; |
|||
const lng = expression[this.options.lngKeyName]; |
|||
if (isNaN(lat) || isNaN(lng)) |
|||
return null; |
|||
else |
|||
return L.latLng(lat, lng) as L.LatLng; |
|||
} |
|||
|
|||
convertToCustomFormat(position: L.LatLng): object { |
|||
return { |
|||
[this.options.latKeyName]: position.lat, |
|||
[this.options.lngKeyName]: position.lng |
|||
} |
|||
} |
|||
|
|||
// Markers
|
|||
updateMarkers(markersData) { |
|||
markersData.forEach(data => { |
|||
if (this.convertPosition(data)) { |
|||
if (data.rotationAngle) { |
|||
this.options.icon = L.divIcon({ |
|||
html: `<div class="arrow" style="transform: rotate(${data.rotationAngle}deg)"><div>` |
|||
}) |
|||
} |
|||
else { |
|||
this.options.icon = null; |
|||
} |
|||
if (this.markers.get(data.aliasName)) { |
|||
this.updateMarker(data.aliasName, data, markersData, this.options) |
|||
} |
|||
else { |
|||
this.createMarker(data.aliasName, data, markersData, this.options as MarkerSettings); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
dragMarker = (e, data?) => { |
|||
if (e.type !== 'dragend') return; |
|||
this.saveMarkerLocation({ ...data, ...this.convertToCustomFormat(e.target._latlng) }); |
|||
} |
|||
|
|||
private createMarker(key, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, setFocus = true) { |
|||
this.ready$.subscribe(() => { |
|||
const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources, () => { }, this.dragMarker); |
|||
if (setFocus) |
|||
this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); |
|||
this.markers.set(key, newMarker); |
|||
}); |
|||
} |
|||
|
|||
private updateMarker(key, data, dataSources, settings: MarkerSettings) { |
|||
const marker: Marker = this.markers.get(key); |
|||
const location = this.convertPosition(data) |
|||
if (!location.equals(marker.location)) { |
|||
marker.updateMarkerPosition(location); |
|||
} |
|||
if (settings.showTooltip) { |
|||
marker.updateMarkerTooltip(data); |
|||
} |
|||
marker.setDataSources(data, dataSources); |
|||
marker.updateMarkerIcon(settings); |
|||
} |
|||
|
|||
deleteMarker(key) { |
|||
let marker = this.markers.get(key)?.leafletMarker; |
|||
if (marker) { |
|||
this.map.removeLayer(marker); |
|||
this.markers.delete(key); |
|||
marker = null; |
|||
} |
|||
} |
|||
|
|||
// Polyline
|
|||
|
|||
updatePolylines(polyData: Array<Array<any>>) { |
|||
polyData.forEach(data => { |
|||
if (data.length) { |
|||
const dataSource = polyData.map(arr => arr[0]); |
|||
if (this.poly) { |
|||
this.updatePolyline(data, dataSource, this.options); |
|||
} |
|||
else { |
|||
this.createPolyline(data, dataSource, this.options); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
createPolyline(data: any[], dataSources, settings) { |
|||
if (data.length) |
|||
this.ready$.subscribe(() => { |
|||
this.poly = new Polyline(this.map, |
|||
data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); |
|||
const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); |
|||
if (bounds.isValid()) { |
|||
this.map.fitBounds(bounds); |
|||
this.bounds = bounds; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
updatePolyline(data, dataSources, settings) { |
|||
this.ready$.subscribe(() => { |
|||
this.poly.updatePolyline(settings, data, dataSources); |
|||
}); |
|||
} |
|||
|
|||
// Polygon
|
|||
|
|||
updatePolygons(polyData: any[]) { |
|||
polyData.forEach((data: any) => { |
|||
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]); |
|||
} |
|||
if (this.polygon) { |
|||
this.updatePolygon(data.data, polyData, this.options); |
|||
} |
|||
else { |
|||
this.createPolygon(data.data, polyData, this.options); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
createPolygon(data: FormattedData, dataSources: FormattedData[], settings: PolygonSettings) { |
|||
this.ready$.subscribe(() => { |
|||
this.polygon = new Polygon(this.map, data, dataSources, settings); |
|||
const bounds = this.bounds.extend(this.polygon.leafletPoly.getBounds()); |
|||
if (bounds.isValid()) { |
|||
this.map.fitBounds(bounds); |
|||
this.bounds = bounds; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
updatePolygon(data, dataSources, settings) { |
|||
this.ready$.subscribe(() => { |
|||
// this.polygon.updatePolygon(settings, data, dataSources);
|
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,133 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License; Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing; software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS;
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND; either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { LatLngTuple } from 'leaflet'; |
|||
|
|||
export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; |
|||
export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; |
|||
|
|||
export type MapSettings = { |
|||
polygonKeyName: any; |
|||
draggableMarker: boolean; |
|||
initCallback?: () => any; |
|||
defaultZoomLevel?: number; |
|||
dontFitMapBounds?: boolean; |
|||
disableScrollZooming?: boolean; |
|||
minZoomLevel?: number; |
|||
latKeyName?: string; |
|||
lngKeyName?: string; |
|||
xPosKeyName?: string; |
|||
yPosKeyName?: string; |
|||
mapProvider: MapProviders; |
|||
mapUrl?: string; |
|||
mapImageUrl?: string; |
|||
provider?: MapProviders; |
|||
credentials?: any; // declare credentials format
|
|||
defaultCenterPosition?: LatLngTuple; |
|||
markerClusteringSetting?; |
|||
useDefaultCenterPosition?: boolean; |
|||
gmDefaultMapType?: string; |
|||
useLabelFunction: string; |
|||
icon?: any; |
|||
} |
|||
|
|||
export enum MapProviders { |
|||
google = 'google-map', |
|||
openstreet = 'openstreet-map', |
|||
here = 'here', |
|||
image = 'image-map', |
|||
tencent = 'tencent-map' |
|||
} |
|||
|
|||
export type MarkerSettings = { |
|||
tooltipPattern?: any; |
|||
icon?: any; |
|||
showLabel?: boolean; |
|||
label: string; |
|||
labelColor: string; |
|||
labelText: string; |
|||
useLabelFunction: boolean; |
|||
draggableMarker: boolean; |
|||
showTooltip?: boolean; |
|||
color?: string; |
|||
autocloseTooltip: boolean; |
|||
displayTooltipAction: string; |
|||
currentImage?: string; |
|||
useMarkerImageFunction?: boolean; |
|||
markerImages?: string[]; |
|||
useMarkerImage: boolean; |
|||
markerImageSize: number; |
|||
markerImage: { |
|||
length: number |
|||
} |
|||
|
|||
colorFunction: GenericFunction; |
|||
tooltipFunction: GenericFunction; |
|||
labelFunction: GenericFunction; |
|||
markerImageFunction?: MarkerImageFunction; |
|||
} |
|||
|
|||
export interface FormattedData { |
|||
aliasName: string; |
|||
entityName: string; |
|||
$datasource: string; |
|||
dsIndex: number; |
|||
deviceType: string |
|||
} |
|||
|
|||
export type PolygonSettings = { |
|||
showPolygon: boolean; |
|||
showTooltip: any; |
|||
polygonStrokeOpacity: number; |
|||
polygonOpacity: number; |
|||
polygonStrokeWeight: number; |
|||
polygonStrokeColor: string; |
|||
polygonColor: string; |
|||
autocloseTooltip: boolean; |
|||
displayTooltipAction: string; |
|||
|
|||
polygonColorFunction?: GenericFunction; |
|||
} |
|||
|
|||
export type PolylineSettings = { |
|||
usePolylineDecorator: any; |
|||
autocloseTooltip: boolean; |
|||
displayTooltipAction: string; |
|||
useColorFunction: any; |
|||
color: string; |
|||
useStrokeOpacityFunction: any; |
|||
strokeOpacity: number; |
|||
useStrokeWeightFunction: any; |
|||
strokeWeight: number; |
|||
decoratorOffset: string | number; |
|||
endDecoratorOffset: string | number; |
|||
decoratorRepeat: string | number; |
|||
decoratorSymbol: any; |
|||
decoratorSymbolSize: any; |
|||
useDecoratorCustomColor: any; |
|||
decoratorCustomColor: any; |
|||
|
|||
|
|||
colorFunction: GenericFunction; |
|||
strokeOpacityFunction: GenericFunction; |
|||
strokeWeightFunction: GenericFunction; |
|||
} |
|||
|
|||
export interface HistorySelectSettings { |
|||
buttonColor: string; |
|||
} |
|||
|
|||
export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolygonSettings; |
|||
@ -0,0 +1,31 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { JsonSettingsSchema } from '@app/shared/public-api'; |
|||
|
|||
export interface MapWidgetInterface { |
|||
resize(), |
|||
update(), |
|||
onInit(), |
|||
onDestroy(); |
|||
} |
|||
|
|||
export interface MapWidgetStaticInterface { |
|||
settingsSchema(mapProvider?, drawRoutes?): JsonSettingsSchema; |
|||
getProvidersSchema():JsonSettingsSchema |
|||
dataKeySettingsSchema(): object; |
|||
actionSources(): object; |
|||
} |
|||
@ -0,0 +1,258 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { MapProviders, UnitedMapSettings } from './map-models'; |
|||
import LeafletMap from './leaflet-map'; |
|||
import { |
|||
openstreetMapSettingsSchema, |
|||
googleMapSettingsSchema, |
|||
imageMapSettingsSchema, |
|||
tencentMapSettingsSchema, |
|||
commonMapSettingsSchema, |
|||
routeMapSettingsSchema, |
|||
markerClusteringSettingsSchema, |
|||
markerClusteringSettingsSchemaLeaflet, |
|||
hereMapSettingsSchema, |
|||
mapProviderSchema |
|||
} from './schemes'; |
|||
import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; |
|||
import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; |
|||
import { parseFunction, parseArray, parseData } from '@app/core/utils'; |
|||
import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@app/core/schema-utils'; |
|||
import { AttributeScope, EntityId, JsonSettingsSchema } from '@app/shared/public-api'; |
|||
import { forkJoin } from 'rxjs'; |
|||
import { WidgetContext } from '@app/modules/home/models/widget-component.models'; |
|||
import { AttributeService } from '@app/core/public-api'; |
|||
import { getDefCenterPosition } from './maps-utils'; |
|||
|
|||
let providerSets; |
|||
let defaultSettings; |
|||
|
|||
export class MapWidgetController implements MapWidgetInterface { |
|||
|
|||
constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) { |
|||
if (this.map) { |
|||
this.map.map.remove(); |
|||
delete this.map; |
|||
} |
|||
|
|||
this.data = ctx.data; |
|||
if (!$element) { |
|||
$element = ctx.$container[0]; |
|||
} |
|||
this.settings = this.initSettings(ctx.settings); |
|||
|
|||
const MapClass = providerSets[this.provider]?.MapClass; |
|||
if (!MapClass) { |
|||
return; |
|||
} |
|||
this.map = new MapClass($element, this.settings); |
|||
this.map.saveMarkerLocation = this.setMarkerLocation; |
|||
} |
|||
|
|||
map: LeafletMap; |
|||
provider: MapProviders; |
|||
schema: JsonSettingsSchema; |
|||
data; |
|||
settings: UnitedMapSettings; |
|||
|
|||
public static dataKeySettingsSchema(): object { |
|||
return {}; |
|||
} |
|||
|
|||
public static getProvidersSchema() { |
|||
return mergeSchemes([mapProviderSchema, |
|||
...Object.values(providerSets)?.map( |
|||
(setting: IProvider) => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]); |
|||
} |
|||
|
|||
public static settingsSchema(mapProvider: MapProviders, drawRoutes: boolean): JsonSettingsSchema { |
|||
const schema = initSchema(); |
|||
addToSchema(schema, this.getProvidersSchema()); |
|||
addGroupInfo(schema, 'Map Provider Settings'); |
|||
addToSchema(schema, commonMapSettingsSchema); |
|||
addGroupInfo(schema, 'Common Map Settings'); |
|||
|
|||
if (drawRoutes) { |
|||
addToSchema(schema, routeMapSettingsSchema); |
|||
addGroupInfo(schema, 'Route Map Settings'); |
|||
} else if (mapProvider !== 'image-map') { |
|||
const clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema]) |
|||
addToSchema(schema, clusteringSchema); |
|||
addGroupInfo(schema, 'Markers Clustering Settings'); |
|||
} |
|||
return schema; |
|||
} |
|||
|
|||
public static actionSources(): object { |
|||
return { |
|||
markerClick: { |
|||
name: 'widget-action.marker-click', |
|||
multiple: false |
|||
}, |
|||
polygonClick: { |
|||
name: 'widget-action.polygon-click', |
|||
multiple: false |
|||
}, |
|||
tooltipAction: { |
|||
name: 'widget-action.tooltip-tag-action', |
|||
multiple: true |
|||
} |
|||
}; |
|||
} |
|||
|
|||
onInit() { |
|||
} |
|||
|
|||
setMarkerLocation = (e) => { |
|||
const attributeService = this.ctx.$injector.get(AttributeService); |
|||
forkJoin( |
|||
this.data.filter(data => !!e[data.dataKey.name]) |
|||
.map(data => { |
|||
const entityId: EntityId = { |
|||
entityType: data.datasource.entityType, |
|||
id: data.datasource.entityId |
|||
}; |
|||
return attributeService.saveEntityAttributes( |
|||
entityId, |
|||
AttributeScope.SHARED_SCOPE, |
|||
[{ |
|||
key: data.dataKey.name, |
|||
value: e[data.dataKey.name] |
|||
}] |
|||
); |
|||
})).subscribe(res => { |
|||
console.log('MapWidgetController -> setMarkerLocation -> res', res) |
|||
}); |
|||
} |
|||
|
|||
initSettings(settings: UnitedMapSettings) { |
|||
const functionParams = ['data', 'dsData', 'dsIndex']; |
|||
this.provider = settings.provider || this.mapProvider; |
|||
const customOptions = { |
|||
provider: this.provider, |
|||
mapUrl: settings?.mapImageUrl, |
|||
labelFunction: parseFunction(settings.labelFunction, functionParams), |
|||
tooltipFunction: parseFunction(settings.tooltipFunction, functionParams), |
|||
colorFunction: parseFunction(settings.colorFunction, functionParams), |
|||
polygonColorFunction: parseFunction(settings.polygonColorFunction, functionParams), |
|||
markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']), |
|||
labelColor: this.ctx.widgetConfig.color, |
|||
tooltipPattern: settings.tooltipPattern || |
|||
'<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' + |
|||
settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}', |
|||
defaultCenterPosition: getDefCenterPosition(settings?.defaultCenterPosition), |
|||
currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? { |
|||
url: settings.markerImage, |
|||
size: settings.markerImageSize || 34 |
|||
} : null |
|||
} |
|||
return { ...defaultSettings, ...settings, ...customOptions, } |
|||
} |
|||
|
|||
update() { |
|||
if (this.drawRoutes) |
|||
this.map.updatePolylines(parseArray(this.data)); |
|||
if (this.settings.showPolygon) { |
|||
this.map.updatePolygons(this.data); |
|||
} |
|||
if (this.settings.draggableMarker) { |
|||
this.map.setDataSources(parseData(this.data)); |
|||
} |
|||
else |
|||
this.map.updateMarkers(parseData(this.data)); |
|||
} |
|||
|
|||
resize() { |
|||
this.map?.invalidateSize(); |
|||
this.map.onResize(); |
|||
} |
|||
|
|||
onDestroy() { |
|||
} |
|||
} |
|||
|
|||
export let TbMapWidgetV2: MapWidgetStaticInterface = MapWidgetController; |
|||
|
|||
interface IProvider { |
|||
MapClass: LeafletMap, |
|||
schema: JsonSettingsSchema, |
|||
name: string |
|||
} |
|||
|
|||
providerSets = { |
|||
'openstreet-map': { |
|||
MapClass: OpenStreetMap, |
|||
schema: openstreetMapSettingsSchema, |
|||
name: 'openstreet-map', |
|||
}, |
|||
'tencent-map': { |
|||
MapClass: TencentMap, |
|||
schema: tencentMapSettingsSchema, |
|||
name: 'tencent-map' |
|||
}, |
|||
'google-map': { |
|||
MapClass: GoogleMap, |
|||
schema: googleMapSettingsSchema, |
|||
name: 'google-map' |
|||
}, |
|||
here: { |
|||
MapClass: HEREMap, |
|||
schema: hereMapSettingsSchema, |
|||
name: 'here' |
|||
}, |
|||
'image-map': { |
|||
MapClass: ImageMap, |
|||
schema: imageMapSettingsSchema, |
|||
name: 'image-map' |
|||
} |
|||
} |
|||
|
|||
defaultSettings = { |
|||
xPosKeyName: 'xPos', |
|||
yPosKeyName: 'yPos', |
|||
markerOffsetX: 0.5, |
|||
markerOffsetY: 1, |
|||
latKeyName: 'latitude', |
|||
lngKeyName: 'longitude', |
|||
polygonKeyName: 'coordinates', |
|||
showLabel: false, |
|||
label: '${entityName}', |
|||
showTooltip: false, |
|||
useDefaultCenterPosition: false, |
|||
showTooltipAction: 'click', |
|||
autocloseTooltip: false, |
|||
showPolygon: true, |
|||
labelColor: '#000000', |
|||
color: '#FE7569', |
|||
polygonColor: '#0000ff', |
|||
polygonStrokeColor: '#fe0001', |
|||
polygonOpacity: 0.5, |
|||
polygonStrokeOpacity: 1, |
|||
polygonStrokeWeight: 1, |
|||
useLabelFunction: false, |
|||
markerImages: [], |
|||
strokeWeight: 2, |
|||
strokeOpacity: 1.0, |
|||
initCallback: () => { }, |
|||
defaultZoomLevel: 8, |
|||
dontFitMapBounds: false, |
|||
disableScrollZooming: false, |
|||
minZoomLevel: 16, |
|||
credentials: '', |
|||
markerClusteringSetting: null, |
|||
draggableMarker: false |
|||
} |
|||
@ -0,0 +1,55 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
import _ from 'lodash'; |
|||
import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models'; |
|||
|
|||
export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings): L.Popup { |
|||
const popup = L.popup(); |
|||
popup.setContent(''); |
|||
target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); |
|||
if (settings.displayTooltipAction === 'hover') { |
|||
target.off('click'); |
|||
target.on('mouseover', function () { |
|||
this.openPopup(); |
|||
}); |
|||
target.on('mouseout', function () { |
|||
this.closePopup(); |
|||
}); |
|||
} |
|||
return popup; |
|||
} |
|||
|
|||
export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number { |
|||
return (intermediateMoment - firsMoment) / (secondMoment - firsMoment); |
|||
}; |
|||
|
|||
export function findAngle(startPoint, endPoint) { |
|||
let angle = -Math.atan2(endPoint.latitude - startPoint.latitude, endPoint.longitude - startPoint.longitude); |
|||
angle = angle * 180 / Math.PI; |
|||
return parseInt(angle.toFixed(2), 10); |
|||
} |
|||
|
|||
|
|||
export function getDefCenterPosition(position) { |
|||
if (typeof (position) === 'string') |
|||
return position.split(','); |
|||
if (typeof (position) === 'object') |
|||
return position; |
|||
return [0, 0]; |
|||
} |
|||
|
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* Copyright © 2016-2020 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.arrow { |
|||
height: 30px; |
|||
width: 30px; |
|||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAACAVBMVEUAAAAAqv9AgP8ggP8udP8qgP8ndv8kbf8kgP8eeP8rcf8mc/8jdP8hev8me/8kdv8jcv8pcP8ic/8neP8leP8ofP8mef8pev8nef8oe/8nef8pef8qfv8qgf8qe/8mev8off8oev8oef8oe/8pev8qe/8oe/8off8pfP8oev8pev8qe/8qfP8pev8pe/8qfP8pe/8oev8pe/8qe/8qfP8qfP8qff8qff8qfP8qff8pe/8qff8qfP8qfP8pev8pev8JYf8KYP8UY/8UZf8WY/8WZv8YZP8bZP8fZv8fZ/8gZv8gZ/8hZP8iZ/8jaf8jav8kaP8kav8ka/8kbP8kbf8kb/8lbP8lbf8lbv8lb/8lcP8mb/8mcP8mcf8ncf8ncv8nc/8ndP8ndf8ocv4odP8odf8odv8od/8oeP8peP8pef8pev8qev8qe/8qfP8rbP8rfP8rff8tc/4vcP4xbv4zcf42dP49df4+gP4/fv5Rif5biP1ul/14mvx4nvyMrfuMrvuWsfuctvuguPuww/vD0fnH1vrI1frK2PrL2fnV3vnb4vnc5fnd5fnd5vne5fnj6vnl6/jm7Pno7fXo7fbo7ffo7fjp7fnp7vjq7vjs8fnt8Pjt8fjw8fXw8fbw8fjy8/jz9fn5+fj7+/f++/j/+/X/+/b/+/f/+/j//Pj//vhoUaHMAAAAQHRSTlMAAwQICwwNDg4REhQWFxscHTI1QkRGSktOU1RdYWFscXJzhYWKqre6wMHDw8PHx8rN09TW1uLi7e/x8vLz9fj5hfwW0QAAAnVJREFUSMeV1fdb00AYB/BzoQjurSjuvQcuFLcgWqTVtLVpL0GS2GuDuLeouPeAiLOuwOFf6WU0ucvq4/d52v6Qz/M+18u97wHgyfh5m5vUYlHt2rV8BojOqGUqonNhVgTegfxZE2JXoMAUFgXYsSoKy3YfnoIiUqxm8UwUnSoaT0WVUuPi6lCUz+ft/+pqNYwqsiwrlm8s45XBVpE7BQgFyeZLbB1ihVwmefjpDSjbi7HwziArCdlU/MArjDHfaestBh4dZs9/JBb/4kVbo5FEr/JaWRL4VPvZ39jMVV4q63qiCx7bIfDJtst/LYt/JnLldaNuACbS9JwiQj4Zu/3HlDr5nEyJivMcgPn0Nogwfaq1Z9igQ7pO9AuqNEJzQINTV5ZghjvywLFG6dYMVRptAF3uPvBc8xPsWH0Q44ccpEqjvaBoa0lI7/ts2kHdCsbDJ5jSSC2/SEU8856x+hDGd+JZujQquvp6ieT7Nyel0o/jCSgzTefq0y81I30f7PRr2i1fbWrd+98yXtMGfOt29wTyiebHpu83dZ+m3U969qSBeje5DHeod8Dx5PeYZ7/rPO8y0XLvk+1J8UcJyLzLScw5kTsgz8Xu2vXJV0uaOSfsGcznZZGcwdi1L5qV13HmDILV3tY1z3fbxa8Wv+Se74VEj/H3jmz0TvuVN4Z+x/ZORF8efU64s/CtUT0vCbk0d/DZTSgxPQ/WhswTSYTZrDNPllaaVQo1q/Y4k63mv+YgmFZxxk6gR/LsCngcO+6nR9lCrfcqqQ2/dxqD7rT1IXhxyB24O8BuCr9eq9axU7F7wYjoy3ty3TZVLaCC2rRxru/hPwVgtEdFK5vOAAAAAElFTkSuQmCC"); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.leaflet-div-icon, |
|||
.tb-marker-label, |
|||
.tb-marker-label:before { |
|||
border: none; |
|||
background: none; |
|||
box-shadow: none; |
|||
} |
|||
@ -0,0 +1,184 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
import { MarkerSettings, FormattedData } from './map-models'; |
|||
import { aspectCache, safeExecute, parseTemplate } from '@app/core/utils'; |
|||
import { createTooltip } from './maps-utils'; |
|||
|
|||
export class Marker { |
|||
|
|||
leafletMarker: L.Marker; |
|||
tooltipOffset: [number, number]; |
|||
tooltip: L.Popup; |
|||
location: L.LatLngExpression; |
|||
data: FormattedData; |
|||
dataSources: FormattedData[]; |
|||
|
|||
constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, |
|||
data?, dataSources?, onClickListener?, onDragendListener?) { |
|||
this.setDataSources(data, dataSources); |
|||
this.leafletMarker = L.marker(location, { |
|||
draggable: settings.draggableMarker |
|||
}); |
|||
|
|||
this.createMarkerIcon((iconInfo) => { |
|||
this.leafletMarker.setIcon(iconInfo.icon); |
|||
this.tooltipOffset = [0, -iconInfo.size[1] + 10]; |
|||
this.updateMarkerLabel(settings); |
|||
this.leafletMarker.addTo(map); |
|||
}); |
|||
|
|||
if (settings.showTooltip) { |
|||
this.tooltip = createTooltip(this.leafletMarker, settings); |
|||
this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data)); |
|||
} |
|||
|
|||
if (onClickListener) { |
|||
this.leafletMarker.on('click', onClickListener); |
|||
} |
|||
|
|||
if (onDragendListener) { |
|||
this.leafletMarker.on('dragend', (e) => onDragendListener(e, this.data)); |
|||
} |
|||
} |
|||
|
|||
setDataSources(data: FormattedData, dataSources: FormattedData[]) { |
|||
this.data = data; |
|||
this.dataSources = dataSources; |
|||
} |
|||
|
|||
updateMarkerTooltip(data: FormattedData) { |
|||
this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data)); |
|||
} |
|||
|
|||
updateMarkerPosition(position: L.LatLngExpression) { |
|||
this.leafletMarker.setLatLng(position); |
|||
} |
|||
|
|||
updateMarkerLabel(settings: MarkerSettings) { |
|||
this.leafletMarker.unbindTooltip(); |
|||
|
|||
if (settings.showLabel) { |
|||
if (settings.useLabelFunction) { |
|||
settings.labelText = safeExecute(settings.labelFunction, [this.data, this.dataSources, this.data.dsIndex]) |
|||
} |
|||
else settings.labelText = parseTemplate(settings.label, this.data); |
|||
this.leafletMarker.bindTooltip(`<div style="color: ${settings.labelColor};"><b>${settings.labelText}</b></div>`, |
|||
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset }); |
|||
} |
|||
} |
|||
|
|||
updateMarkerColor(color) { |
|||
this.createDefaultMarkerIcon(color, (iconInfo) => { |
|||
this.leafletMarker.setIcon(iconInfo.icon); |
|||
}); |
|||
} |
|||
|
|||
updateMarkerIcon(settings: MarkerSettings) { |
|||
this.createMarkerIcon((iconInfo) => { |
|||
this.leafletMarker.setIcon(iconInfo.icon); |
|||
this.tooltipOffset = [0, -iconInfo.size[1] + 10]; |
|||
this.updateMarkerLabel(settings); |
|||
}); |
|||
} |
|||
|
|||
createMarkerIcon(onMarkerIconReady) { |
|||
|
|||
if (this.settings.icon) { |
|||
onMarkerIconReady({ |
|||
size: [30, 30], |
|||
icon: this.settings.icon, |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
const currentImage = this.settings.useMarkerImageFunction ? |
|||
safeExecute(this.settings.markerImageFunction, |
|||
[this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage; |
|||
|
|||
|
|||
if (currentImage && currentImage.url) { |
|||
aspectCache(currentImage.url).subscribe( |
|||
(aspect) => { |
|||
if (aspect) { |
|||
let width; |
|||
let height; |
|||
if (aspect > 1) { |
|||
width = currentImage.size; |
|||
height = currentImage.size / aspect; |
|||
} else { |
|||
width = currentImage.size * aspect; |
|||
height = currentImage.size; |
|||
} |
|||
const icon = L.icon({ |
|||
iconUrl: currentImage.url, |
|||
iconSize: [width, height], |
|||
iconAnchor: [width / 2, height], |
|||
popupAnchor: [0, -height] |
|||
}); |
|||
const iconInfo = { |
|||
size: [width, height], |
|||
icon |
|||
}; |
|||
onMarkerIconReady(iconInfo); |
|||
} else { |
|||
this.createDefaultMarkerIcon(this.settings.color, onMarkerIconReady); |
|||
} |
|||
} |
|||
); |
|||
} else { |
|||
this.createDefaultMarkerIcon(this.settings.color, onMarkerIconReady); |
|||
} |
|||
} |
|||
|
|||
createDefaultMarkerIcon(color, onMarkerIconReady) { |
|||
const pinColor = color.substr(1); |
|||
const icon = L.icon({ |
|||
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor, |
|||
iconSize: [21, 34], |
|||
iconAnchor: [10, 34], |
|||
popupAnchor: [0, -34], |
|||
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', |
|||
shadowSize: [40, 37], |
|||
shadowAnchor: [12, 35] |
|||
}); |
|||
const iconInfo = { |
|||
size: [21, 34], |
|||
icon |
|||
}; |
|||
onMarkerIconReady(iconInfo); |
|||
} |
|||
|
|||
|
|||
|
|||
removeMarker() { |
|||
/* this.map$.subscribe(map => |
|||
this.leafletMarker.addTo(map))*/ |
|||
} |
|||
|
|||
extendBoundsWithMarker(bounds) { |
|||
bounds.extend(this.leafletMarker.getLatLng()); |
|||
} |
|||
|
|||
getMarkerPosition() { |
|||
return this.leafletMarker.getLatLng(); |
|||
} |
|||
|
|||
setMarkerPosition(latLng) { |
|||
this.leafletMarker.setLatLng(latLng); |
|||
} |
|||
} |
|||
@ -0,0 +1,70 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L, { LatLngExpression } from 'leaflet'; |
|||
import { createTooltip } from './maps-utils'; |
|||
import { PolygonSettings } from './map-models'; |
|||
|
|||
export class Polygon { |
|||
|
|||
leafletPoly: L.Polygon; |
|||
tooltip; |
|||
|
|||
constructor(public map, coordinates, dataSources, settings: PolygonSettings, onClickListener?) { |
|||
this.leafletPoly = L.polygon(coordinates, { |
|||
fill: true, |
|||
fillColor: settings.polygonColor, |
|||
color: settings.polygonStrokeColor, |
|||
weight: settings.polygonStrokeWeight, |
|||
fillOpacity: settings.polygonOpacity, |
|||
opacity: settings.polygonStrokeOpacity |
|||
}).addTo(this.map); |
|||
|
|||
if (settings.showTooltip) { |
|||
this.tooltip = createTooltip(this.leafletPoly, settings); |
|||
} |
|||
if (onClickListener) { |
|||
this.leafletPoly.on('click', onClickListener); |
|||
} |
|||
} |
|||
|
|||
removePolygon() { |
|||
this.map.removeLayer(this.leafletPoly); |
|||
} |
|||
|
|||
updatePolygonColor(settings) { |
|||
console.log('Polygon -> updatePolygonColor -> settings', settings) |
|||
const style: L.PathOptions = { |
|||
|
|||
fill: true, |
|||
fillColor: settings.color, |
|||
color: settings.color, |
|||
weight: settings.polygonStrokeWeight, |
|||
fillOpacity: settings.polygonOpacity, |
|||
opacity: settings.polygonStrokeOpacity |
|||
}; |
|||
this.leafletPoly.setStyle(style); |
|||
} |
|||
|
|||
getPolygonLatLngs() { |
|||
return this.leafletPoly.getLatLngs(); |
|||
} |
|||
|
|||
setPolygonLatLngs(latLngs: LatLngExpression[]) { |
|||
this.leafletPoly.setLatLngs(latLngs); |
|||
this.leafletPoly.redraw(); |
|||
} |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L, { PolylineDecoratorOptions } from 'leaflet'; |
|||
import 'leaflet-polylinedecorator'; |
|||
|
|||
import { safeExecute } from '@app/core/utils'; |
|||
import { PolylineSettings } from './map-models'; |
|||
|
|||
export class Polyline { |
|||
|
|||
leafletPoly: L.Polyline; |
|||
polylineDecorator: L.PolylineDecorator; |
|||
dataSources; |
|||
data; |
|||
|
|||
constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) { |
|||
this.dataSources = dataSources; |
|||
this.data = data; |
|||
|
|||
this.leafletPoly = L.polyline(locations, |
|||
this.getPolyStyle(settings) |
|||
).addTo(this.map); |
|||
if (settings.usePolylineDecorator) { |
|||
this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map); |
|||
} |
|||
} |
|||
|
|||
getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions { |
|||
return { |
|||
patterns: [ |
|||
{ |
|||
offset: settings.decoratorOffset, |
|||
endOffset: settings.endDecoratorOffset, |
|||
repeat: settings.decoratorRepeat, |
|||
symbol: L.Symbol[settings.decoratorSymbol]({ |
|||
pixelSize: settings.decoratorSymbolSize, |
|||
polygon: false, |
|||
pathOptions: { |
|||
color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color, |
|||
stroke: true |
|||
} |
|||
}) |
|||
} |
|||
], |
|||
interactive: false, |
|||
} as PolylineDecoratorOptions |
|||
} |
|||
|
|||
updatePolyline(settings, data, dataSources) { |
|||
this.leafletPoly.setStyle(this.getPolyStyle(settings)); |
|||
// this.setPolylineLatLngs(data);
|
|||
if(this.polylineDecorator) |
|||
this.polylineDecorator.setPaths(this.leafletPoly); |
|||
} |
|||
|
|||
getPolyStyle(settings: PolylineSettings): L.PolylineOptions { |
|||
return { |
|||
color: settings.useColorFunction ? |
|||
safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color, |
|||
opacity: settings.useStrokeOpacityFunction ? |
|||
safeExecute(settings.strokeOpacityFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.strokeOpacity, |
|||
weight: settings.useStrokeWeightFunction ? |
|||
safeExecute(settings.strokeWeightFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.strokeWeight, |
|||
} |
|||
} |
|||
|
|||
removePolyline() { |
|||
this.map.removeLayer(this.leafletPoly); |
|||
} |
|||
|
|||
getPolylineLatLngs() { |
|||
return this.leafletPoly.getLatLngs(); |
|||
} |
|||
|
|||
setPolylineLatLngs(latLngs) { |
|||
this.leafletPoly.setLatLngs(latLngs); |
|||
} |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
|
|||
import L from 'leaflet'; |
|||
import LeafletMap from '../leaflet-map'; |
|||
import { MapSettings, UnitedMapSettings } from '../map-models'; |
|||
import 'leaflet.gridlayer.googlemutant'; |
|||
|
|||
let googleLoaded = false; |
|||
|
|||
|
|||
export class GoogleMap extends LeafletMap { |
|||
constructor($container, options: UnitedMapSettings) { |
|||
|
|||
super($container, options); |
|||
this.loadGoogle(() => { |
|||
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); |
|||
const roads = (L.gridLayer as any).googleMutant({ |
|||
type: options?.gmDefaultMapType || 'roadmap' |
|||
}).addTo(map); |
|||
super.setMap(map); |
|||
}, options.credentials.apiKey); |
|||
super.initSettings(options); |
|||
} |
|||
|
|||
private loadGoogle(callback, apiKey = 'AIzaSyDoEx2kaGz3PxwbI9T7ccTSg5xjdw8Nw8Q') { |
|||
if (googleLoaded) { |
|||
callback() |
|||
} |
|||
else { |
|||
googleLoaded = true; |
|||
const script = document.createElement('script'); |
|||
script.onload = () => { |
|||
callback(); |
|||
} |
|||
script.onerror = () => { |
|||
googleLoaded = false; |
|||
} |
|||
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`; |
|||
document.getElementsByTagName('head')[0].appendChild(script); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
import LeafletMap from '../leaflet-map'; |
|||
import { MapSettings, UnitedMapSettings } from '../map-models'; |
|||
|
|||
export class HEREMap extends LeafletMap { |
|||
constructor($container, options: UnitedMapSettings) { |
|||
const defaultCredentials = |
|||
{ |
|||
app_id: 'AhM6TzD9ThyK78CT3ptx', |
|||
app_code: 'p6NPiITB3Vv0GMUFnkLOOg' |
|||
} |
|||
super($container, options); |
|||
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); |
|||
const tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'HERE.normalDay', options.credentials || defaultCredentials); |
|||
tileLayer.addTo(map); |
|||
super.setMap(map); |
|||
super.initSettings(options); |
|||
} |
|||
} |
|||
@ -0,0 +1,133 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
import LeafletMap from '../leaflet-map'; |
|||
import { MapSettings, UnitedMapSettings } from '../map-models'; |
|||
import { aspectCache } from '@app/core/utils'; |
|||
|
|||
const maxZoom = 4;// ?
|
|||
|
|||
export class ImageMap extends LeafletMap { |
|||
|
|||
imageOverlay; |
|||
aspect = 0; |
|||
width = 0; |
|||
height = 0; |
|||
|
|||
constructor($container: HTMLElement, options: UnitedMapSettings) { |
|||
super($container, options); |
|||
aspectCache(options.mapUrl).subscribe(aspect => { |
|||
this.aspect = aspect; |
|||
this.onResize(); |
|||
super.setMap(this.map); |
|||
super.initSettings(options); |
|||
}); |
|||
} |
|||
|
|||
updateBounds(updateImage?, lastCenterPos?) { |
|||
const w = this.width; |
|||
const h = this.height; |
|||
let southWest = this.pointToLatLng(0, h); |
|||
let northEast = this.pointToLatLng(w, 0); |
|||
const bounds = new L.LatLngBounds(southWest, northEast); |
|||
|
|||
if (updateImage && this.imageOverlay) { |
|||
this.imageOverlay.remove(); |
|||
this.imageOverlay = null; |
|||
} |
|||
|
|||
if (this.imageOverlay) { |
|||
this.imageOverlay.setBounds(bounds); |
|||
} else { |
|||
this.imageOverlay = L.imageOverlay(this.options.mapUrl, bounds).addTo(this.map); |
|||
|
|||
} |
|||
const padding = 200 * maxZoom; |
|||
southWest = this.pointToLatLng(-padding, h + padding); |
|||
northEast = this.pointToLatLng(w + padding, -padding); |
|||
const maxBounds = new L.LatLngBounds(southWest, northEast); |
|||
this.map.setMaxBounds(maxBounds); |
|||
if (lastCenterPos) { |
|||
lastCenterPos.x *= w; |
|||
lastCenterPos.y *= h; |
|||
/* this.ctx.$scope.$injector.get('$mdUtil').nextTick(() => { |
|||
this.map.panTo(center, { animate: false }); |
|||
});*/ |
|||
} |
|||
} |
|||
|
|||
onResize(updateImage?) { |
|||
let width = this.$container.clientWidth; |
|||
if (width > 0 && this.aspect) { |
|||
let height = width / this.aspect; |
|||
const imageMapHeight = this.$container.clientHeight; |
|||
if (imageMapHeight > 0 && height > imageMapHeight) { |
|||
height = imageMapHeight; |
|||
width = height * this.aspect; |
|||
} |
|||
width *= maxZoom; |
|||
const prevWidth = this.width; |
|||
const prevHeight = this.height; |
|||
if (this.width !== width) { |
|||
this.width = width; |
|||
this.height = width / this.aspect; |
|||
if (!this.map) { |
|||
this.initMap(updateImage); |
|||
} else { |
|||
const lastCenterPos = this.latLngToPoint(this.map.getCenter()); |
|||
lastCenterPos.x /= prevWidth; |
|||
lastCenterPos.y /= prevHeight; |
|||
this.updateBounds(updateImage, lastCenterPos); |
|||
this.map.invalidateSize(true); |
|||
// this.updateMarkers();
|
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
initMap(updateImage?) { |
|||
if (!this.map && this.aspect > 0) { |
|||
const center = this.pointToLatLng(this.width / 2, this.height / 2); |
|||
this.map = L.map(this.$container, { |
|||
minZoom: 1, |
|||
maxZoom, |
|||
scrollWheelZoom: !this.options.disableScrollZooming, |
|||
center, |
|||
zoom: 1, |
|||
crs: L.CRS.Simple, |
|||
attributionControl: false |
|||
}); |
|||
this.updateBounds(updateImage); |
|||
// this.updateMarkers();
|
|||
} |
|||
} |
|||
|
|||
convertPosition(expression): L.LatLng { |
|||
return this.pointToLatLng( |
|||
expression[this.options.xPosKeyName] * this.width, |
|||
expression[this.options.yPosKeyName] * this.height); |
|||
} |
|||
|
|||
pointToLatLng(x, y): L.LatLng { |
|||
return L.CRS.Simple.pointToLatLng({ x, y } as L.PointExpression, maxZoom - 1); |
|||
} |
|||
|
|||
latLngToPoint(latLng) { |
|||
return L.CRS.Simple.latLngToPoint(latLng, maxZoom - 1); |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
export * from './tencent-map'; |
|||
export * from './google-map'; |
|||
export * from './here-map'; |
|||
export * from './image-map'; |
|||
export * from './openstreet-map'; |
|||
@ -0,0 +1,30 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
import LeafletMap from '../leaflet-map'; |
|||
import { MapSettings, UnitedMapSettings } from '../map-models'; |
|||
|
|||
export class OpenStreetMap extends LeafletMap { |
|||
constructor($container, options: UnitedMapSettings) { |
|||
super($container, options); |
|||
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); |
|||
const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik'); |
|||
tileLayer.addTo(map); |
|||
super.setMap(map); |
|||
super.initSettings(options); |
|||
} |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
|
|||
import L from 'leaflet'; |
|||
import LeafletMap from '../leaflet-map'; |
|||
import { MapSettings, UnitedMapSettings } from '../map-models'; |
|||
|
|||
export class TencentMap extends LeafletMap { |
|||
constructor($container, options: UnitedMapSettings) { |
|||
super($container, options); |
|||
const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0'; |
|||
const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); |
|||
const txLayer = L.tileLayer(txUrl, { subdomains: '0123', tms: true }).addTo(map); |
|||
txLayer.addTo(map); |
|||
super.setMap(map); |
|||
super.initSettings(options); |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,37 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2020 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="trip-animation-widget"> |
|||
<div class="trip-animation-label-container" *ngIf="settings.showLabel"> |
|||
{{settings.label | tbParseTemplate: activeTrip}} |
|||
</div> |
|||
<div class="trip-animation-container" layout="column"> |
|||
<div class="map" #map></div> |
|||
<div class="trip-animation-info-panel" layout="row"> |
|||
<button class="tooltip-button" mat-mini-fab color="primary" aria-label="tooltip" |
|||
*ngIf="settings.showTooltip" (click)="showHideTooltip()"> |
|||
<mat-icon>info_outline</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="trip-animation-tooltip md-whiteframe-z4" layout="column" |
|||
[ngClass]="{'trip-animation-tooltip-hidden':!visibleTooltip}" [innerHTML]="mainTooltip" |
|||
[ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}"> |
|||
</div> |
|||
</div> |
|||
<tb-history-selector *ngIf="historicalData" [settings]="settings" [intervals]="intervals" |
|||
(onTimeUpdated)="timeUpdated($event)"></tb-history-selector> |
|||
</div> |
|||
@ -0,0 +1,89 @@ |
|||
/** |
|||
* Copyright © 2016-2020 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
.trip-animation-widget { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.trip-animation-label-container { |
|||
height: 24px; |
|||
} |
|||
|
|||
.trip-animation-container { |
|||
position: relative; |
|||
z-index: 1; |
|||
flex: 1; |
|||
width: 100%; |
|||
|
|||
.map { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.trip-animation-info-panel { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
pointer-events: none; |
|||
|
|||
.tooltip-button { |
|||
top: 0; |
|||
left: 0; |
|||
width: 32px; |
|||
min-width: 32px; |
|||
height: 32px; |
|||
min-height: 32px; |
|||
padding: 0 0 2px; |
|||
margin: 2px; |
|||
line-height: 24px; |
|||
z-index: 999; |
|||
|
|||
&::ng-deep .mat-button-wrapper { |
|||
padding: 0; |
|||
} |
|||
|
|||
mat-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
|
|||
svg { |
|||
width: inherit; |
|||
height: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.trip-animation-tooltip { |
|||
position: absolute; |
|||
top: 38px; |
|||
right: 0; |
|||
z-index: 400; |
|||
padding: 10px; |
|||
background-color: #fff; |
|||
transition: 0.3s ease-in-out; |
|||
|
|||
&-hidden { |
|||
transform: translateX(110%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,156 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import L from 'leaflet'; |
|||
import _ from 'lodash'; |
|||
import tinycolor from 'tinycolor2'; |
|||
import { interpolateOnPointSegment } from 'leaflet-geometryutil'; |
|||
|
|||
import { Component, OnInit, Input, ViewChild, AfterViewInit, ChangeDetectorRef, SecurityContext } from '@angular/core'; |
|||
import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2'; |
|||
import { MapProviders } from '../lib/maps/map-models'; |
|||
import { parseArray, parseTemplate, safeExecute } from '@app/core/utils'; |
|||
import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils'; |
|||
import { tripAnimationSchema } from '../lib/maps/schemes'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { WidgetConfig, JsonSchema, JsonSettingsSchema } from '@app/shared/public-api'; |
|||
import { WidgetContext } from '@app/modules/home/models/widget-component.models'; |
|||
import { getRatio, findAngle } from '../lib/maps/maps-utils'; |
|||
|
|||
|
|||
@Component({ |
|||
selector: 'trip-animation', |
|||
templateUrl: './trip-animation.component.html', |
|||
styleUrls: ['./trip-animation.component.scss'] |
|||
}) |
|||
export class TripAnimationComponent implements OnInit, AfterViewInit { |
|||
|
|||
constructor(private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) { } |
|||
|
|||
@Input() ctx: WidgetContext; |
|||
|
|||
@ViewChild('map') mapContainer; |
|||
|
|||
mapWidget: MapWidgetController; |
|||
historicalData; |
|||
intervals; |
|||
normalizationStep = 1000; |
|||
interpolatedData = []; |
|||
widgetConfig: WidgetConfig; |
|||
settings; |
|||
mainTooltip = ''; |
|||
visibleTooltip = false; |
|||
activeTrip; |
|||
|
|||
static getSettingsSchema(): JsonSettingsSchema { |
|||
const schema = initSchema(); |
|||
addToSchema(schema, TbMapWidgetV2.getProvidersSchema()); |
|||
addGroupInfo(schema, 'Map Provider Settings'); |
|||
addToSchema(schema, tripAnimationSchema); |
|||
addGroupInfo(schema, 'Trip Animation Settings'); |
|||
return schema; |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.widgetConfig = this.ctx.widgetConfig; |
|||
const settings = { |
|||
normalizationStep: 1000, |
|||
showLabel: false, |
|||
buttonColor: tinycolor(this.widgetConfig.color).setAlpha(0.54).toRgbString(), |
|||
disabledButtonColor: tinycolor(this.widgetConfig.color).setAlpha(0.3).toRgbString(), |
|||
rotationAngle: 0 |
|||
} |
|||
this.settings = { ...settings, ...this.ctx.settings }; |
|||
const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]]; |
|||
if (subscription) subscription.callbacks.onDataUpdated = (updated) => { |
|||
this.historicalData = parseArray(this.ctx.data); |
|||
this.activeTrip = this.historicalData[0][0]; |
|||
this.calculateIntervals(); |
|||
this.timeUpdated(this.intervals[0]); |
|||
this.mapWidget.map.updatePolylines(this.interpolatedData.map(ds => _.values(ds))); |
|||
|
|||
this.mapWidget.map.map?.invalidateSize(); |
|||
this.cd.detectChanges(); |
|||
} |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
const ctxCopy: WidgetContext = _.cloneDeep(this.ctx); |
|||
ctxCopy.settings.showLabel = false; |
|||
ctxCopy.settings.showTooltip = false; |
|||
this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, ctxCopy, this.mapContainer.nativeElement); |
|||
} |
|||
|
|||
timeUpdated(time: number) { |
|||
const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]); |
|||
this.activeTrip = currentPosition[0]; |
|||
if (this.settings.showPolygon) { |
|||
this.mapWidget.map.updatePolygons(this.interpolatedData); |
|||
} |
|||
this.mapWidget.map.updateMarkers(currentPosition); |
|||
} |
|||
|
|||
setActiveTrip() { |
|||
|
|||
} |
|||
|
|||
calculateIntervals() { |
|||
this.historicalData.forEach((dataSource, index) => { |
|||
this.intervals = []; |
|||
for (let time = dataSource[0]?.time; time < dataSource[dataSource.length - 1]?.time; time += this.normalizationStep) { |
|||
this.intervals.push(time); |
|||
} |
|||
this.intervals.push(dataSource[dataSource.length - 1]?.time); |
|||
this.interpolatedData[index] = this.interpolateArray(dataSource, this.intervals); |
|||
}); |
|||
} |
|||
|
|||
showHideTooltip() { |
|||
const tooltipText: string = this.settings.useTooltipFunction ? |
|||
safeExecute(this.settings.tooolTipFunction, [this.activeTrip, this.historicalData, 0]) |
|||
: this.settings.tooltipPattern; |
|||
|
|||
this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip)) |
|||
this.visibleTooltip = !this.visibleTooltip; |
|||
} |
|||
|
|||
interpolateArray(originData, interpolatedIntervals) { |
|||
|
|||
const result = {}; |
|||
|
|||
for (let i = 1, j = 0; i < originData.length && j < interpolatedIntervals.length;) { |
|||
const currentTime = interpolatedIntervals[j]; |
|||
while (originData[i].time < currentTime) i++; |
|||
const before = originData[i - 1]; |
|||
const after = originData[i]; |
|||
const interpolation = interpolateOnPointSegment( |
|||
new L.Point(before.latitude, before.longitude), |
|||
new L.Point(after.latitude, after.longitude), |
|||
getRatio(before.time, after.time, currentTime)); |
|||
result[currentTime] = ({ |
|||
...originData[i], |
|||
rotationAngle: findAngle(before, after) + this.settings.rotationAngle, |
|||
latitude: interpolation.x, |
|||
longitude: interpolation.y |
|||
}); |
|||
j++; |
|||
} |
|||
return result; |
|||
} |
|||
} |
|||
|
|||
export let TbTripAnimationWidget = TripAnimationComponent; |
|||
|
|||
@ -0,0 +1,51 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2020 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="trip-animation-control-panel"> |
|||
<div> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Start" (click)="moveStart()"> |
|||
<mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_rewind</mat-icon> |
|||
</button> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()"> |
|||
<mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon> |
|||
</button> |
|||
<mat-slider [(ngModel)]="index" [min]="minTimeIndex" [max]="maxTimeIndex" (change)="changeIndex()"> |
|||
</mat-slider> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Next" (click)="moveNext()"> |
|||
<mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_next</mat-icon> |
|||
</button> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="End" (click)="moveEnd()"> |
|||
<mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">fast_forward</mat-icon> |
|||
</button> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Play"> |
|||
<mat-icon (click)="play()" *ngIf="!playing" class="material-icons" |
|||
[ngStyle]="{'color': settings.buttonColor}"> |
|||
play_circle_outline |
|||
</mat-icon> |
|||
<mat-icon (click)="pause()" *ngIf="playing" class="material-icons" |
|||
[ngStyle]="{'color': settings.buttonColor}"> |
|||
pause_circle_outline |
|||
</mat-icon> |
|||
</button> |
|||
<mat-select matInput [(ngModel)]="speed" (selectionChange)="reeneble()" class="speed-select" aria-label="Speed selector"> |
|||
<mat-option [value]="speedValue" flex="1" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option> |
|||
</mat-select> |
|||
</div> |
|||
<div class="panel-timer"> |
|||
<span *ngIf="this.intervals[this.index]">{{ this.intervals[this.index] | date:'medium'}}</span> |
|||
<span *ngIf="!this.intervals[this.index]">{{ "widget.no-data-found" | translate}}</span> |
|||
</div> |
|||
@ -0,0 +1,140 @@ |
|||
/** |
|||
* Copyright © 2016-2020 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.trip-animation-widget { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
|
|||
.trip-animation-label-container { |
|||
height: 24px; |
|||
} |
|||
|
|||
.trip-animation-container { |
|||
position: relative; |
|||
z-index: 1; |
|||
flex: 1; |
|||
width: 100%; |
|||
|
|||
#trip-animation-map { |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.pointsLayerMarkerIcon { |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.trip-animation-info-panel { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 2; |
|||
pointer-events: none; |
|||
|
|||
.md-button { |
|||
top: 0; |
|||
left: 0; |
|||
width: 32px; |
|||
min-width: 32px; |
|||
height: 32px; |
|||
min-height: 32px; |
|||
padding: 0 0 2px; |
|||
margin: 2px; |
|||
line-height: 24px; |
|||
|
|||
ng-md-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
|
|||
svg { |
|||
width: inherit; |
|||
height: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.trip-animation-tooltip { |
|||
position: absolute; |
|||
top: 38px; |
|||
right: 0; |
|||
z-index: 2; |
|||
padding: 10px; |
|||
background-color: #fff; |
|||
transition: 0.3s ease-in-out; |
|||
|
|||
&-hidden { |
|||
transform: translateX(110%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.trip-animation-control-panel { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding-bottom: 16px; |
|||
padding-left: 10px; |
|||
|
|||
md-slider-container { |
|||
md-slider { |
|||
min-width: 80px; |
|||
} |
|||
|
|||
button.md-button.md-icon-button { |
|||
width: 44px; |
|||
min-width: 44px; |
|||
height: 44px; |
|||
min-height: 44px; |
|||
margin: 0; |
|||
line-height: 28px; |
|||
|
|||
md-icon { |
|||
width: 28px; |
|||
height: 28px; |
|||
font-size: 28px; |
|||
|
|||
svg { |
|||
width: inherit; |
|||
height: inherit; |
|||
} |
|||
} |
|||
} |
|||
|
|||
md-select { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.panel-timer { |
|||
max-width: none; |
|||
padding-right: 250px; |
|||
padding-left: 90px; |
|||
margin-top: -20px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.speed-select{ |
|||
width: 50px; |
|||
margin-left: 20px; |
|||
} |
|||
@ -0,0 +1,119 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; |
|||
import { interval, Subscription, Subscriber, SubscriptionLike, Observer } from 'rxjs'; |
|||
import { filter, tap } from 'rxjs/operators'; |
|||
import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/maps/map-models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-history-selector', |
|||
templateUrl: './history-selector.component.html', |
|||
styleUrls: ['./history-selector.component.scss'] |
|||
}) |
|||
export class HistorySelectorComponent implements OnInit, OnChanges { |
|||
|
|||
@Input() settings: HistorySelectSettings |
|||
@Input() intervals = []; |
|||
|
|||
@Output() timeUpdated: EventEmitter<number> = new EventEmitter(); |
|||
|
|||
animationTime; |
|||
minTimeIndex = 0; |
|||
maxTimeIndex = 0; |
|||
speed = 1; |
|||
index = 0; |
|||
playing = false; |
|||
interval; |
|||
speeds = [1, 5, 10, 25]; |
|||
|
|||
|
|||
constructor(private cd: ChangeDetectorRef) { } |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
ngOnChanges() { |
|||
this.maxTimeIndex = this.intervals?.length - 1; |
|||
} |
|||
|
|||
play() { |
|||
this.playing = true; |
|||
if (!this.interval) |
|||
this.interval = interval(1000 / this.speed) |
|||
.pipe( |
|||
filter(() => this.playing), |
|||
tap(() => this.index++)).subscribe(() => { |
|||
if (this.index < this.maxTimeIndex) { |
|||
this.cd.detectChanges(); |
|||
this.timeUpdated.emit(this.intervals[this.index]); |
|||
} |
|||
else { |
|||
this.interval.complete(); |
|||
} |
|||
}, err => { |
|||
console.log(err); |
|||
}, () => { |
|||
this.index = this.minTimeIndex; |
|||
this.playing = false; |
|||
this.interval = null; |
|||
this.cd.detectChanges(); |
|||
}); |
|||
} |
|||
|
|||
reeneble() { |
|||
if (this.playing) { |
|||
const position = this.index; |
|||
this.interval.complete(); |
|||
this.index = position; |
|||
this.play(); |
|||
} |
|||
} |
|||
|
|||
pause() { |
|||
this.playing = false; |
|||
this.cd.detectChanges(); |
|||
this.timeUpdated.emit(this.intervals[this.index]); |
|||
} |
|||
|
|||
moveNext() { |
|||
if (this.index < this.maxTimeIndex) { |
|||
this.index++; |
|||
} |
|||
this.pause(); |
|||
} |
|||
|
|||
movePrev() { |
|||
if (this.index > this.minTimeIndex) { |
|||
this.index++; |
|||
} |
|||
this.pause(); |
|||
} |
|||
|
|||
moveStart() { |
|||
this.index = this.minTimeIndex; |
|||
this.pause(); |
|||
} |
|||
|
|||
moveEnd() { |
|||
this.index = this.maxTimeIndex; |
|||
this.pause(); |
|||
} |
|||
|
|||
changeIndex() { |
|||
this.timeUpdated.emit(this.intervals[this.index]); |
|||
} |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
///
|
|||
/// Copyright © 2016-2020 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Pipe, PipeTransform } from '@angular/core'; |
|||
import { parseTemplate } from '@app/core/utils'; |
|||
|
|||
@Pipe({ name: 'tbParseTemplate' }) |
|||
export class TbTemplatePipe implements PipeTransform { |
|||
transform(template, data): string { |
|||
console.log('TbTemplatePipe -> transform -> template, data', template, data) |
|||
return parseTemplate(template, data); |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 219 B |
@ -0,0 +1,12 @@ |
|||
import * as L from 'leaflet' |
|||
|
|||
declare module 'leaflet' { |
|||
|
|||
namespace Control { |
|||
class AddMarker extends L.Control { } |
|||
} |
|||
|
|||
namespace control { |
|||
function addMarker(options): Control.AddMarker; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue