ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #174 from ahocevar/feature-events

Browse Source 
Turning @tschaub's FeatureAgent into an event extension. r=@bartvde
This commit is contained in:
ahocevar
2013-05-27 17:17:42 -07:00
committed by Bart van den Eijnden
parent 8778b746b3
commit fe0620dc7f
7 changed files with 532 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
examples/feature-events.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Feature Events Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
#result {
height: 60px;
width: 514px;
font-size: smaller;
overflow: auto;
margin-top: 5px;
}
</style>
</head>
<body>
<h1 id="title">Feature Events Example</h1>
<div id="tags">
feature, select, hover
</div>
<div id="shortdesc">Feature hover and click events</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p id="result">Hover over or click features on the map.</p>
<p>This example shows how to use the 'featureclick', 'nofeatureclick',
'featureover' and 'featureout' events to make features interactive.
Look at the <a href="feature-events.js">feature-events.js</a> source
code to see how this is done.</p>
<p>Note that these events can be registered both on the map and on
individual layers. If many layers need to be observed, it is
recommended to register listeners once on the map for performance
reasons.</p>
</div>
<script src="../lib/OpenLayers.js"></script>
<script src="feature-events.js"></script>
</body>
</html>

67
examples/feature-events.js Normal file
View File

@@ -0,0 +1,67 @@
var layerListeners = {
featureclick: function(e) {
log(e.object.name + " says: " + e.feature.id + " clicked.");
return false;
},
nofeatureclick: function(e) {
log(e.object.name + " says: No feature clicked.");
}
};
var style = new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults(
{label: "${l}", pointRadius: 10},
OpenLayers.Feature.Vector.style["default"]
),
'select': OpenLayers.Util.applyDefaults(
{pointRadius: 10},
OpenLayers.Feature.Vector.style.select
)
});
var layer1 = new OpenLayers.Layer.Vector("Layer 1", {
styleMap: style,
eventListeners: layerListeners
});
layer1.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 -1)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 1)"), {l:1})
]);
var layer2 = new OpenLayers.Layer.Vector("Layer 2", {
styleMap: style,
eventListeners: layerListeners
});
layer2.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-1 1)"), {l:2}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(1 -1)"), {l:2})
]);
var map = new OpenLayers.Map({
div: "map",
allOverlays: true,
layers: [layer1, layer2],
zoom: 6,
center: [0, 0],
eventListeners: {
featureover: function(e) {
e.feature.renderIntent = "select";
e.feature.layer.drawFeature(e.feature);
log("Map says: Pointer entered " + e.feature.id + " on " + e.feature.layer.name);
},
featureout: function(e) {
e.feature.renderIntent = "default";
e.feature.layer.drawFeature(e.feature);
log("Map says: Pointer left " + e.feature.id + " on " + e.feature.layer.name);
},
featureclick: function(e) {
log("Map says: " + e.feature.id + " clicked on " + e.feature.layer.name);
}
}
});
function log(msg) {
if (!log.timer) {
result.innerHTML = "";
log.timer = window.setTimeout(function() {delete log.timer;}, 100);
}
result.innerHTML += msg + "<br>";
}

1
lib/OpenLayers.js
View File

@@ -146,6 +146,7 @@
"OpenLayers/Kinetic.js", "OpenLayers/Kinetic.js",
"OpenLayers/Events.js", "OpenLayers/Events.js",
"OpenLayers/Events/buttonclick.js", "OpenLayers/Events/buttonclick.js",
"OpenLayers/Events/featureclick.js",
"OpenLayers/Request.js", "OpenLayers/Request.js",
"OpenLayers/Request/XMLHttpRequest.js", "OpenLayers/Request/XMLHttpRequest.js",
"OpenLayers/Projection.js", "OpenLayers/Projection.js",

321
lib/OpenLayers/Events/featureclick.js Normal file
View File

@@ -0,0 +1,321 @@
/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the 2-clause BSD license.
* See license.txt in the OpenLayers distribution or repository for the
* full text of the license. */
/**
* @requires OpenLayers/Events.js
*/
/**
* Class: OpenLayers.Events.featureclick
*
* Extension event type for handling feature click events, including overlapping
* features.
*
* Event types provided by this extension:
* - featureclick
*/
OpenLayers.Events.featureclick = OpenLayers.Class({
/**
* Property: cache
* {Object} A cache of features under the mouse.
*/
cache: null,
/**
* Property: map
* {<OpenLayers.Map>} The map to register browser events on.
*/
map: null,
/**
* Property: provides
* {Array(String)} The event types provided by this extension.
*/
provides: ["featureclick", "nofeatureclick", "featureover", "featureout"],
/**
* Constructor: OpenLayers.Events.featureclick
* Create a new featureclick event type.
*
* Parameters:
* target - {<OpenLayers.Events>} The events instance to create the events
* for.
*/
initialize: function(target) {
this.target = target;
if (target.object instanceof OpenLayers.Map) {
this.setMap(target.object);
} else if (target.object instanceof OpenLayers.Layer.Vector) {
if (target.object.map) {
this.setMap(target.object.map);
} else {
target.object.events.register("added", this, function(evt) {
this.setMap(target.object.map);
});
}
} else {
throw("Listeners for '" + this.provides.join("', '") +
"' events can only be registered for OpenLayers.Layer.Vector " +
"or OpenLayers.Map instances");
}
for (var i=this.provides.length-1; i>=0; --i) {
target.extensions[this.provides[i]] = true;
}
},
/**
* Method: setMap
*
* Parameters:
* map - {<OpenLayers.Map>} The map to register browser events on.
*/
setMap: function(map) {
this.map = map;
this.cache = {};
map.events.register("mousedown", this, this.start, {extension: true});
map.events.register("mouseup", this, this.onClick, {extension: true});
map.events.register("touchstart", this, this.start, {extension: true});
map.events.register("touchmove", this, this.cancel, {extension: true});
map.events.register("touchend", this, this.onClick, {extension: true});
map.events.register("mousemove", this, this.onMousemove, {extension: true});
},
/**
* Method: start
* Sets startEvt = evt.
*
* Parameters:
* evt - {<OpenLayers.Event>}
*/
start: function(evt) {
this.startEvt = evt;
},
/**
* Method: cancel
* Deletes the start event.
*
* Parameters:
* evt - {<OpenLayers.Event>}
*/
cancel: function(evt) {
delete this.startEvt;
},
/**
* Method: onClick
* Listener for the click event.
*
* Parameters:
* evt - {<OpenLayers.Event>}
*/
onClick: function(evt) {
if (!this.startEvt || evt.type !== "touchend" &&
!OpenLayers.Event.isLeftClick(evt)) {
return;
}
var features = this.getFeatures(this.startEvt);
delete this.startEvt;
// fire featureclick events
var feature, layer, more, clicked = {};
for (var i=0, len=features.length; i<len; ++i) {
feature = features[i];
layer = feature.layer;
clicked[layer.id] = true;
more = this.triggerEvent("featureclick", {feature: feature});
if (more === false) {
break;
}
}
// fire nofeatureclick events on all vector layers with no targets
for (i=0, len=this.map.layers.length; i<len; ++i) {
layer = this.map.layers[i];
if (layer instanceof OpenLayers.Layer.Vector && !clicked[layer.id]) {
this.triggerEvent("nofeatureclick", {layer: layer});
}
}
},
/**
* Method: onMousemove
* Listener for the mousemove event.
*
* Parameters:
* evt - {<OpenLayers.Event>}
*/
onMousemove: function(evt) {
delete this.startEvt;
var features = this.getFeatures(evt);
var over = {}, newly = [], feature;
for (var i=0, len=features.length; i<len; ++i) {
feature = features[i];
over[feature.id] = feature;
if (!this.cache[feature.id]) {
newly.push(feature);
}
}
// check if already over features
var out = [];
for (var id in this.cache) {
feature = this.cache[id];
if (feature.layer && feature.layer.map) {
if (!over[feature.id]) {
out.push(feature);
}
} else {
// removed
delete this.cache[id];
}
}
// fire featureover events
var more;
for (i=0, len=newly.length; i<len; ++i) {
feature = newly[i];
this.cache[feature.id] = feature;
more = this.triggerEvent("featureover", {feature: feature});
if (more === false) {
break;
}
}
// fire featureout events
for (i=0, len=out.length; i<len; ++i) {
feature = out[i];
delete this.cache[feature.id];
more = this.triggerEvent("featureout", {feature: feature});
if (more === false) {
break;
}
}
},
/**
* Method: triggerEvent
* Determines where to trigger the event and triggers it.
*
* Parameters:
* type - {String} The event type to trigger
* evt - {Object} The listener argument
*
* Returns:
* {Boolean} The last listener return.
*/
triggerEvent: function(type, evt) {
var layer = evt.feature ? evt.feature.layer : evt.layer,
object = this.target.object;
if (object instanceof OpenLayers.Map || object === layer) {
return this.target.triggerEvent(type, evt);
}
},
/**
* Method: getFeatures
* Get all features at the given screen location.
*
* Parameters:
* evt - {Object} Event object.
*
* Returns:
* {Array(<OpenLayers.Feature.Vector>)} List of features at the given point.
*/
getFeatures: function(evt) {
var x = evt.clientX, y = evt.clientY,
features = [], targets = [], layers = [],
layer, target, feature, i, len;
// go through all layers looking for targets
for (i=this.map.layers.length-1; i>=0; --i) {
layer = this.map.layers[i];
if (layer.div.style.display !== "none") {
if (layer.renderer instanceof OpenLayers.Renderer.Elements) {
if (layer instanceof OpenLayers.Layer.Vector) {
target = document.elementFromPoint(x, y);
while (target && target._featureId) {
feature = layer.getFeatureById(target._featureId);
if (feature) {
features.push(feature);
target.style.display = "none";
targets.push(target);
target = document.elementFromPoint(x, y);
} else {
// sketch, all bets off
target = false;
}
}
}
layers.push(layer);
layer.div.style.display = "none";
} else if (layer.renderer instanceof OpenLayers.Renderer.Canvas) {
feature = layer.renderer.getFeatureIdFromEvent(evt);
if (feature) {
features.push(feature);
layers.push(layer);
}
}
}
}
// restore feature visibility
for (i=0, len=targets.length; i<len; ++i) {
targets[i].style.display = "";
}
// restore layer visibility
for (i=layers.length-1; i>=0; --i) {
layers[i].div.style.display = "block";
}
return features;
},
/**
* APIMethod: destroy
* Clean up.
*/
destroy: function() {
for (var i=this.provides.length-1; i>=0; --i) {
delete this.target.extensions[this.provides[i]];
}
this.map.events.un({
mousemove: this.onMousemove,
mousedown: this.start,
mouseup: this.onClick,
touchstart: this.start,
touchmove: this.cancel,
touchend: this.onClick,
scope: this
});
delete this.cache;
delete this.map;
delete this.target;
}
});
/**
* Class: OpenLayers.Events.nofeatureclick
*
* Extension event type for handling click events that do not hit a feature.
*
* Event types provided by this extension:
* - nofeatureclick
*/
OpenLayers.Events.nofeatureclick = OpenLayers.Events.featureclick;
/**
* Class: OpenLayers.Events.featureover
*
* Extension event type for handling hovering over a feature.
*
* Event types provided by this extension:
* - featureover
*/
OpenLayers.Events.featureover = OpenLayers.Events.featureclick;
/**
* Class: OpenLayers.Events.featureout
*
* Extension event type for handling leaving a feature.
*
* Event types provided by this extension:
* - featureout
*/
OpenLayers.Events.featureout = OpenLayers.Events.featureclick;

5
notes/2.13.md
View File

@@ -35,6 +35,11 @@ Corresponding issues/pull requests:
* http://github.com/openlayers/openlayers/pull/700 * http://github.com/openlayers/openlayers/pull/700
## New Map and Vector Layer Events for Feature Interaction
The featureclick events extension (`lib/Events/featureclick.js`) provides four new events ("featureclick", "nofeatureclick", "featureover", "featureout") that can be used as an alternative to the Feature handler or the
SelectFeature control. It works with multiple layers out of the box and can detect hits on multiple features (except when using the Canvas renderer). See `examples/feature-events.html` for an implementation example.
# Behavior Changes from Past Releases # Behavior Changes from Past Releases
## Control.DragPan: Kinetic by default ## Control.DragPan: Kinetic by default

91
tests/Events/featureclick.html Normal file
View File

@@ -0,0 +1,91 @@
<html>
<head>
<script src="../OLLoader.js"></script>
<script type="text/javascript">
var layer1, style, logevt, lognoevt, map, lonlat, pixel, element;
function init() {
element = document.getElementById("map");
style = new OpenLayers.StyleMap({
'default': OpenLayers.Util.applyDefaults(
{label: "${l}", pointRadius: 30},
OpenLayers.Feature.Vector.style["default"]
),
'select': OpenLayers.Util.applyDefaults(
{pointRadius: 30},
OpenLayers.Feature.Vector.style.select
)
});
layer1 = new OpenLayers.Layer.Vector("Layer 1", {
styleMap: style
});
layer1.addFeatures([
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(0 0)"), {l:1})
]);
map = new OpenLayers.Map({
div: "map",
allOverlays: true,
layers: [layer1],
zoom: 6,
center: [0, 0],
eventListeners: {
featureclick: logEvent,
nofeatureclick: logNoEvent
}
});
}
function logNoEvent(e) {
lognoevt.push(e);
}
function logEvent(e) {
logevt.push(e);
}
function trigger(type, pxl) {
var map_position = OpenLayers.Util.pagePosition(element);
map.events.triggerEvent(type, {
xy: pxl,
clientX: pxl.x + map_position[0],
clientY: pxl.y + map_position[1],
which: 1 // which == 1 means left-click
});
}
// TESTS
function test_onClick(t) {
t.plan(2);
logevt = [];
lognoevt = [];
lonlat = new OpenLayers.LonLat(0,0);
pixel = map.getPixelFromLonLat(lonlat);
trigger('mousedown', pixel);
trigger('mouseup', pixel);
t.eq(logevt.length, 4, "4 features hit");
trigger('mousedown', {x: 40, y: 40});
trigger('mouseup', {x: 40, y: 40});
t.eq(lognoevt.length, 1, "nofeatureclick fired for click outside features.");
}
// END TESTS
</script>
</head>
<body onload="init()">
<div id="map" style="width: 300px; height: 150px; border: 1px solid black"></div>
</body>
</html>

1
tests/list-tests.html
View File

@@ -52,6 +52,7 @@
<li>Control/ZoomBox.html</li> <li>Control/ZoomBox.html</li>
<li>Events.html</li> <li>Events.html</li>
<li>Events/buttonclick.html</li> <li>Events/buttonclick.html</li>
<li>Events/featureclick.html?visible</li>
<li>Extras.html</li> <li>Extras.html</li>
<li>Feature.html</li> <li>Feature.html</li>
<li>Feature/Vector.html</li> <li>Feature/Vector.html</li>