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

Removed polygon latLnag dependency and added polygon marker and click event

Browse Source
This commit is contained in:
Maksym Dudnik 2019-02-06 16:53:15 +02:00
parent b1849e98f7
commit e9328f9e11
15 changed files with 167 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/app/locale/locale.constant-de_DE.json
View File

@ -1559,6 +1559,7 @@
"widget-action": {
"action-cell-button": "Aktionszellenschaltfläche",
"row-click": "Klick auf Zeile",
"polygon-click": "Klick auf Polygon",
"marker-click": "Klick auf Marker",
"tooltip-tag-action": "Tooltip-Tag-Aktion"
}

1
ui/src/app/locale/locale.constant-en_US.json
View File

@ -1559,6 +1559,7 @@
"widget-action": {
"action-cell-button": "Action cell button",
"row-click": "On row click",
"polygon-click": "On polygon click",
"marker-click": "On marker click",
"tooltip-tag-action": "Tooltip tag action"
}

3
ui/src/app/locale/locale.constant-es_ES.json
View File

@ -1559,7 +1559,8 @@
"widget-action": {
"action-cell-button": "Botón de acción de celda",
"row-click": "Clic en la fila",
"marker-click": "Clic en el marcador",
"polygon-click": "Clic en la fila",
"marker-click": "Clic en el polígono",
"tooltip-tag-action": "Acción de etiqueta para globo de ayuda"
}
},

1
ui/src/app/locale/locale.constant-fr_FR.json
View File

@ -336,6 +336,7 @@
"action-cell-button": "Action cell button",
"marker-click": "On marker click",
"row-click": "On row click",
"polygon-click": "On polygon click",
"tooltip-tag-action": "Tooltip tag action"
}
},

1
ui/src/app/locale/locale.constant-it_IT.json
View File

@ -1425,6 +1425,7 @@
"widget-action": {
"action-cell-button": "Action cell button",
"row-click": "On row click",
"polygon-click": "On polygon click",
"marker-click": "On marker click",
"tooltip-tag-action": "Tooltip tag action"
}

1
ui/src/app/locale/locale.constant-ja_JA.json
View File

@ -1442,6 +1442,7 @@
"widget-action": {
"action-cell-button": "アクションセルボタン",
"row-click": "行のクリック",
"polygon-click": "ポリゴンクリック",
"marker-click": "マーカークリック",
"tooltip-tag-action": "ツールチップのタグアクション"
}

1
ui/src/app/locale/locale.constant-ko_KR.json
View File

@ -1318,6 +1318,7 @@
"widget-action": {
"action-cell-button": "Action cell button",
"row-click": "On row click",
"polygon-click": "On polygon click",
"marker-click": "On marker click",
"tooltip-tag-action": "Tooltip tag action"
}

1
ui/src/app/locale/locale.constant-ru_RU.json
View File

@ -1558,6 +1558,7 @@
"action-cell-button": "Кнопка действия ячейки",
"row-click": "Действий при щелчке на строку",
"marker-click": "Действия при щелчке на указателе",
"polygon-click": "Действия при щелчке на полигон",
"tooltip-tag-action": "Действие при подсказке"
}
},

3
ui/src/app/locale/locale.constant-tr_TR.json
View File

@ -1524,7 +1524,8 @@
"widget-action": {
"action-cell-button": "Eylem hücre butonu",
"row-click": "Satır tıklama eylemi",
"marker-click": "İşaretçi tıklama eylemi",
"polygon-click": "Satır tıklama eylemi",
"marker-click": "Çokgen tıklama eylemi",
"tooltip-tag-action": "İpucu etiket eylemi"
}
},

1
ui/src/app/locale/locale.constant-zh_CN.json
View File

@ -1429,6 +1429,7 @@
"action-cell-button": "动作单元格按钮",
"row-click": "点击行",
"marker-click": "点击标记",
"polygon-click": "单击多边形",
"tooltip-tag-action": "提示标签动作"
}
},

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

@ -315,7 +315,7 @@ export default class TbGoogleMap {
}
createPolygon(latLangs, settings) {
createPolygon(latLangs, settings, location, onClickListener, markerArgs) {
let polygon = new google.maps.Polygon({
map: this.map,
paths: latLangs,
@ -325,6 +325,32 @@ export default class TbGoogleMap {
fillOpacity: settings.polygonOpacity,
strokeWeight: settings.polygonStrokeWeight
});
//initialize-tooltip
let popup = new google.maps.InfoWindow({
content: ''
});
if (!this.tooltips) this.tooltips = [];
this.tooltips.push({
markerArgs: markerArgs,
popup: popup,
locationSettings: settings,
dsIndex: location.dsIndex
});
if (onClickListener) {
google.maps.event.addListener(polygon, 'click', function (event) {
if (settings.displayTooltip) {
if (!polygon.anchor) {
polygon.anchor = new google.maps.MVCObject();
}
polygon.anchor.set("position", event.latLng);
popup.open(this.map, polygon.anchor);
}
onClickListener();
});
}
return polygon;
}
/* eslint-disable no-undef */

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

@ -233,7 +233,6 @@ export default class TbMapWidgetV2 {
}
update() {
var tbMap = this;
@ -381,6 +380,17 @@ export default class TbMapWidgetV2 {
tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName);
}
}
function locationPolygonClick($event, location) {
var descriptors = tbMap.ctx.actionsApi.getActionDescriptors('polygonClick');
if (descriptors.length) {
var datasource = tbMap.subscription.datasources[location.dsIndex];
var entityId = {};
entityId.id = datasource.entityId;
entityId.entityType = datasource.entityType;
var entityName = datasource.entityName;
tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName);
}
}
function updateLocation(location, data, dataMap) {
var locationChanged = false;
@ -427,13 +437,24 @@ export default class TbMapWidgetV2 {
locationChanged = true;
}
}
}
if (location.marker) {
updateLocationStyle(location, dataMap);
}
}
}
return locationChanged;
}
function createUpdatePolygon(location, dataMap) {
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);
location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
tbMap.callbacks.onLocationClick(location);
locationPolygonClick(event, location);
}, [location.dsIndex]);
tbMap.polygons.push(location.polygon);
} else if (polygonLatLngs.length > 0) {
let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
@ -443,13 +464,6 @@ export default class TbMapWidgetV2 {
}
}
}
if (location.marker) {
updateLocationStyle(location, dataMap);
}
}
}
return locationChanged;
}
function loadLocations(data, datasources) {
var bounds = tbMap.map.createBounds();
@ -459,7 +473,6 @@ export default class TbMapWidgetV2 {
var currentDatasourceIndex = -1;
var latIndex = -1;
var lngIndex = -1;
for (var i = 0; i < data.length; i++) {
var dataKeyData = data[i];
var dataKey = dataKeyData.dataKey;
@ -480,7 +493,6 @@ export default class TbMapWidgetV2 {
} else if (nameToCheck === tbMap.locationSettings.lngKeyName) {
lngIndex = i;
}
if (latIndex > -1 && lngIndex > -1) {
var location = {
latIndex: latIndex,
@ -499,6 +511,7 @@ export default class TbMapWidgetV2 {
}
tbMap.locations.push(location);
updateLocation(location, data, dataMap);
if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) {
@ -507,8 +520,28 @@ export default class TbMapWidgetV2 {
latIndex = -1;
lngIndex = -1;
}
}
data.forEach(function (dataEl, index) {
let nameToCheck;
if (dataEl.dataKey.locationAttrName) {
nameToCheck = dataEl.dataKey.locationAttrName;
} else {
nameToCheck = dataEl.dataKey.label;
}
if (nameToCheck === tbMap.locationSettings.polygonKeyName) {
let location = {
polIndex: index,
settings: angular.copy(tbMap.locationSettings)
};
location.dsIndex = datasources.findIndex(function (ds) {
return dataEl.datasource.entityId === ds.entityId;
});
tbMap.locations.push(location);
createUpdatePolygon(location, dataMap);
tbMap.map.extendBounds(bounds, location.polygon);
}
});
tbMap.map.fitBounds(bounds);
}
@ -532,10 +565,13 @@ export default class TbMapWidgetV2 {
for (var p = 0; p < tbMap.locations.length; p++) {
var location = tbMap.locations[p];
locationsChanged |= updateLocation(location, data, dataMap);
createUpdatePolygon(location, dataMap);
if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker);
} else if (location.polygon) {
tbMap.map.extendBounds(bounds, location.polygon);
}
}
if (locationsChanged && tbMap.initBounds) {
@ -581,23 +617,30 @@ export default class TbMapWidgetV2 {
}
}
}
}
resize() {
if (this.map && this.map.inited()) {
this.map.invalidateSize();
let map = this.map;
if (this.locations && this.locations.length > 0) {
var bounds = this.map.createBounds();
for (var m = 0; m < this.markers.length; m++) {
this.map.extendBoundsWithMarker(bounds, this.markers[m]);
map.invalidateSize();
var bounds = map.createBounds();
if (this.markers && this.markers.length>0) {
this.markers.forEach(function (marker) {
map.extendBoundsWithMarker(bounds, marker);
});
}
if (this.polylines) {
for (var p = 0; p < this.polylines.length; p++) {
this.map.extendBounds(bounds, this.polylines[p]);
if (this.polylines && this.polylines.length>0) {
this.polylines.forEach(function (polyline) {
map.extendBounds(bounds, polyline);
})
}
if (this.polygons && this.polygons.length > 0) {
this.polygons.forEach(function (polygon) {
map.extendBounds(bounds, polygon);
})
}
this.map.fitBounds(bounds);
map.fitBounds(bounds);
}
}
}
@ -634,6 +677,10 @@ export default class TbMapWidgetV2 {
name: 'widget-action.marker-click',
multiple: false
},
'polygonClick': {
name: 'widget-action.polygon-click',
multiple: false
},
'tooltipAction': {
name: 'widget-action.tooltip-tag-action',
multiple: true

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

@ -190,7 +190,7 @@ export default class TbOpenStreetMap {
this.map.removeLayer(polyline);
}
createPolygon(latLangs, settings) {
createPolygon(latLangs, settings, location, onClickListener, markerArgs) {
let polygon = L.polygon(latLangs, {
fill: true,
fillColor: settings.polygonColor,
@ -199,6 +199,13 @@ export default class TbOpenStreetMap {
fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity
}).addTo(this.map);
if (settings.displayTooltip) {
this.createTooltip(polygon, location.dsIndex, settings, markerArgs);
}
if (onClickListener) {
polygon.on('click', onClickListener);
}
return polygon;
}
@ -224,6 +231,7 @@ export default class TbOpenStreetMap {
setPolygonLatLngs(polygon, latLngs) {
polygon.setLatLngs(latLngs);
polygon.redraw();
}
fitBounds(bounds) {
@ -272,7 +280,7 @@ export default class TbOpenStreetMap {
}
extendBounds(bounds, polyline) {
if (polyline && polyline.getLatLngs()) {
if (polyline && polyline.getLatLngs() && polyline.getBounds()) {
bounds.extend(polyline.getBounds());
}
}

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

@ -331,7 +331,7 @@ export default class TbTencentMap {
}
/* eslint-disable no-undef */
createPolygon(latLangs, settings) {
createPolygon(latLangs, settings, location, onClickListener, markerArgs) {
let polygon = new qq.maps.Polygon({
map: this.map,
path: latLangs,
@ -339,8 +339,31 @@ export default class TbTencentMap {
fillColor: settings.polygonColor,
strokeWeight: settings.polygonStrokeWeight
});
//initialize-tooltip
let popup = new qq.maps.InfoWindow({
content: ''
});
if (!this.tooltips) this.tooltips = [];
this.tooltips.push({
markerArgs: markerArgs,
popup: popup,
locationSettings: settings,
dsIndex: location.dsIndex
});
if (onClickListener) {
qq.maps.event.addListener(polygon, 'click', function (event) {
if (settings.displayTooltip) {
popup.setMap(this.map);
popup.setPosition(event.latLng);
popup.open();
}
onClickListener();
});
}
return polygon;
}
/* eslint-disable no-undef */
removePolygon (polygon) {

2
ui/src/app/widget/lib/widget-utils.js
View File

@ -73,6 +73,7 @@ export function processPattern(pattern, datasources, dsIndex) {
export function fillPattern(pattern, replaceInfo, data) {
var text = angular.copy(pattern);
if (replaceInfo) {
for (var v = 0; v < replaceInfo.variables.length; v++) {
var variableInfo = replaceInfo.variables[v];
var txtVal = '';
@ -89,6 +90,7 @@ export function fillPattern(pattern, replaceInfo, data) {
}
text = text.split(variableInfo.variable).join(txtVal);
}
}
return text;
}