简柏林 / 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 134 defaultAlarmDataKeys.push(dataKey);
135 135 }
136 136
  137 + var imageAspectMap = {};
  138 +
137 139 var service = {
138 140 getDefaultDatasource: getDefaultDatasource,
139 141 generateObjectFromJsonSchema: generateObjectFromJsonSchema,
... ... @@ -159,7 +161,8 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
159 161 insertVariable: insertVariable,
160 162 customTranslation: customTranslation,
161 163 objToBase64: objToBase64,
162   - base64toObj: base64toObj
  164 + base64toObj: base64toObj,
  165 + loadImageAspect: loadImageAspect
163 166 }
164 167
165 168 return service;
... ... @@ -543,4 +546,34 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
543 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 19 }
20 20
21 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 24 var tbMap = this;
  25 + this.utils = utils;
25 26 this.defaultZoomLevel = defaultZoomLevel;
26 27 this.dontFitMapBounds = dontFitMapBounds;
27 28 this.minZoomLevel = minZoomLevel;
... ... @@ -172,35 +173,32 @@ export default class TbGoogleMap {
172 173 var currentImage = settings.currentImage;
173 174 var gMap = this;
174 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 202 } else {
205 203 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
206 204 }
... ...
... ... @@ -20,9 +20,10 @@ const maxZoom = 4;
20 20
21 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 25 this.ctx = ctx;
  26 + this.utils = utils;
26 27 this.tooltips = [];
27 28
28 29 this.$containerElement = $containerElement;
... ... @@ -116,18 +117,15 @@ export default class TbImageMap {
116 117 }
117 118 this.imageUrl = imageUrl;
118 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 131 onresize(updateImage) {
... ... @@ -249,37 +247,34 @@ export default class TbImageMap {
249 247 var currentImage = settings.currentImage;
250 248 var opMap = this;
251 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 278 } else {
284 279 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
285 280 }
... ...
... ... @@ -74,7 +74,7 @@ export default class TbMapWidget {
74 74 if (!$element) {
75 75 $element = ctx.$container;
76 76 }
77   -
  77 + this.utils = ctx.$scope.$injector.get('utils');
78 78 this.drawRoutes = drawRoutes;
79 79 this.markers = [];
80 80 if (this.drawRoutes) {
... ... @@ -109,9 +109,9 @@ export default class TbMapWidget {
109 109 };
110 110
111 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 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 74 });
75 75
76 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 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 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 82 settings.mapImageUrl,
83 83 settings.posFunction,
84 84 settings.imageEntityAlias,
... ...
... ... @@ -19,8 +19,9 @@ import 'leaflet-providers';
19 19
20 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 25 this.defaultZoomLevel = defaultZoomLevel;
25 26 this.dontFitMapBounds = dontFitMapBounds;
26 27 this.minZoomLevel = minZoomLevel;
... ... @@ -74,37 +75,34 @@ export default class TbOpenStreetMap {
74 75 var currentImage = settings.currentImage;
75 76 var opMap = this;
76 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 106 } else {
109 107 this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
110 108 }
... ...