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

Map Markers images load improvements.

Browse Source
This commit is contained in:
Igor Kulikov 2018-01-03 15:51:45 +02:00
parent 89e4c9caf0
commit debbcc89c0
6 changed files with 133 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/src/app/common/utils.service.js
View File

@ -134,6 +134,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
defaultAlarmDataKeys.push(dataKey); defaultAlarmDataKeys.push(dataKey);
} }
var imageAspectMap = {};
var service = { var service = {
getDefaultDatasource: getDefaultDatasource, getDefaultDatasource: getDefaultDatasource,
generateObjectFromJsonSchema: generateObjectFromJsonSchema, generateObjectFromJsonSchema: generateObjectFromJsonSchema,
@ -159,7 +161,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
insertVariable: insertVariable, insertVariable: insertVariable,
customTranslation: customTranslation, customTranslation: customTranslation,
objToBase64: objToBase64, objToBase64: objToBase64,
base64toObj: base64toObj base64toObj: base64toObj,
loadImageAspect: loadImageAspect
} }
return service; return service;
@ -543,4 +546,34 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
return obj; return obj;
} }
function loadImageAspect(imageUrl) {
var deferred = $q.defer();
if (imageUrl && imageUrl.length) {
var urlHashCode = hashCode(imageUrl);
var aspect = imageAspectMap[urlHashCode];
if (angular.isUndefined(aspect)) {
var testImage = document.createElement('img'); // eslint-disable-line
testImage.style.visibility = 'hidden';
testImage.onload = function() {
aspect = testImage.width / testImage.height;
document.body.removeChild(testImage); //eslint-disable-line
imageAspectMap[urlHashCode] = aspect;
deferred.resolve(aspect);
};
testImage.onerror = function() {
aspect = 0;
imageAspectMap[urlHashCode] = aspect;
deferred.resolve(aspect);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = imageUrl;
} else {
deferred.resolve(aspect);
}
} else {
deferred.resolve(0);
}
return deferred.promise;
}
} }

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

@ -19,9 +19,10 @@ var gmGlobals = {
} }
export default class TbGoogleMap { export default class TbGoogleMap {
constructor($containerElement, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, gmApiKey, gmDefaultMapType) { constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, gmApiKey, gmDefaultMapType) {
var tbMap = this; var tbMap = this;
this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
this.dontFitMapBounds = dontFitMapBounds; this.dontFitMapBounds = dontFitMapBounds;
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
@ -172,35 +173,32 @@ export default class TbGoogleMap {
var currentImage = settings.currentImage; var currentImage = settings.currentImage;
var gMap = this; var gMap = this;
if (currentImage && currentImage.url) { if (currentImage && currentImage.url) {
var testImage = document.createElement('img'); // eslint-disable-line this.utils.loadImageAspect(currentImage.url).then(
testImage.style.visibility = 'hidden'; (aspect) => {
testImage.onload = function() { if (aspect) {
var width; var width;
var height; var height;
var aspect = testImage.width / testImage.height; if (aspect > 1) {
document.body.removeChild(testImage); //eslint-disable-line width = currentImage.size;
if (aspect > 1) { height = currentImage.size / aspect;
width = currentImage.size; } else {
height = currentImage.size / aspect; width = currentImage.size * aspect;
} else { height = currentImage.size;
width = currentImage.size * aspect; }
height = currentImage.size; var icon = {
url: currentImage.url,
scaledSize : new google.maps.Size(width, height)
};
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
} else {
gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
} }
var icon = { );
url: currentImage.url,
scaledSize : new google.maps.Size(width, height)
};
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
};
testImage.onerror = function() {
gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = currentImage.url;
} else { } else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }

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

@ -20,9 +20,10 @@ const maxZoom = 4;
export default class TbImageMap { export default class TbImageMap {
constructor(ctx, $containerElement, initCallback, imageUrl, posFunction, imageEntityAlias, imageUrlAttribute) { constructor(ctx, $containerElement, utils, initCallback, imageUrl, posFunction, imageEntityAlias, imageUrlAttribute) {
this.ctx = ctx; this.ctx = ctx;
this.utils = utils;
this.tooltips = []; this.tooltips = [];
this.$containerElement = $containerElement; this.$containerElement = $containerElement;
@ -116,18 +117,15 @@ export default class TbImageMap {
} }
this.imageUrl = imageUrl; this.imageUrl = imageUrl;
var imageMap = this; var imageMap = this;
var testImage = document.createElement('img'); // eslint-disable-line this.utils.loadImageAspect(imageUrl).then(
testImage.style.visibility = 'hidden'; (aspect) => {
testImage.onload = function() { imageMap.aspect = aspect;
imageMap.aspect = testImage.width / testImage.height; imageMap.onresize(updateImage);
document.body.removeChild(testImage); //eslint-disable-line if (initCallback) {
imageMap.onresize(updateImage); setTimeout(initCallback, 0); //eslint-disable-line
if (initCallback) { }
setTimeout(initCallback, 0); //eslint-disable-line
} }
} );
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = imageUrl;
} }
onresize(updateImage) { onresize(updateImage) {
@ -249,37 +247,34 @@ export default class TbImageMap {
var currentImage = settings.currentImage; var currentImage = settings.currentImage;
var opMap = this; var opMap = this;
if (currentImage && currentImage.url) { if (currentImage && currentImage.url) {
var testImage = document.createElement('img'); // eslint-disable-line this.utils.loadImageAspect(currentImage.url).then(
testImage.style.visibility = 'hidden'; (aspect) => {
testImage.onload = function() { if (aspect) {
var width; var width;
var height; var height;
var aspect = testImage.width / testImage.height; if (aspect > 1) {
document.body.removeChild(testImage); //eslint-disable-line width = currentImage.size;
if (aspect > 1) { height = currentImage.size / aspect;
width = currentImage.size; } else {
height = currentImage.size / aspect; width = currentImage.size * aspect;
} else { height = currentImage.size;
width = currentImage.size * aspect; }
height = currentImage.size; var icon = L.icon({
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [marker.offsetX * width, marker.offsetY * height],
popupAnchor: [0, -height]
});
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
} else {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
} }
var icon = L.icon({ );
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [marker.offsetX * width, marker.offsetY * height],
popupAnchor: [0, -height]
});
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
};
testImage.onerror = function() {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = currentImage.url;
} else { } else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }

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

@ -74,7 +74,7 @@ export default class TbMapWidget {
if (!$element) { if (!$element) {
$element = ctx.$container; $element = ctx.$container;
} }
this.utils = ctx.$scope.$injector.get('utils');
this.drawRoutes = drawRoutes; this.drawRoutes = drawRoutes;
this.markers = []; this.markers = [];
if (this.drawRoutes) { if (this.drawRoutes) {
@ -109,9 +109,9 @@ export default class TbMapWidget {
}; };
if (mapProvider === 'google-map') { if (mapProvider === 'google-map') {
this.map = new TbGoogleMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType); this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
} else if (mapProvider === 'openstreet-map') { } else if (mapProvider === 'openstreet-map') {
this.map = new TbOpenStreetMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel); this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel);
} }
} }

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

@ -74,11 +74,11 @@ export default class TbMapWidgetV2 {
}); });
if (mapProvider === 'google-map') { if (mapProvider === 'google-map') {
this.map = new TbGoogleMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType); this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
} else if (mapProvider === 'openstreet-map') { } else if (mapProvider === 'openstreet-map') {
this.map = new TbOpenStreetMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.mapProvider); this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.mapProvider);
} else if (mapProvider === 'image-map') { } else if (mapProvider === 'image-map') {
this.map = new TbImageMap(this.ctx, $element, initCallback, this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback,
settings.mapImageUrl, settings.mapImageUrl,
settings.posFunction, settings.posFunction,
settings.imageEntityAlias, settings.imageEntityAlias,

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

@ -19,8 +19,9 @@ import 'leaflet-providers';
export default class TbOpenStreetMap { export default class TbOpenStreetMap {
constructor($containerElement, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) { constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) {
this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
this.dontFitMapBounds = dontFitMapBounds; this.dontFitMapBounds = dontFitMapBounds;
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
@ -74,37 +75,34 @@ export default class TbOpenStreetMap {
var currentImage = settings.currentImage; var currentImage = settings.currentImage;
var opMap = this; var opMap = this;
if (currentImage && currentImage.url) { if (currentImage && currentImage.url) {
var testImage = document.createElement('img'); // eslint-disable-line this.utils.loadImageAspect(currentImage.url).then(
testImage.style.visibility = 'hidden'; (aspect) => {
testImage.onload = function() { if (aspect) {
var width; var width;
var height; var height;
var aspect = testImage.width / testImage.height; if (aspect > 1) {
document.body.removeChild(testImage); //eslint-disable-line width = currentImage.size;
if (aspect > 1) { height = currentImage.size / aspect;
width = currentImage.size; } else {
height = currentImage.size / aspect; width = currentImage.size * aspect;
} else { height = currentImage.size;
width = currentImage.size * aspect; }
height = currentImage.size; var icon = L.icon({
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [width/2, height],
popupAnchor: [0, -height]
});
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
} else {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
} }
var icon = L.icon({ );
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [width/2, height],
popupAnchor: [0, -height]
});
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
};
testImage.onerror = function() {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = currentImage.url;
} else { } else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }