tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

New fixed center func for maps (#1910) 

* 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
pull/1928/head
DudnikMaksym 7 years ago
committed by Igor Kulikov
parent
03631c83b0
commit
6a54e2ff1e
4 changed files with 82 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      ui/src/app/widget/lib/google-map.js
  2. 114
      ui/src/app/widget/lib/map-widget2.js
  3. 5
      ui/src/app/widget/lib/openstreet-map.js
  4. 6
      ui/src/app/widget/lib/tencent-map.js

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

@ -19,7 +19,7 @@ var gmGlobals = {
} }
export default class TbGoogleMap { 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; var tbMap = this;
this.utils = utils; this.utils = utils;
@ -28,6 +28,7 @@ export default class TbGoogleMap {
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
this.tooltips = []; this.tooltips = [];
this.defaultMapType = gmDefaultMapType; this.defaultMapType = gmDefaultMapType;
this.defaultCenterPosition = defaultCenterPosition;
function clearGlobalId() { function clearGlobalId() {
if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) { if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) {
@ -42,13 +43,12 @@ export default class TbGoogleMap {
} }
function initGoogleMap() { function initGoogleMap() {
tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: !disableScrollZooming, scrollwheel: !disableScrollZooming,
mapTypeId: getGoogleMapTypeId(tbMap.defaultMapType), 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) { if (initCallback) {
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; this.dontFitMapBounds = settings.fitMapBounds === false;
if (!useDynamicLocations) { if (!useDynamicLocations) {
@ -78,9 +84,9 @@ export default class TbMapWidgetV2 {
tbMap.tooltipActionsMap[descriptor.name] = descriptor; tbMap.tooltipActionsMap[descriptor.name] = descriptor;
}); });
let openStreetMapProvider = {}; let openStreetMapProvider = {};
if (mapProvider === 'google-map') { 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') { } else if (mapProvider === 'openstreet-map') {
if (settings.useCustomProvider && settings.customProviderTileUrl) { if (settings.useCustomProvider && settings.customProviderTileUrl) {
openStreetMapProvider.name = settings.customProviderTileUrl; openStreetMapProvider.name = settings.customProviderTileUrl;
@ -88,19 +94,20 @@ export default class TbMapWidgetV2 {
} else { } else {
openStreetMapProvider.name = settings.mapProvider; 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') { } else if (mapProvider === 'here') {
openStreetMapProvider.name = settings.mapProvider; 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') { } else if (mapProvider === 'image-map') {
this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback, this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback,
settings.mapImageUrl, settings.mapImageUrl,
settings.disableScrollZooming, settings.disableScrollZooming,
settings.posFunction, settings.posFunction,
settings.imageEntityAlias, settings.imageEntityAlias,
settings.imageUrlAttribute); settings.imageUrlAttribute,
settings.useDefaultCenterPosition ? settings.defaultCenterPosition: null);
} else if (mapProvider === 'tencent-map') { } 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.showLabel = this.ctx.settings.showLabel !== false;
this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== 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.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true; this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000'; this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
@ -455,8 +463,8 @@ export default class TbMapWidgetV2 {
} }
function createUpdatePolygon(location, dataMap) { function createUpdatePolygon(location, dataMap) {
if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) { if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]); let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw); let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
if (!location.polygon && polygonLatLngs.length > 0) { if (!location.polygon && polygonLatLngs.length > 0) {
location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) { location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
@ -476,7 +484,7 @@ export default class TbMapWidgetV2 {
} }
function loadLocations(data, datasources) { 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 = []; tbMap.locations = [];
var dataMap = toLabelValueMap(data, datasources); var dataMap = toLabelValueMap(data, datasources);
var currentDatasource = null; var currentDatasource = null;
@ -521,12 +529,13 @@ export default class TbMapWidgetV2 {
} }
tbMap.locations.push(location); tbMap.locations.push(location);
updateLocation(location, data, dataMap); updateLocation(location, data, dataMap);
if (!tbMap.locationSettings.useDefaultCenterPosition) {
if (location.polyline) { if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline); tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) { } else if (location.marker) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker); tbMap.map.extendBoundsWithMarker(bounds, location.marker);
} }
}
latIndex = -1; latIndex = -1;
lngIndex = -1; lngIndex = -1;
} }
@ -548,7 +557,9 @@ export default class TbMapWidgetV2 {
}); });
tbMap.locations.push(location); tbMap.locations.push(location);
createUpdatePolygon(location, dataMap); 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) { function updateLocations(data, datasources) {
var locationsChanged = false; 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); var dataMap = toLabelValueMap(data, datasources);
for (var p = 0; p < tbMap.locations.length; p++) { for (var p = 0; p < tbMap.locations.length; p++) {
var location = tbMap.locations[p]; var location = tbMap.locations[p];
locationsChanged |= updateLocation(location, data, dataMap); locationsChanged |= updateLocation(location, data, dataMap);
createUpdatePolygon(location, dataMap); createUpdatePolygon(location, dataMap);
if (location.polyline) { if (!tbMap.locationSettings.useDefaultCenterPosition) {
tbMap.map.extendBounds(bounds, location.polyline); if (location.polyline) {
} else if (location.marker) { tbMap.map.extendBounds(bounds, location.polyline);
tbMap.map.extendBoundsWithMarker(bounds, location.marker); } else if (location.marker) {
} else if (location.polygon) { tbMap.map.extendBoundsWithMarker(bounds, location.marker);
tbMap.map.extendBounds(bounds, location.polygon); } else if (location.polygon) {
} tbMap.map.extendBounds(bounds, location.polygon);
}
}
} }
if (locationsChanged && tbMap.initBounds) { if (locationsChanged && tbMap.initBounds) {
let dataReceived = datasources.every( let dataReceived = datasources.every(
@ -626,7 +639,8 @@ export default class TbMapWidgetV2 {
if (this.subscription.data) { if (this.subscription.data) {
if (!this.locations) { if (!this.locations) {
loadLocations(this.subscription.data, this.subscription.datasources); loadLocations(this.subscription.data, this.subscription.datasources);
} else {
} else {
updateLocations(this.subscription.data, this.subscription.datasources); updateLocations(this.subscription.data, this.subscription.datasources);
} }
var tooltips = this.map.getTooltips(); var tooltips = this.map.getTooltips();
@ -644,22 +658,24 @@ export default class TbMapWidgetV2 {
let map = this.map; let map = this.map;
if (this.locations && this.locations.length > 0) { if (this.locations && this.locations.length > 0) {
map.invalidateSize(); map.invalidateSize();
var bounds = map.createBounds(); var bounds = this.locationSettings.useDefaultCenterPosition ? map.createBounds().extend(map.map.getCenter()) : map.createBounds();
if (this.markers && this.markers.length>0) { if (!this.locationSettings.useDefaultCenterPosition) {
this.markers.forEach(function (marker) { if (this.markers && this.markers.length > 0) {
map.extendBoundsWithMarker(bounds, marker); this.markers.forEach(function (marker) {
}); map.extendBoundsWithMarker(bounds, marker);
} });
if (this.polylines && this.polylines.length>0) { }
this.polylines.forEach(function (polyline) { if (this.polylines && this.polylines.length > 0) {
map.extendBounds(bounds, polyline); this.polylines.forEach(function (polyline) {
}) map.extendBounds(bounds, polyline);
} })
if (this.polygons && this.polygons.length > 0) { }
this.polygons.forEach(function (polygon) { if (this.polygons && this.polygons.length > 0) {
map.extendBounds(bounds, polygon); this.polygons.forEach(function (polygon) {
}) map.extendBounds(bounds, polygon);
} })
}
}
map.fitBounds(bounds); map.fitBounds(bounds);
} }
} }
@ -962,6 +978,16 @@ const commonMapSettingsSchema =
"title": "Default map zoom level (1 - 20)", "title": "Default map zoom level (1 - 20)",
"type": "number" "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": { "fitMapBounds": {
"title": "Fit map bounds to cover all markers", "title": "Fit map bounds to cover all markers",
"type": "boolean", "type": "boolean",
@ -1116,6 +1142,8 @@ const commonMapSettingsSchema =
}, },
"form": [ "form": [
"defaultZoomLevel", "defaultZoomLevel",
"useDefaultCenterPosition",
"defaultCenterPosition",
"fitMapBounds", "fitMapBounds",
"disableScrollZooming", "disableScrollZooming",
"latKeyName", "latKeyName",

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

@ -19,7 +19,7 @@ import 'leaflet-providers';
export default class TbOpenStreetMap { 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.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
@ -38,7 +38,8 @@ export default class TbOpenStreetMap {
credentials.app_code = credentials.app_code || "p6NPiITB3Vv0GMUFnkLOOg"; 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) { if (disableScrollZooming) {
this.map.scrollWheelZoom.disable(); 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 { 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; var tbMap = this;
this.utils = utils; this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
@ -27,6 +27,7 @@ export default class TbTencentMap {
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
this.tooltips = []; this.tooltips = [];
this.defaultMapType = tmDefaultMapType; this.defaultMapType = tmDefaultMapType;
this.defaultCenterPosition =defaultCenterPosition;
function clearGlobalId() { function clearGlobalId() {
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) { 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 tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: !disableScrollZooming, scrollwheel: !disableScrollZooming,
mapTypeId: getTencentMapTypeId(tbMap.defaultMapType), 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) { if (initCallback) {

Write Preview
Loading…
Cancel
Save