简柏林 / thingskit · Commits

Commit debbcc89c0e24c13f63e8d059ae7c39ee6f50e5f

Authored by Igor Kulikov
1 parent 89e4c9ca

Map Markers images load improvements.

Inline Side-by-side
Showing 6 changed files with 133 additions and 109 deletions
@@ -134,6 +134,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t @@ -134,6 +134,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
134 defaultAlarmDataKeys.push(dataKey); 134 defaultAlarmDataKeys.push(dataKey);
135 } 135 }
136 136
  137 + var imageAspectMap = {};
  138 +
137 var service = { 139 var service = {
138 getDefaultDatasource: getDefaultDatasource, 140 getDefaultDatasource: getDefaultDatasource,
139 generateObjectFromJsonSchema: generateObjectFromJsonSchema, 141 generateObjectFromJsonSchema: generateObjectFromJsonSchema,
@@ -159,7 +161,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t @@ -159,7 +161,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
159 insertVariable: insertVariable, 161 insertVariable: insertVariable,
160 customTranslation: customTranslation, 162 customTranslation: customTranslation,
161 objToBase64: objToBase64, 163 objToBase64: objToBase64,
162 - base64toObj: base64toObj 164 + base64toObj: base64toObj,
  165 + loadImageAspect: loadImageAspect
163 } 166 }
164 167
165 return service; 168 return service;
@@ -543,4 +546,34 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t @@ -543,4 +546,34 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
543 return obj; 546 return obj;
544 } 547 }
545 548
  549 + function loadImageAspect(imageUrl) {
  550 + var deferred = $q.defer();
  551 + if (imageUrl && imageUrl.length) {
  552 + var urlHashCode = hashCode(imageUrl);
  553 + var aspect = imageAspectMap[urlHashCode];
  554 + if (angular.isUndefined(aspect)) {
  555 + var testImage = document.createElement('img'); // eslint-disable-line
  556 + testImage.style.visibility = 'hidden';
  557 + testImage.onload = function() {
  558 + aspect = testImage.width / testImage.height;
  559 + document.body.removeChild(testImage); //eslint-disable-line
  560 + imageAspectMap[urlHashCode] = aspect;
  561 + deferred.resolve(aspect);
  562 + };
  563 + testImage.onerror = function() {
  564 + aspect = 0;
  565 + imageAspectMap[urlHashCode] = aspect;
  566 + deferred.resolve(aspect);
  567 + };
  568 + document.body.appendChild(testImage); //eslint-disable-line
  569 + testImage.src = imageUrl;
  570 + } else {
  571 + deferred.resolve(aspect);
  572 + }
  573 + } else {
  574 + deferred.resolve(0);
  575 + }
  576 + return deferred.promise;
  577 + }
  578 +
546 } 579 }
@@ -19,9 +19,10 @@ var gmGlobals = { @@ -19,9 +19,10 @@ var gmGlobals = {
19 } 19 }
20 20
21 export default class TbGoogleMap { 21 export default class TbGoogleMap {
22 - constructor($containerElement, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, gmApiKey, gmDefaultMapType) { 22 + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, gmApiKey, gmDefaultMapType) {
23 23
24 var tbMap = this; 24 var tbMap = this;
  25 + this.utils = utils;
25 this.defaultZoomLevel = defaultZoomLevel; 26 this.defaultZoomLevel = defaultZoomLevel;
26 this.dontFitMapBounds = dontFitMapBounds; 27 this.dontFitMapBounds = dontFitMapBounds;
27 this.minZoomLevel = minZoomLevel; 28 this.minZoomLevel = minZoomLevel;
@@ -172,35 +173,32 @@ export default class TbGoogleMap { @@ -172,35 +173,32 @@ export default class TbGoogleMap {
172 var currentImage = settings.currentImage; 173 var currentImage = settings.currentImage;
173 var gMap = this; 174 var gMap = this;
174 if (currentImage && currentImage.url) { 175 if (currentImage && currentImage.url) {
175 - var testImage = document.createElement('img'); // eslint-disable-line  
176 - testImage.style.visibility = 'hidden';  
177 - testImage.onload = function() {  
178 - var width;  
179 - var height;  
180 - var aspect = testImage.width / testImage.height;  
181 - document.body.removeChild(testImage); //eslint-disable-line  
182 - if (aspect > 1) {  
183 - width = currentImage.size;  
184 - height = currentImage.size / aspect;  
185 - } else {  
186 - width = currentImage.size * aspect;  
187 - height = currentImage.size; 176 + this.utils.loadImageAspect(currentImage.url).then(
  177 + (aspect) => {
  178 + if (aspect) {
  179 + var width;
  180 + var height;
  181 + if (aspect > 1) {
  182 + width = currentImage.size;
  183 + height = currentImage.size / aspect;
  184 + } else {
  185 + width = currentImage.size * aspect;
  186 + height = currentImage.size;
  187 + }
  188 + var icon = {
  189 + url: currentImage.url,
  190 + scaledSize : new google.maps.Size(width, height)
  191 + };
  192 + var iconInfo = {
  193 + size: [width, height],
  194 + icon: icon
  195 + };
  196 + onMarkerIconReady(iconInfo);
  197 + } else {
  198 + gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
  199 + }
188 } 200 }
189 - var icon = {  
190 - url: currentImage.url,  
191 - scaledSize : new google.maps.Size(width, height)  
192 - };  
193 - var iconInfo = {  
194 - size: [width, height],  
195 - icon: icon  
196 - };  
197 - onMarkerIconReady(iconInfo);  
198 - };  
199 - testImage.onerror = function() {  
200 - gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);  
201 - };  
202 - document.body.appendChild(testImage); //eslint-disable-line  
203 - testImage.src = currentImage.url; 201 + );
204 } else { 202 } else {
205 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); 203 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
206 } 204 }
@@ -20,9 +20,10 @@ const maxZoom = 4; @@ -20,9 +20,10 @@ const maxZoom = 4;
20 20
21 export default class TbImageMap { 21 export default class TbImageMap {
22 22
23 - constructor(ctx, $containerElement, initCallback, imageUrl, posFunction, imageEntityAlias, imageUrlAttribute) { 23 + constructor(ctx, $containerElement, utils, initCallback, imageUrl, posFunction, imageEntityAlias, imageUrlAttribute) {
24 24
25 this.ctx = ctx; 25 this.ctx = ctx;
  26 + this.utils = utils;
26 this.tooltips = []; 27 this.tooltips = [];
27 28
28 this.$containerElement = $containerElement; 29 this.$containerElement = $containerElement;
@@ -116,18 +117,15 @@ export default class TbImageMap { @@ -116,18 +117,15 @@ export default class TbImageMap {
116 } 117 }
117 this.imageUrl = imageUrl; 118 this.imageUrl = imageUrl;
118 var imageMap = this; 119 var imageMap = this;
119 - var testImage = document.createElement('img'); // eslint-disable-line  
120 - testImage.style.visibility = 'hidden';  
121 - testImage.onload = function() {  
122 - imageMap.aspect = testImage.width / testImage.height;  
123 - document.body.removeChild(testImage); //eslint-disable-line  
124 - imageMap.onresize(updateImage);  
125 - if (initCallback) {  
126 - setTimeout(initCallback, 0); //eslint-disable-line 120 + this.utils.loadImageAspect(imageUrl).then(
  121 + (aspect) => {
  122 + imageMap.aspect = aspect;
  123 + imageMap.onresize(updateImage);
  124 + if (initCallback) {
  125 + setTimeout(initCallback, 0); //eslint-disable-line
  126 + }
127 } 127 }
128 - }  
129 - document.body.appendChild(testImage); //eslint-disable-line  
130 - testImage.src = imageUrl; 128 + );
131 } 129 }
132 130
133 onresize(updateImage) { 131 onresize(updateImage) {
@@ -249,37 +247,34 @@ export default class TbImageMap { @@ -249,37 +247,34 @@ export default class TbImageMap {
249 var currentImage = settings.currentImage; 247 var currentImage = settings.currentImage;
250 var opMap = this; 248 var opMap = this;
251 if (currentImage && currentImage.url) { 249 if (currentImage && currentImage.url) {
252 - var testImage = document.createElement('img'); // eslint-disable-line  
253 - testImage.style.visibility = 'hidden';  
254 - testImage.onload = function() {  
255 - var width;  
256 - var height;  
257 - var aspect = testImage.width / testImage.height;  
258 - document.body.removeChild(testImage); //eslint-disable-line  
259 - if (aspect > 1) {  
260 - width = currentImage.size;  
261 - height = currentImage.size / aspect;  
262 - } else {  
263 - width = currentImage.size * aspect;  
264 - height = currentImage.size; 250 + this.utils.loadImageAspect(currentImage.url).then(
  251 + (aspect) => {
  252 + if (aspect) {
  253 + var width;
  254 + var height;
  255 + if (aspect > 1) {
  256 + width = currentImage.size;
  257 + height = currentImage.size / aspect;
  258 + } else {
  259 + width = currentImage.size * aspect;
  260 + height = currentImage.size;
  261 + }
  262 + var icon = L.icon({
  263 + iconUrl: currentImage.url,
  264 + iconSize: [width, height],
  265 + iconAnchor: [marker.offsetX * width, marker.offsetY * height],
  266 + popupAnchor: [0, -height]
  267 + });
  268 + var iconInfo = {
  269 + size: [width, height],
  270 + icon: icon
  271 + };
  272 + onMarkerIconReady(iconInfo);
  273 + } else {
  274 + opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
  275 + }
265 } 276 }
266 - var icon = L.icon({  
267 - iconUrl: currentImage.url,  
268 - iconSize: [width, height],  
269 - iconAnchor: [marker.offsetX * width, marker.offsetY * height],  
270 - popupAnchor: [0, -height]  
271 - });  
272 - var iconInfo = {  
273 - size: [width, height],  
274 - icon: icon  
275 - };  
276 - onMarkerIconReady(iconInfo);  
277 - };  
278 - testImage.onerror = function() {  
279 - opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);  
280 - };  
281 - document.body.appendChild(testImage); //eslint-disable-line  
282 - testImage.src = currentImage.url; 277 + );
283 } else { 278 } else {
284 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); 279 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
285 } 280 }
@@ -74,7 +74,7 @@ export default class TbMapWidget { @@ -74,7 +74,7 @@ export default class TbMapWidget {
74 if (!$element) { 74 if (!$element) {
75 $element = ctx.$container; 75 $element = ctx.$container;
76 } 76 }
77 - 77 + this.utils = ctx.$scope.$injector.get('utils');
78 this.drawRoutes = drawRoutes; 78 this.drawRoutes = drawRoutes;
79 this.markers = []; 79 this.markers = [];
80 if (this.drawRoutes) { 80 if (this.drawRoutes) {
@@ -109,9 +109,9 @@ export default class TbMapWidget { @@ -109,9 +109,9 @@ export default class TbMapWidget {
109 }; 109 };
110 110
111 if (mapProvider === 'google-map') { 111 if (mapProvider === 'google-map') {
112 - this.map = new TbGoogleMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType); 112 + this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
113 } else if (mapProvider === 'openstreet-map') { 113 } else if (mapProvider === 'openstreet-map') {
114 - this.map = new TbOpenStreetMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel); 114 + this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel);
115 } 115 }
116 116
117 } 117 }
@@ -74,11 +74,11 @@ export default class TbMapWidgetV2 { @@ -74,11 +74,11 @@ export default class TbMapWidgetV2 {
74 }); 74 });
75 75
76 if (mapProvider === 'google-map') { 76 if (mapProvider === 'google-map') {
77 - this.map = new TbGoogleMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType); 77 + this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
78 } else if (mapProvider === 'openstreet-map') { 78 } else if (mapProvider === 'openstreet-map') {
79 - this.map = new TbOpenStreetMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.mapProvider); 79 + this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.mapProvider);
80 } else if (mapProvider === 'image-map') { 80 } else if (mapProvider === 'image-map') {
81 - this.map = new TbImageMap(this.ctx, $element, initCallback, 81 + this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback,
82 settings.mapImageUrl, 82 settings.mapImageUrl,
83 settings.posFunction, 83 settings.posFunction,
84 settings.imageEntityAlias, 84 settings.imageEntityAlias,
@@ -19,8 +19,9 @@ import 'leaflet-providers'; @@ -19,8 +19,9 @@ import 'leaflet-providers';
19 19
20 export default class TbOpenStreetMap { 20 export default class TbOpenStreetMap {
21 21
22 - constructor($containerElement, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) { 22 + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) {
23 23
  24 + this.utils = utils;
24 this.defaultZoomLevel = defaultZoomLevel; 25 this.defaultZoomLevel = defaultZoomLevel;
25 this.dontFitMapBounds = dontFitMapBounds; 26 this.dontFitMapBounds = dontFitMapBounds;
26 this.minZoomLevel = minZoomLevel; 27 this.minZoomLevel = minZoomLevel;
@@ -74,37 +75,34 @@ export default class TbOpenStreetMap { @@ -74,37 +75,34 @@ export default class TbOpenStreetMap {
74 var currentImage = settings.currentImage; 75 var currentImage = settings.currentImage;
75 var opMap = this; 76 var opMap = this;
76 if (currentImage && currentImage.url) { 77 if (currentImage && currentImage.url) {
77 - var testImage = document.createElement('img'); // eslint-disable-line  
78 - testImage.style.visibility = 'hidden';  
79 - testImage.onload = function() {  
80 - var width;  
81 - var height;  
82 - var aspect = testImage.width / testImage.height;  
83 - document.body.removeChild(testImage); //eslint-disable-line  
84 - if (aspect > 1) {  
85 - width = currentImage.size;  
86 - height = currentImage.size / aspect;  
87 - } else {  
88 - width = currentImage.size * aspect;  
89 - height = currentImage.size; 78 + this.utils.loadImageAspect(currentImage.url).then(
  79 + (aspect) => {
  80 + if (aspect) {
  81 + var width;
  82 + var height;
  83 + if (aspect > 1) {
  84 + width = currentImage.size;
  85 + height = currentImage.size / aspect;
  86 + } else {
  87 + width = currentImage.size * aspect;
  88 + height = currentImage.size;
  89 + }
  90 + var icon = L.icon({
  91 + iconUrl: currentImage.url,
  92 + iconSize: [width, height],
  93 + iconAnchor: [width/2, height],
  94 + popupAnchor: [0, -height]
  95 + });
  96 + var iconInfo = {
  97 + size: [width, height],
  98 + icon: icon
  99 + };
  100 + onMarkerIconReady(iconInfo);
  101 + } else {
  102 + opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
  103 + }
90 } 104 }
91 - var icon = L.icon({  
92 - iconUrl: currentImage.url,  
93 - iconSize: [width, height],  
94 - iconAnchor: [width/2, height],  
95 - popupAnchor: [0, -height]  
96 - });  
97 - var iconInfo = {  
98 - size: [width, height],  
99 - icon: icon  
100 - };  
101 - onMarkerIconReady(iconInfo);  
102 - };  
103 - testImage.onerror = function() {  
104 - opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);  
105 - };  
106 - document.body.appendChild(testImage); //eslint-disable-line  
107 - testImage.src = currentImage.url; 105 + );
108 } else { 106 } else {
109 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); 107 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
110 } 108 }