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

Added polygon functional for OpenStreet, Tencent and Google Latest Value Maps

Browse Source
This commit is contained in:
Maksym Dudnik 2019-01-30 11:21:07 +02:00
parent 61fd0867e2
commit 43b0ac6b5b
5 changed files with 1820 additions and 1547 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/app/widget/lib/google-map.js
View File

@ -314,6 +314,48 @@ export default class TbGoogleMap {
polyline.setMap(null);
}
createPolygon(latLangs, settings) {
let polygon = new google.maps.Polygon({
map: this.map,
paths: latLangs,
strokeColor: settings.polygonStrokeColor,
strokeOpacity: settings.polygonStrokeColor,
fillColor: settings.polygonColor,
fillOpacity: settings.polygonOpacity,
strokeWeight: settings.polygonStrokeWeight
});
return polygon;
}
/* eslint-disable no-undef */
removePolygon (polygon) {
polygon.setMap(null);
}
/* eslint-disable no-undef,no-unused-vars */
updatePolygonColor (polygon, settings, color) {
let options = {
paths: polygon.getPaths(),
map: this.map,
strokeColor: color,
fillColor: color,
strokeWeight: settings.polygonStrokeWeight
}
}
/* eslint-disable no-undef ,no-unused-vars*/
getPolygonLatLngs(polygon) {
return polygon.getPaths().getArray();
}
setPolygonLatLngs(polygon, latLngs) {
polygon.setPaths(latLngs);
}
/* eslint-disable no-undef */
fitBounds(bounds) {
if (this.dontFitMapBounds && this.defaultZoomLevel) {

15
ui/src/app/widget/lib/image-map.js
View File

@ -369,6 +369,21 @@ export default class TbImageMap {
removePolyline(/*polyline*/) {
}
createPolygon(/*latLangs, settings*/) {
}
removePolygon(/*latLangs, settings*/) {
}
updatePolygonColor(/*latLangs, settings*/) {
}
getPolygonLatLngs(/*latLangs, settings*/) {
}
setPolygonLatLngs(/*latLangs, settings*/) {
}
fitBounds() {
}

154
ui/src/app/widget/lib/map-widget2.js
View File

@ -33,6 +33,7 @@ export default class TbMapWidgetV2 {
this.utils = ctx.$scope.$injector.get('utils');
this.drawRoutes = drawRoutes;
this.markers = [];
this.polygons = [];
if (this.drawRoutes) {
this.polylines = [];
}
@ -42,7 +43,8 @@ export default class TbMapWidgetV2 {
var settings = ctx.settings;
this.callbacks = {};
this.callbacks.onLocationClick = function(){};
this.callbacks.onLocationClick = function () {
};
if (settings.defaultZoomLevel) {
if (settings.defaultZoomLevel > 0 && settings.defaultZoomLevel < 21) {
@ -61,8 +63,6 @@ export default class TbMapWidgetV2 {
var minZoomLevel = this.drawRoutes ? 18 : 15;
var initCallback = function () {
tbMap.update();
tbMap.resize();
@ -109,9 +109,13 @@ export default class TbMapWidgetV2 {
if (location.polyline) {
tbMap.map.removePolyline(location.polyline);
}
if (location.polygon) {
tbMap.map.removePolygon(location.polygon);
}
});
this.locations = null;
this.markers = [];
this.polygons = [];
if (this.drawRoutes) {
this.polylines = [];
}
@ -133,6 +137,7 @@ export default class TbMapWidgetV2 {
} else {
this.locationSettings.latKeyName = this.ctx.settings.latKeyName || 'latitude';
this.locationSettings.lngKeyName = this.ctx.settings.lngKeyName || 'longitude';
this.locationSettings.polygonKeyName = this.ctx.settings.polygonKeyName || 'coordinates';
}
this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + this.locationSettings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + this.locationSettings.lngKeyName + ":7}";
@ -140,9 +145,15 @@ export default class TbMapWidgetV2 {
this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000',
this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false;
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
this.locationSettings.label = this.ctx.settings.label || "${entityName}";
this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
this.locationSettings.polygonColor = this.ctx.settings.polygonColor ? tinycolor(this.ctx.settings.polygonColor).toHexString() : "#0000ff";
this.locationSettings.polygonStrokeColor = this.ctx.settings.polygonStrokeColor ? tinycolor(this.ctx.settings.polygonStrokeColor).toHexString() : "#fe0001";
this.locationSettings.polygonOpacity = angular.isDefined(this.ctx.settings.polygonOpacity) ? this.ctx.settings.polygonOpacity : 0.5;
this.locationSettings.polygonStrokeOpacity = angular.isDefined(this.ctx.settings.polygonStrokeOpacity) ? this.ctx.settings.polygonStrokeOpacity : 1;
this.locationSettings.polygonStrokeWeight = angular.isDefined(this.ctx.settings.polygonStrokeWeight) ? this.ctx.settings.polygonStrokeWeight : 1;
this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true;
if (angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) {
@ -170,6 +181,14 @@ export default class TbMapWidgetV2 {
this.locationSettings.colorFunction = null;
}
}
this.locationSettings.usePolygonColorFunction = this.ctx.settings.usePolygonColorFunction === true;
if (angular.isDefined(this.ctx.settings.polygonColorFunction) && this.ctx.settings.polygonColorFunction.length > 0) {
try {
this.locationSettings.polygonColorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.polygonColorFunction);
} catch (e) {
this.locationSettings.polygonColorFunction = null;
}
}
this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true;
if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) {
@ -216,6 +235,7 @@ export default class TbMapWidgetV2 {
var tbMap = this;
function updateLocationLabel(location, dataMap) {
if (location.settings.showLabel) {
if (location.settings.useLabelFunction && location.settings.labelFunction) {
@ -245,7 +265,8 @@ export default class TbMapWidgetV2 {
var color;
try {
color = location.settings.colorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
} catch (e) {/**/}
} catch (e) {/**/
}
if (!color) {
color = '#FE7569';
}
@ -255,6 +276,22 @@ export default class TbMapWidgetV2 {
}
}
function calculateLocationPolygonColor(location, dataMap) {
if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) {
var color;
try {
color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
} catch (e) {/**/
}
if (!color) {
color = '#007800';
}
return tinycolor(color).toHexString();
} else {
return location.settings.polygonColor;
}
}
function updateLocationColor(location, color, image) {
if (!location.settings.calculatedColor || location.settings.calculatedColor !== color) {
if (!location.settings.useMarkerImage && !image) {
@ -267,6 +304,16 @@ export default class TbMapWidgetV2 {
}
}
function updateLocationPolygonColor(location, color) {
if (!location.settings.calculatedPolygonColor || location.settings.calculatedPolygonColor !== color) {
location.settings.calculatedPolygonColor = color;
if (location.polygon) {
tbMap.map.updatePolygonColor(location.polygon, location.settings, color);
}
}
}
function calculateLocationMarkerImage(location, dataMap) {
if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) {
var image = null;
@ -291,8 +338,10 @@ export default class TbMapWidgetV2 {
function updateLocationStyle(location, dataMap) {
updateLocationLabel(location, dataMap);
var color = calculateLocationColor(location, dataMap);
var polygonColor = calculateLocationPolygonColor(location, dataMap);
var image = calculateLocationMarkerImage(location, dataMap);
updateLocationColor(location, color, image);
if (location.settings.usePolygonColorFunction) updateLocationPolygonColor(location, polygonColor);
updateLocationMarkerIcon(location, image);
}
@ -377,6 +426,21 @@ export default class TbMapWidgetV2 {
locationChanged = true;
}
}
if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
if (!location.polygon && polygonLatLngs.length > 0) {
location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings);
tbMap.polygons.push(location.polygon);
} else if (polygonLatLngs.length > 0) {
let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) {
tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs);
}
}
}
}
if (location.marker) {
updateLocationStyle(location, dataMap);
@ -415,6 +479,7 @@ export default class TbMapWidgetV2 {
} else if (nameToCheck === tbMap.locationSettings.lngKeyName) {
lngIndex = i;
}
if (latIndex > -1 && lngIndex > -1) {
var location = {
latIndex: latIndex,
@ -431,7 +496,6 @@ export default class TbMapWidgetV2 {
location.settings.tooltipPattern = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.tooltipPattern);
location.settings.tooltipReplaceInfo = processPattern(location.settings.tooltipPattern, datasources, currentDatasourceIndex);
}
tbMap.locations.push(location);
updateLocation(location, data, dataMap);
if (location.polyline) {
@ -447,8 +511,20 @@ export default class TbMapWidgetV2 {
tbMap.map.fitBounds(bounds);
}
function updateLocations(data, datasources) {
function mapPolygonArray (rawArray) {
let latLngArray = rawArray.map(function (el) {
if (el.length === 2) {
return tbMap.map.createLatLng(el[0], el[1]);
} else if (el.length > 2) {
return mapPolygonArray(el);
} else {
return tbMap.map.createLatLng(false);
}
});
return latLngArray;
}
function updateLocations(data, datasources) {
var locationsChanged = false;
var bounds = tbMap.map.createBounds();
var dataMap = toLabelValueMap(data, datasources);
@ -488,6 +564,7 @@ export default class TbMapWidgetV2 {
content = fillPattern(settings.tooltipPattern, settings.tooltipReplaceInfo, data);
return fillPatternWithActions(content, 'onTooltipAction', tooltip.markerArgs);
}
if (this.map && this.map.inited() && this.subscription) {
if (this.subscription.data) {
if (!this.locations) {
@ -503,6 +580,7 @@ export default class TbMapWidgetV2 {
}
}
}
}
resize() {
@ -668,8 +746,7 @@ const openstreetMapSettingsSchema =
"default": "OpenStreetMap.Mapnik"
}
},
"required":[
]
"required": []
},
"form": [
{
@ -791,6 +868,48 @@ const commonMapSettingsSchema =
"title": "Color function: f(data, dsData, dsIndex)",
"type": "string"
},
"showPolygon": {
"title": "Show polygon",
"type": "boolean",
"default": false
},
"polygonKeyName": {
"title": "Polygon key name",
"type": "string",
"default": "coordinates"
},
"polygonColor": {
"title": "Polygon color",
"type": "string"
},
"polygonOpacity": {
"title": "Polygon opacity",
"type": "number",
"default": 0.5
},
"polygonStrokeColor": {
"title": "Stroke color",
"type": "string"
},
"polygonStrokeOpacity": {
"title": "Stroke opacity",
"type": "number",
"default": 1
},
"polygonStrokeWeight": {
"title": "Stroke weight",
"type": "number",
"default": 1
},
"usePolygonColorFunction": {
"title": "Use polygon color function",
"type": "boolean",
"default": false
},
"polygonColorFunction": {
"title": "Polygon Color function: f(data, dsData, dsIndex)",
"type": "string"
},
"markerImage": {
"title": "Custom marker image",
"type": "string"
@ -851,6 +970,20 @@ const commonMapSettingsSchema =
{
"key": "colorFunction",
"type": "javascript"
}, "showPolygon", "polygonKeyName",
{
"key": "polygonColor",
"type": "color"
},
"polygonOpacity",
{
"key": "polygonStrokeColor",
"type": "color"
},
"polygonStrokeOpacity","polygonStrokeWeight","usePolygonColorFunction",
{
"key": "polygonColorFunction",
"type": "javascript"
},
{
"key": "markerImage",
@ -891,8 +1024,7 @@ const routeMapSettingsSchema =
"default": 1.0
}
},
"required":[
]
"required": []
},
"form": [
"strokeWeight",

36
ui/src/app/widget/lib/openstreet-map.js
View File

@ -190,6 +190,42 @@ export default class TbOpenStreetMap {
this.map.removeLayer(polyline);
}
createPolygon(latLangs, settings) {
let polygon = L.polygon(latLangs, {
fill: true,
fillColor: settings.polygonColor,
color: settings.polygonStrokeColor,
weight: settings.polygonStrokeWeight,
fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity
}).addTo(this.map);
return polygon;
}
removePolygon(polygon) {
this.map.removeLayer(polygon);
}
updatePolygonColor(polygon, settings, color) {
let style = {
fill: true,
fillColor: color,
color: color,
weight: settings.polygonStrokeWeight,
fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity
};
polygon.setStyle(style);
}
getPolygonLatLngs(polygon) {
return polygon.getLatLngs();
}
setPolygonLatLngs(polygon, latLngs) {
polygon.setLatLngs(latLngs);
}
fitBounds(bounds) {
if (bounds.isValid()) {
if (this.dontFitMapBounds && this.defaultZoomLevel) {

48
ui/src/app/widget/lib/tencent-map.js
View File

@ -149,6 +149,7 @@ export default class TbTencentMap {
marker.label.setStyle(this.createMarkerLabelStyle(settings));
}
}
/* eslint-enable no-undef,no-unused-vars */
/* eslint-disable no-undef,no-unused-vars */
@ -157,6 +158,7 @@ export default class TbTencentMap {
marker.setIcon(iconInfo.icon);
});
}
/* eslint-enable no-undef,,no-unused-vars */
/* eslint-disable no-undef */
@ -168,6 +170,7 @@ export default class TbTencentMap {
}
});
}
/* eslint-disable no-undef */
/* eslint-disable no-undef */
@ -206,6 +209,7 @@ export default class TbTencentMap {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
}
/* eslint-enable no-undef */
/* eslint-disable no-undef */
@ -221,6 +225,7 @@ export default class TbTencentMap {
};
onMarkerIconReady(iconInfo);
}
/* eslint-enable no-undef */
/* eslint-disable no-undef */
@ -289,6 +294,7 @@ export default class TbTencentMap {
dsIndex: dsIndex
});
}
/* eslint-enable no-undef */
/* eslint-disable no-undef */
@ -302,6 +308,7 @@ export default class TbTencentMap {
};
polyline.setOptions(options);
}
/* eslint-enable no-undef */
/* eslint-disable no-undef */
@ -316,12 +323,52 @@ export default class TbTencentMap {
return polyline;
}
/* eslint-enable no-undef */
removePolyline(polyline) {
polyline.setMap(null);
}
/* eslint-disable no-undef */
createPolygon(latLangs, settings) {
let polygon = new qq.maps.Polygon({
map: this.map,
path: latLangs,
strokeColor: settings.polygonStrokeColor,
fillColor: settings.polygonColor,
strokeWeight: settings.polygonStrokeWeight
});
return polygon;
}
/* eslint-disable no-undef */
removePolygon (polygon) {
polygon.setMap(null);
}
/* eslint-disable no-undef,no-unused-vars */
updatePolygonColor (polygon, settings, color) {
let options = {
path: polygon.getPath(),
map: this.map,
strokeColor: color,
fillColor: color,
strokeWeight: settings.polygonStrokeWeight
}
}
/* eslint-disable no-undef ,no-unused-vars*/
getPolygonLatLngs(polygon) {
return polygon.getPath().getArray();
}
setPolygonLatLngs(polygon, latLngs) {
polygon.setPath(latLngs);
}
/* eslint-disable no-undef ,no-unused-vars*/
fitBounds(bounds) {
if (this.dontFitMapBounds && this.defaultZoomLevel) {
@ -337,6 +384,7 @@ export default class TbTencentMap {
this.map.fitBounds(bounds);
}
}
/* eslint-enable no-undef,no-unused-vars */
createLatLng(lat, lng) {