@h21-map/leaflet-zoom-box
Version:
A library of Leaflet Map JS API
206 lines (174 loc) • 8.2 kB
JavaScript
var ZoomBox = function (map) {
try {
L;
} catch (e) {
throw Error('Leaflet Map JS API is not ready yet!');
}
let me = this;
me.map = map
this.opts = {
zoomType: 0,
strokeWeight: 1,
};
this._isOpen = true;
this._fDiv = null;
this._div = null;
me.extend(ZoomBox, L.LayerGroup.extend({
initialize: function () {
},
onAdd: function (map) {
var me = this;
me._map = map;
me.mousem = null;
me.mouseup = null;
this._isOpen = true;
let beginDrawRect = function (e) {
e = window.event || e;
if (e.button != 2) { return; }
if (!me._isOpen) { return; }
me._bind.isZooming = true;
this._isBeginDrawBinded = true;
me._bind.mx = e.layerX || e.offsetX || 0;
me._bind.my = e.layerY || e.offsetY || 0;
me._bind.ix = e.pageX || e.clientX || 0;
me._bind.iy = e.pageY || e.clientY || 0;
if (!me._fDiv) {
me._fDiv = document.createElement("div");
me._fDiv.style.opacity = 0.61;
me._fDiv.style.backgroundColor = "#e4e9f4";
me._fDiv.style.cursor = "crosshair";
me._fDiv.style.zIndex = 999999;
me._fDiv.style.position = 'absolute';
me._fDiv.style.width = 0;
me._fDiv.style.height = 0;
me._fDiv.style.border = " 2px solid #0051FF";
me._map.getContainer().appendChild(me._fDiv);
me._fDiv.style.width = "0";
me._fDiv.style.height = "0";
me._fDiv.style.left = me._bind.mx + "px";
me._fDiv.style.top = me._bind.my + "px";
me._map.on('mousemove', drawingRect, this)
me._map.on('mouseup', endDrawRect, this);
}
};
let drawingRect = function (e) {
if (me._isOpen == true && me._bind.isZooming == true) {
var e = window.event || e;
var curX = e.pageX || e.clientX || 0;
var curY = e.pageY || e.clientY || 0;
var dx = me._bind.dx = curX - me._bind.ix;
var dy = me._bind.dy = curY - me._bind.iy;
var tw = Math.abs(dx) - me.opts.strokeWeight;
var th = Math.abs(dy) - me.opts.strokeWeight;
me._fDiv.style.width = (tw < 0 ? 0 : tw) + "px";
me._fDiv.style.height = (th < 0 ? 0 : th) + "px";
var mapSize = [me._map.getContainer().clientWidth, me._map.getContainer().clientHeight];
if (dx >= 0) {
me._fDiv.style.right = "auto";
me._fDiv.style.left = me._bind.mx + "px";
if (me._bind.mx + dx >= mapSize[0] - 2 * me.opts.strokeWeight) {
me._fDiv.style.width = mapSize[0] - me._bind.mx - 2 * me.opts.strokeWeight + "px";
}
} else {
me._fDiv.style.left = "auto";
me._fDiv.style.right = mapSize[0] - me._bind.mx + "px";
if (me._bind.mx + dx <= 2 * me.opts.strokeWeight) {
me._fDiv.style.width = me._bind.mx - 2 * me.opts.strokeWeight + "px";
}
}
if (dy >= 0) {
me._fDiv.style.bottom = "auto";
me._fDiv.style.top = me._bind.my + "px";
if (me._bind.my + dy >= mapSize[1] - 2 * me.opts.strokeWeight) {
me._fDiv.style.height = mapSize[1] - me._bind.my - 2 * me.opts.strokeWeight + "px";
}
} else {
me._fDiv.style.top = "auto";
me._fDiv.style.bottom = mapSize[1] - me._bind.my + "px";
if (me._bind.my + dy <= 2 * me.opts.strokeWeight) {
me._fDiv.style.height = me._bind.my - 2 * me.opts.strokeWeight + "px";
}
}
}
};
let endDrawRect = function (e) {
if (me._isOpen == true) {
me._map.off('mousemove', me.drawingRect, this);
me._map.off('mouseup', me.endDrawRect, this);
var centerX = parseInt(me._fDiv.style.left) + parseInt(me._fDiv.style.width) / 2;
var centerY = parseInt(me._fDiv.style.top) + parseInt(me._fDiv.style.height) / 2;
var mapSize = [me._map.getContainer().clientWidth, me._map.getContainer().clientHeight];
if (isNaN(centerX)) {
centerX = mapSize[0] - parseInt(me._fDiv.style.right) - parseInt(me._fDiv.style.width) / 2;
}
if (isNaN(centerY)) {
centerY = mapSize[1] - parseInt(me._fDiv.style.bottom) - parseInt(me._fDiv.style.height) / 2;
}
var ratio = Math.min(mapSize[0] / Math.abs(me._bind.dx), mapSize[1] / Math.abs(me._bind.dy));
ratio = Math.floor(ratio);
delete me._bind.dx;
delete me._bind.dy;
delete me._bind.ix;
delete me._bind.iy;
if (!isNaN(ratio)) {
targetZoomLv = Math.round(me._map.getZoom() + (Math.log(ratio) / Math.log(2)));
if (targetZoomLv < me._map.getZoom()) {
targetZoomLv = me._map.getZoom();
}
} else {
targetZoomLv = me._map.getZoom() + (me.opts.zoomType == 0 ? 1 : -1);
}
if (ratio < 450) {
var targetCenterPt = me._map.layerPointToLatLng(new L.point(centerX, centerY), me._map.getZoom());
me._map.setView(targetCenterPt, targetZoomLv);
}
me._map.getContainer().style.cursor = 'default';
me._map.dragging.enable()
me._bind.isZooming = false;
me._fDiv.parentNode.removeChild(me._fDiv);
me._fDiv = null;
}
};
if (!this._isBeginDrawBinded) {
me._map.on('mousedown', (e) => {
e = window.event || e;
if (e.button != 2) { return; }
this._isBeginDrawBinded = true;
document.oncontextmenu = function () { return false };
me._map.off('mousemove', me.drawingRect, this);
me._map.dragging.disable();
me._map.getContainer().style.cursor = 'crosshair';
beginDrawRect(e);
});
}
},
addTo: function (map) {
map.addLayer(this);
return this;
},
}));
}
ZoomBox.prototype._bind = function () {
var me = this;
if (!me._isOpen) {
return;
}
};
ZoomBox.prototype.destroy = function () {
me = this;
me._bind.isZooming = false;
me._fDiv.parentNode.removeChild(me._fDiv);
me._fDiv = null;
};
ZoomBox.prototype.extend = function (obj1, obj2) {
return (function (object) {
var property;
for (property in object.prototype) {
this.prototype[property] = object.prototype[property];
}
return this;
}).apply(obj1, [obj2]);
};
if (typeof module == 'object') {
module.exports = { default: ZoomBox, ZoomBox: ZoomBox };
}