262 lines
12 KiB
JavaScript
262 lines
12 KiB
JavaScript
/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
|
|
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
|
|
* text of the license. */
|
|
// @require: OpenLayers/Control.js
|
|
OpenLayers.Control.MouseToolbar = Class.create();
|
|
OpenLayers.Control.MouseToolbar.X = 6;
|
|
OpenLayers.Control.MouseToolbar.Y = 300;
|
|
OpenLayers.Control.MouseToolbar.prototype =
|
|
Object.extend( new OpenLayers.Control(), {
|
|
|
|
mode: null,
|
|
|
|
buttons: null,
|
|
|
|
direction: "vertical",
|
|
|
|
initialize: function(position, direction) {
|
|
OpenLayers.Control.prototype.initialize.apply(this, arguments);
|
|
this.position = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,
|
|
OpenLayers.Control.MouseToolbar.Y);
|
|
if (position) {
|
|
this.position = position;
|
|
}
|
|
if (direction) {
|
|
this.direction = direction;
|
|
}
|
|
this.measureDivs = [];
|
|
},
|
|
|
|
draw: function() {
|
|
OpenLayers.Control.prototype.draw.apply(this, arguments);
|
|
this.buttons = new Object();
|
|
this.map.events.register( "dblclick", this, this.defaultDblClick );
|
|
this.map.events.register( "mousedown", this, this.defaultMouseDown );
|
|
this.map.events.register( "mouseup", this, this.defaultMouseUp );
|
|
this.map.events.register( "mousemove", this, this.defaultMouseMove );
|
|
this.map.events.register( "mouseout", this, this.defaultMouseOut );
|
|
var sz = new OpenLayers.Size(28,28);
|
|
var centered = this.position;
|
|
this._addButton("zoombox", "drag-rectangle-off.png", "drag-rectangle-on.png", centered, sz, "Shift->Drag to zoom to area");
|
|
centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
|
|
this._addButton("pan", "panning-hand-off.png", "panning-hand-on.png", centered, sz, "Drag the map to pan.");
|
|
centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
|
|
this._addButton("measure", "measuring-stick-off.png", "measuring-stick-on.png", centered, sz, "Hold alt when clicking to show distance between selected points");
|
|
this.switchModeTo("pan");
|
|
this.map.events.register("zoomend", this, function() { this.switchModeTo("pan"); });
|
|
return this.div;
|
|
|
|
},
|
|
|
|
_addButton:function(id, img, activeImg, xy, sz, title) {
|
|
var imgLocation = OpenLayers.Util.getImagesLocation() + img;
|
|
var activeImgLocation = OpenLayers.Util.getImagesLocation() + activeImg;
|
|
// var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
|
|
var btn = OpenLayers.Util.createAlphaImageDiv(
|
|
"OpenLayers_Control_MouseToolbar_" + id,
|
|
xy, sz, imgLocation, "absolute");
|
|
|
|
//we want to add the outer div
|
|
this.div.appendChild(btn);
|
|
btn.imgLocation = imgLocation;
|
|
btn.activeImgLocation = activeImgLocation;
|
|
|
|
btn.events = new OpenLayers.Events(this, btn);
|
|
btn.events.register("mousedown", this, this.buttonClick);
|
|
btn.events.register("mouseup", this, Event.stop);
|
|
btn.action = id;
|
|
btn.title = title;
|
|
btn.alt = title;
|
|
btn.map = this.map;
|
|
|
|
//we want to remember/reference the outer div
|
|
this.buttons[id] = btn;
|
|
return btn;
|
|
},
|
|
|
|
buttonClick: function(evt) {
|
|
if (!Event.isLeftClick(evt)) return;
|
|
this.switchModeTo(evt.div.action);
|
|
Event.stop(evt);
|
|
},
|
|
|
|
/**
|
|
* @param {Event} evt
|
|
*/
|
|
defaultDblClick: function (evt) {
|
|
this.switchModeTo("pan");
|
|
var newCenter = this.map.getLonLatFromViewPortPx( evt.xy );
|
|
this.map.setCenter(newCenter, this.map.zoom + 2);
|
|
},
|
|
|
|
/**
|
|
* @param {Event} evt
|
|
*/
|
|
defaultMouseDown: function (evt) {
|
|
if (!Event.isLeftClick(evt)) return;
|
|
this.mouseDragStart = evt.xy.copyOf();
|
|
if (evt.shiftKey && this.mode !="zoombox") {
|
|
this.switchModeTo("zoombox");
|
|
} else if (evt.altKey && this.mode !="measure") {
|
|
this.switchModeTo("measure");
|
|
} else if (!this.mode) {
|
|
this.switchModeTo("pan");
|
|
}
|
|
|
|
switch (this.mode) {
|
|
case "zoombox":
|
|
this.map.div.style.cursor = "crosshair";
|
|
this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
|
|
this.mouseDragStart,
|
|
null,
|
|
null,
|
|
"absolute",
|
|
"2px solid red");
|
|
this.zoomBox.style.backgroundColor = "white";
|
|
this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
|
|
this.zoomBox.style.opacity = "0.50";
|
|
this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
|
|
this.map.viewPortDiv.appendChild(this.zoomBox);
|
|
break;
|
|
case "measure":
|
|
var distance = "";
|
|
if (this.measureStart) {
|
|
measureEnd = this.map.getLonLatFromViewPortPx(this.mouseDragStart);
|
|
distance = OpenLayers.Util.distVincenty(this.measureStart, measureEnd);
|
|
distance = Math.round(distance * 100) / 100;
|
|
distance = distance + "km";
|
|
this.measureStartBox = this.measureBox;
|
|
}
|
|
this.measureStart = this.map.getLonLatFromViewPortPx(this.mouseDragStart);;
|
|
this.measureBox = OpenLayers.Util.createDiv(null,
|
|
this.mouseDragStart.add(
|
|
-2-parseInt(this.map.layerContainerDiv.style.left),
|
|
-2-parseInt(this.map.layerContainerDiv.style.top)),
|
|
null,
|
|
null,
|
|
"absolute");
|
|
this.measureBox.style.width="4px";
|
|
this.measureBox.style.height="4px";
|
|
this.measureBox.style.backgroundColor="red";
|
|
this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
|
|
this.map.layerContainerDiv.appendChild(this.measureBox);
|
|
if (distance) {
|
|
this.measureBoxDistance = OpenLayers.Util.createDiv(null,
|
|
this.mouseDragStart.add(
|
|
-2-parseInt(this.map.layerContainerDiv.style.left),
|
|
2-parseInt(this.map.layerContainerDiv.style.top)),
|
|
null,
|
|
null,
|
|
"absolute");
|
|
|
|
this.measureBoxDistance.innerHTML = distance;
|
|
this.measureBoxDistance.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
|
|
this.map.layerContainerDiv.appendChild(this.measureBoxDistance);
|
|
this.measureDivs.append(this.measureBoxDistance);
|
|
}
|
|
this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
|
|
this.map.layerContainerDiv.appendChild(this.measureBox);
|
|
this.measureDivs.append(this.measureBox);
|
|
break;
|
|
default:
|
|
this.map.div.style.cursor = "move";
|
|
break;
|
|
}
|
|
document.onselectstart = function() { return false; }
|
|
Event.stop(evt);
|
|
},
|
|
|
|
switchModeTo: function(mode) {
|
|
if (mode != this.mode) {
|
|
if (this.mode) {
|
|
OpenLayers.Util.modifyAlphaImageDiv(this.buttons[this.mode], null, null, null, this.buttons[this.mode].imgLocation);
|
|
}
|
|
if (this.mode == "measure" && mode != "measure") {
|
|
for(var i = 0; i < this.measureDivs.length; i++) {
|
|
if (this.measureDivs[i]) {
|
|
this.map.layerContainerDiv.removeChild(this.measureDivs[i]);
|
|
}
|
|
}
|
|
this.measureDivs = [];
|
|
this.measureStart = null;
|
|
}
|
|
this.mode = mode;
|
|
OpenLayers.Util.modifyAlphaImageDiv(this.buttons[mode], null, null, null, this.buttons[mode].activeImgLocation);
|
|
}
|
|
},
|
|
|
|
leaveMode: function() {
|
|
this.switchModeTo("pan");
|
|
},
|
|
|
|
/**
|
|
* @param {Event} evt
|
|
*/
|
|
defaultMouseMove: function (evt) {
|
|
if (this.mouseDragStart != null) {
|
|
switch (this.mode) {
|
|
case "zoombox":
|
|
var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
|
|
var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
|
|
this.zoomBox.style.width = deltaX+"px";
|
|
this.zoomBox.style.height = deltaY+"px";
|
|
if (evt.xy.x < this.mouseDragStart.x) {
|
|
this.zoomBox.style.left = evt.xy.x+"px";
|
|
}
|
|
if (evt.xy.y < this.mouseDragStart.y) {
|
|
this.zoomBox.style.top = evt.xy.y+"px";
|
|
}
|
|
break;
|
|
default:
|
|
var deltaX = this.mouseDragStart.x - evt.xy.x;
|
|
var deltaY = this.mouseDragStart.y - evt.xy.y;
|
|
var size = this.map.getSize();
|
|
var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
|
|
size.h / 2 + deltaY);
|
|
var newCenter = this.map.getLonLatFromViewPortPx( newXY );
|
|
this.map.setCenter(newCenter, null, true);
|
|
this.mouseDragStart = evt.xy.copyOf();
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {Event} evt
|
|
*/
|
|
defaultMouseUp: function (evt) {
|
|
if (!Event.isLeftClick(evt)) return;
|
|
switch (this.mode) {
|
|
case "zoombox":
|
|
var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart );
|
|
var end = this.map.getLonLatFromViewPortPx( evt.xy );
|
|
var top = Math.max(start.lat, end.lat);
|
|
var bottom = Math.min(start.lat, end.lat);
|
|
var left = Math.min(start.lon, end.lon);
|
|
var right = Math.max(start.lon, end.lon);
|
|
var bounds = new OpenLayers.Bounds(left, bottom, right, top);
|
|
var zoom = this.map.getZoomForExtent(bounds);
|
|
this.map.setCenter(new OpenLayers.LonLat(
|
|
(start.lon + end.lon) / 2,
|
|
(start.lat + end.lat) / 2
|
|
), zoom);
|
|
this.map.viewPortDiv.removeChild(document.getElementById("zoomBox"));
|
|
this.zoomBox = null;
|
|
this.leaveMode();
|
|
break;
|
|
case "pan":
|
|
this.map.setCenter(this.map.center);
|
|
|
|
}
|
|
document.onselectstart = null;
|
|
this.mouseDragStart = null;
|
|
this.map.div.style.cursor = "default";
|
|
},
|
|
|
|
defaultMouseOut: function (evt) {
|
|
if (this.mouseDragStart != null
|
|
&& OpenLayers.Util.mouseLeft(evt, this.map.div)) {
|
|
this.defaultMouseUp(evt);
|
|
}
|
|
}
|
|
});
|
|
|