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

New fixed center func for maps (#1910)

Browse Source 
* maps widget bundle changes (trip_animation configs)

* UI
Added fixed map center settings for (openstreet, google, tencent) maps

* UI
open street center minor fix

* fix

* UI
fixed commit

* UI
fixed commit

* Delete leaflet-geometryutil.js

* Delete Leaflet.MultiOptionsPolyline.js
This commit is contained in:
DudnikMaksym 2019-08-09 14:34:27 +03:00 committed by Igor Kulikov
parent 03631c83b0
commit 6a54e2ff1e
4 changed files with 82 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ var gmGlobals = {
}
export default class TbGoogleMap {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType) {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType, defaultCenterPosition) {
var tbMap = this;
this.utils = utils;
@ -28,6 +28,7 @@ export default class TbGoogleMap {
this.minZoomLevel = minZoomLevel;
this.tooltips = [];
this.defaultMapType = gmDefaultMapType;
this.defaultCenterPosition = defaultCenterPosition;
function clearGlobalId() {
if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) {
@ -42,13 +43,12 @@ export default class TbGoogleMap {
}
function initGoogleMap() {
tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: !disableScrollZooming,
mapTypeId: getGoogleMapTypeId(tbMap.defaultMapType),
zoom: tbMap.defaultZoomLevel || 8
zoom: tbMap.defaultZoomLevel || 8,
center: new google.maps.LatLng(tbMap.defaultCenterPosition[0], tbMap.defaultCenterPosition[1]) // eslint-disable-line no-undef
});
if (initCallback) {
initCallback();
}

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

@ -53,6 +53,12 @@ export default class TbMapWidgetV2 {
}
}
if (angular.isUndefined(settings.defaultCenterPosition)) {
settings.defaultCenterPosition = [0,0];
} else if (angular.isString(settings.defaultCenterPosition)) {
settings.defaultCenterPosition = settings.defaultCenterPosition.split(',').map(x => +x);
}
this.dontFitMapBounds = settings.fitMapBounds === false;
if (!useDynamicLocations) {
@ -78,9 +84,9 @@ export default class TbMapWidgetV2 {
tbMap.tooltipActionsMap[descriptor.name] = descriptor;
});
let openStreetMapProvider = {};
let openStreetMapProvider = {};
if (mapProvider === 'google-map') {
this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType, settings.defaultCenterPosition);
} else if (mapProvider === 'openstreet-map') {
if (settings.useCustomProvider && settings.customProviderTileUrl) {
openStreetMapProvider.name = settings.customProviderTileUrl;
@ -88,19 +94,20 @@ export default class TbMapWidgetV2 {
} else {
openStreetMapProvider.name = settings.mapProvider;
}
this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider);
this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, null,settings.defaultCenterPosition);
} else if (mapProvider === 'here') {
openStreetMapProvider.name = settings.mapProvider;
this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials);
this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials, settings.defaultCenterPosition);
} else if (mapProvider === 'image-map') {
this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback,
settings.mapImageUrl,
settings.disableScrollZooming,
settings.posFunction,
settings.imageEntityAlias,
settings.imageUrlAttribute);
settings.imageUrlAttribute,
settings.useDefaultCenterPosition ? settings.defaultCenterPosition: null);
} else if (mapProvider === 'tencent-map') {
this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType);
this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType, settings.defaultCenterPosition);
}
@ -156,7 +163,8 @@ export default class TbMapWidgetV2 {
this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
this.locationSettings.useDefaultCenterPosition = this.ctx.settings.useDefaultCenterPosition === true;
this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
@ -455,8 +463,8 @@ export default class TbMapWidgetV2 {
}
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]);
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, function (event) {
@ -476,7 +484,7 @@ export default class TbMapWidgetV2 {
}
function loadLocations(data, datasources) {
var bounds = tbMap.map.createBounds();
var bounds = tbMap.locationSettings.useDefaultCenterPosition ? tbMap.map.createBounds().extend(tbMap.map.map.getCenter()) : tbMap.map.createBounds();
tbMap.locations = [];
var dataMap = toLabelValueMap(data, datasources);
var currentDatasource = null;
@ -521,12 +529,13 @@ 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) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker);
}
if (!tbMap.locationSettings.useDefaultCenterPosition) {
if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker);
}
}
latIndex = -1;
lngIndex = -1;
}
@ -548,7 +557,9 @@ export default class TbMapWidgetV2 {
});
tbMap.locations.push(location);
createUpdatePolygon(location, dataMap);
tbMap.map.extendBounds(bounds, location.polygon);
if (!tbMap.locationSettings.useDefaultCenterPosition) {
tbMap.map.extendBounds(bounds, location.polygon);
}
}
});
@ -576,19 +587,21 @@ export default class TbMapWidgetV2 {
function updateLocations(data, datasources) {
var locationsChanged = false;
var bounds = tbMap.map.createBounds();
var bounds = tbMap.locationSettings.useDefaultCenterPosition ? tbMap.map.createBounds().extend(tbMap.map.map.getCenter()) : tbMap.map.createBounds();
var dataMap = toLabelValueMap(data, datasources);
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);
}
createUpdatePolygon(location, dataMap);
if (!tbMap.locationSettings.useDefaultCenterPosition) {
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) {
let dataReceived = datasources.every(
@ -626,7 +639,8 @@ export default class TbMapWidgetV2 {
if (this.subscription.data) {
if (!this.locations) {
loadLocations(this.subscription.data, this.subscription.datasources);
} else {
} else {
updateLocations(this.subscription.data, this.subscription.datasources);
}
var tooltips = this.map.getTooltips();
@ -644,22 +658,24 @@ export default class TbMapWidgetV2 {
let map = this.map;
if (this.locations && this.locations.length > 0) {
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 && 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);
})
}
var bounds = this.locationSettings.useDefaultCenterPosition ? map.createBounds().extend(map.map.getCenter()) : map.createBounds();
if (!this.locationSettings.useDefaultCenterPosition) {
if (this.markers && this.markers.length > 0) {
this.markers.forEach(function (marker) {
map.extendBoundsWithMarker(bounds, marker);
});
}
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);
})
}
}
map.fitBounds(bounds);
}
}
@ -962,6 +978,16 @@ const commonMapSettingsSchema =
"title": "Default map zoom level (1 - 20)",
"type": "number"
},
"useDefaultCenterPosition": {
"title": "Use default map center position",
"type": "boolean",
"default": false
},
"defaultCenterPosition": {
"title": "Default map center position (0,0)",
"type": "string",
"default" : "0,0"
},
"fitMapBounds": {
"title": "Fit map bounds to cover all markers",
"type": "boolean",
@ -1116,6 +1142,8 @@ const commonMapSettingsSchema =
},
"form": [
"defaultZoomLevel",
"useDefaultCenterPosition",
"defaultCenterPosition",
"fitMapBounds",
"disableScrollZooming",
"latKeyName",

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

@ -19,7 +19,7 @@ import 'leaflet-providers';
export default class TbOpenStreetMap {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials) {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials, defaultCenterPosition) {
this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel;
@ -38,7 +38,8 @@ export default class TbOpenStreetMap {
credentials.app_code = credentials.app_code || "p6NPiITB3Vv0GMUFnkLOOg";
}
this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
defaultCenterPosition = defaultCenterPosition || [0,0];
this.map = L.map($containerElement[0]).setView(defaultCenterPosition, this.defaultZoomLevel || 8);
if (disableScrollZooming) {
this.map.scrollWheelZoom.disable();

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

@ -19,7 +19,7 @@ var tmGlobals = {
}
export default class TbTencentMap {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType) {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType, defaultCenterPosition) {
var tbMap = this;
this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel;
@ -27,6 +27,7 @@ export default class TbTencentMap {
this.minZoomLevel = minZoomLevel;
this.tooltips = [];
this.defaultMapType = tmDefaultMapType;
this.defaultCenterPosition =defaultCenterPosition;
function clearGlobalId() {
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
@ -44,7 +45,8 @@ export default class TbTencentMap {
tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: !disableScrollZooming,
mapTypeId: getTencentMapTypeId(tbMap.defaultMapType),
zoom: tbMap.defaultZoomLevel || 8
zoom: tbMap.defaultZoomLevel || 8,
center: new qq.maps.LatLng(tbMap.defaultCenterPosition[0],tbMap.defaultCenterPosition[1]) // eslint-disable-line no-undef
});
if (initCallback) {