commit 851d1684c92c8aee391fb72f2efa925fb2de9f4b
parent 42bca19639bcaaa7c2fb7750558f20485475c040
Author: Sergej Orlov <wladimirych@gmail.com>
Date: Sat, 25 Feb 2017 13:15:35 +0300
[jnx] in contextmenu mark levels with red color if more then 50000 tiles expected
Diffstat:
3 files changed, 29 insertions(+), 14 deletions(-)
diff --git a/src/lib/leaflet.control.jnx/index.js b/src/lib/leaflet.control.jnx/index.js
@@ -4,7 +4,7 @@ import './style.css';
import 'lib/leaflet.control.commons';
import {RectangleSelect} from './selector';
import Contextmenu from 'lib/contextmenu';
-import {makeJnxFromLayer} from './jnx-maker';
+import {makeJnxFromLayer, minZoom} from './jnx-maker';
import {saveAs} from 'browser-filesaver';
import {notify} from 'lib/notifications';
@@ -41,11 +41,15 @@ L.Control.JNX = L.Control.extend({
},
- estimateTilesNumber: function(zoom) {
+ estimateTilesCount: function(maxZoom) {
+ let tilesCount = 0;
const bounds = this._selector.getBounds();
- const topLeftTile = this._map.project(bounds.getNorthWest(), zoom).divideBy(256).floor();
- const bottomRightTile = this._map.project(bounds.getSouthEast(), zoom).divideBy(256).ceil();
- return Math.ceil((bottomRightTile.x - topLeftTile.x) * (bottomRightTile.y - topLeftTile.y) * 4 / 3);
+ for (let zoom=minZoom(maxZoom); zoom <= maxZoom; zoom++) {
+ const topLeftTile = this._map.project(bounds.getNorthWest(), zoom).divideBy(256).floor();
+ const bottomRightTile = this._map.project(bounds.getSouthEast(), zoom).divideBy(256).ceil();
+ tilesCount += Math.ceil((bottomRightTile.x - topLeftTile.x) * (bottomRightTile.y - topLeftTile.y));
+ }
+ return tilesCount;
},
makeMenuItems: function() {
@@ -63,13 +67,16 @@ L.Control.JNX = L.Control.extend({
const items = [{text: `<b>${layerName}</b>`}];
for (let zoom = maxLevel; zoom >= minLevel; zoom -= 1) {
- let tilesCount = this.estimateTilesNumber(zoom);
+ let tilesCount = this.estimateTilesCount(zoom);
let fileSizeMb = tilesCount * 0.02;
- items.push({
- text: `Zoom ${zoom} (${metersPerPixel.toFixed(2)} m/pixel) — ${tilesCount} (~${fileSizeMb.toFixed(1)} Mb)`,
- callback: () => this.makeJnx(layer, layerName, zoom)
- }
- );
+ let itemClass = tilesCount > 50000 ? 'jnx-menu-warning' : '';
+ let resolutionString = metersPerPixel.toFixed(2);
+ let sizeString = fileSizeMb.toFixed(1);
+ let item = {
+ text: `<span class="${itemClass}">Zoom ${zoom} (${resolutionString} m/pixel) — ${tilesCount} tiles (~${sizeString} Mb)</span>`,
+ callback: () => this.makeJnx(layer, layerName, zoom)
+ };
+ items.push(item);
metersPerPixel *= 2;
}
return items;
diff --git a/src/lib/leaflet.control.jnx/jnx-maker.js b/src/lib/leaflet.control.jnx/jnx-maker.js
@@ -11,6 +11,10 @@ const defaultXHROptions = {
isResponseSuccess: (xhr) => xhr.status === 200 || xhr.status === 404
};
+function minZoom(maxZoom) {
+ return Math.max(maxZoom - 4, 0);
+}
+
function imageFromarrayBuffer(arr) {
const dataUrl = 'data:image/png;base64,' + btoa(arrayBufferToString(arr));
const image = new Image();
@@ -60,7 +64,7 @@ async function makeJnxFromLayer(srcLayer, layerName, maxZoomLevel, latLngBounds,
const xhrQueue = new XHRQueue();
let doStop = false;
let error;
- const minZoomLevel = Math.max(maxZoomLevel - 4, 0);
+ const minZoomLevel = minZoom(maxZoomLevel);
let progressWeight = 1;
for (let zoom = maxZoomLevel; zoom >= minZoomLevel; zoom--) {
let pixelBounds = L.bounds(
@@ -115,4 +119,4 @@ async function makeJnxFromLayer(srcLayer, layerName, maxZoomLevel, latLngBounds,
}
-export {makeJnxFromLayer};
-\ No newline at end of file
+export {makeJnxFromLayer, minZoom};
+\ No newline at end of file
diff --git a/src/lib/leaflet.control.jnx/style.css b/src/lib/leaflet.control.jnx/style.css
@@ -53,3 +53,6 @@
cursor: e-resize !important;
}
+.jnx-menu-warning {
+ color: red;
+}
+\ No newline at end of file