Adding a snapping agent for snapping geometry components to existing components while editing. r=ahocevar (closes #954)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@8951 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
10
examples/data/line.json
Normal file
10
examples/data/line.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_458", "properties":{}, "geometry":{"type":"LineString", "coordinates":[[-121.640625, 24.2578125], [-78.046875, 27.7734375], [-45.703125, 24.9609375], [-13.359375, 16.5234375], [12.65625, 6.6796875], [39.375, 1.0546875], [76.640625, 1.0546875], [108.28125, 1.7578125], [156.09375, 15.8203125]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1111", "properties":{}, "geometry":{"type":"LineString", "coordinates":[[-122.34375, -35.5078125], [-48.515625, -33.3984375], [-5.625, -37.6171875], [20.390625, -32.6953125], [69.609375, -34.1015625], [121.640625, -38.3203125], [150.46875, -33.3984375]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_634", "properties":{}, "geometry":{"type":"LineString", "coordinates":[[-54.84375, 69.9609375], [-56.953125, 31.9921875], [-56.953125, 5.2734375], [-65.390625, -34.8046875], [-66.09375, -61.5234375]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_820", "properties":{}, "geometry":{"type":"LineString", "coordinates":[[39.375, 58.0078125], [42.890625, 25.6640625], [42.1875, -1.0546875], [37.96875, -50.2734375], [37.265625, -64.3359375]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1280", "properties":{}, "geometry":{"type":"LineString", "coordinates":[[101.25, 42.5390625], [106.875, 13.7109375], [106.171875, -17.9296875], [104.765625, -49.5703125], [102.65625, -67.1484375]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}}
|
||||||
|
]
|
||||||
|
}
|
||||||
8
examples/data/point.json
Normal file
8
examples/data/point.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1721", "properties":{}, "geometry":{"type":"Point", "coordinates":[-89.296875, -14.4140625]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1715", "properties":{}, "geometry":{"type":"Point", "coordinates":[-25.3125, -54.4921875]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1709", "properties":{}, "geometry":{"type":"Point", "coordinates":[73.828125, -23.5546875]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}}
|
||||||
|
]
|
||||||
|
}
|
||||||
9
examples/data/poly.json
Normal file
9
examples/data/poly.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"type": "FeatureCollection",
|
||||||
|
"features": [
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1489", "properties":{}, "geometry":{"type":"Polygon", "coordinates":[[[-109.6875, 63.6328125], [-112.5, 35.5078125], [-85.078125, 34.8046875], [-68.90625, 39.7265625], [-68.203125, 67.1484375], [-109.6875, 63.6328125]]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}},
|
||||||
|
{"type":"Feature", "id":"OpenLayers.Feature.Vector_1668", "properties":{}, "geometry":{"type":"Polygon", "coordinates":[[[-40.78125, 65.0390625], [-40.078125, 34.8046875], [-12.65625, 25.6640625], [21.09375, 17.2265625], [22.5, 58.0078125], [-40.78125, 65.0390625]]]}, "crs":{"type":"OGC", "properties":{"urn":"urn:ogc:def:crs:OGC:1.3:CRS84"}}}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
226
examples/snapping.html
Normal file
226
examples/snapping.html
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>Snapping</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">
|
||||||
|
.olControlEditingToolbar .olControlModifyFeatureItemInactive {
|
||||||
|
background-position: -1px 0px ;
|
||||||
|
}
|
||||||
|
.olControlEditingToolbar .olControlModifyFeatureItemActive {
|
||||||
|
background-position: -1px -23px ;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
padding: 1em 0 1em;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
tr.head td {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="../lib/Firebug/firebug.js"></script>
|
||||||
|
<script src="../lib/OpenLayers.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
initMap();
|
||||||
|
initUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
var map, draw, modify, snap, point, line, poly;
|
||||||
|
function initMap() {
|
||||||
|
|
||||||
|
map = new OpenLayers.Map('map');
|
||||||
|
|
||||||
|
// create three vector layers
|
||||||
|
poly = new OpenLayers.Layer.Vector("polygons", {
|
||||||
|
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||||
|
protocol: new OpenLayers.Protocol.HTTP({
|
||||||
|
url: "data/poly.json",
|
||||||
|
format: new OpenLayers.Format.GeoJSON()
|
||||||
|
}),
|
||||||
|
isBaseLayer: true
|
||||||
|
});
|
||||||
|
line = new OpenLayers.Layer.Vector("lines", {
|
||||||
|
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||||
|
protocol: new OpenLayers.Protocol.HTTP({
|
||||||
|
url: "data/line.json",
|
||||||
|
format: new OpenLayers.Format.GeoJSON()
|
||||||
|
})
|
||||||
|
});
|
||||||
|
point = new OpenLayers.Layer.Vector("points", {
|
||||||
|
strategies: [new OpenLayers.Strategy.Fixed()],
|
||||||
|
protocol: new OpenLayers.Protocol.HTTP({
|
||||||
|
url: "data/point.json",
|
||||||
|
format: new OpenLayers.Format.GeoJSON()
|
||||||
|
})
|
||||||
|
});
|
||||||
|
map.addLayers([poly, line, point]);
|
||||||
|
|
||||||
|
// configure the snapping agent
|
||||||
|
snap = new OpenLayers.Control.Snapping({
|
||||||
|
layer: poly,
|
||||||
|
targets: [point, line, poly],
|
||||||
|
greedy: false
|
||||||
|
});
|
||||||
|
snap.activate();
|
||||||
|
|
||||||
|
// add some editing tools to a panel
|
||||||
|
var panel = new OpenLayers.Control.Panel({
|
||||||
|
displayClass: "olControlEditingToolbar"
|
||||||
|
});
|
||||||
|
draw = new OpenLayers.Control.DrawFeature(
|
||||||
|
poly, OpenLayers.Handler.Polygon,
|
||||||
|
{displayClass: "olControlDrawFeaturePoint"}
|
||||||
|
);
|
||||||
|
modify = new OpenLayers.Control.ModifyFeature(
|
||||||
|
poly, {displayClass: "olControlModifyFeature"}
|
||||||
|
);
|
||||||
|
panel.addControls([
|
||||||
|
new OpenLayers.Control.Navigation(),
|
||||||
|
draw, modify
|
||||||
|
]);
|
||||||
|
map.addControl(panel);
|
||||||
|
|
||||||
|
// give the map a location
|
||||||
|
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add behavior to page elements. This basically lets us set snapping
|
||||||
|
* target properties with the checkboxes and text inputs. The checkboxes
|
||||||
|
* toggle the target node, vertex, or edge (boolean) values. The
|
||||||
|
* text inputs set the nodeTolerance, vertexTolerance, or edgeTolerance
|
||||||
|
* property values.
|
||||||
|
*/
|
||||||
|
function initUI() {
|
||||||
|
var check = $("snapping");
|
||||||
|
check.checked = true;
|
||||||
|
check.onclick = function() {
|
||||||
|
if(check.checked) {
|
||||||
|
snap.activate();
|
||||||
|
} else {
|
||||||
|
snap.deactivate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var sel = $("editable");
|
||||||
|
sel.value = "poly";
|
||||||
|
sel.onchange = function() {
|
||||||
|
updateEditable(sel.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
var target, type, tog, tol;
|
||||||
|
var types = ["node", "vertex", "edge"];
|
||||||
|
for(var i=0; i<snap.targets.length; ++i) {
|
||||||
|
target = snap.targets[i];
|
||||||
|
for(var j=0; j<types.length; ++j) {
|
||||||
|
type = types[j];
|
||||||
|
tog = $(i + "_" + type);
|
||||||
|
tog.checked = target[type];
|
||||||
|
tog.onclick = (function(tog, type, target) {
|
||||||
|
return function() {target[type] = tog.checked;}
|
||||||
|
})(tog, type, target);
|
||||||
|
tol = $(i + "_" + type + "Tolerance");
|
||||||
|
tol.value = target[type + "Tolerance"];
|
||||||
|
tol.onchange = (function(tol, type, target) {
|
||||||
|
return function() {
|
||||||
|
target[type + "Tolerance"] = Number(tol.value) || 0;
|
||||||
|
}
|
||||||
|
})(tol, type, target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// this function allows the editable layer to be changed
|
||||||
|
// for the snapping control, this amounts to calling setLayer
|
||||||
|
function updateEditable(name) {
|
||||||
|
|
||||||
|
layer = window[name];
|
||||||
|
|
||||||
|
// update the editable layer for the snapping control (nice)
|
||||||
|
snap.setLayer(layer);
|
||||||
|
|
||||||
|
// update the editable layer for the modify control (ugly)
|
||||||
|
var modActive = modify.active;
|
||||||
|
if(modActive) {
|
||||||
|
modify.deactivate();
|
||||||
|
}
|
||||||
|
modify.layer = layer;
|
||||||
|
modify.selectControl.layer = layer;
|
||||||
|
modify.selectControl.handlers.feature.layer = layer;
|
||||||
|
modify.dragControl.layer = layer;
|
||||||
|
modify.dragControl.handlers.drag.layer = layer;
|
||||||
|
modify.dragControl.handlers.feature.layer = layer;
|
||||||
|
if(modActive) {
|
||||||
|
modify.activate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// update the editable layer for the draw control (very ugly)
|
||||||
|
var drawActive = draw.active;
|
||||||
|
if(drawActive) {
|
||||||
|
draw.deactivate();
|
||||||
|
}
|
||||||
|
draw.layer = layer;
|
||||||
|
var handler = ({
|
||||||
|
point: OpenLayers.Handler.Point,
|
||||||
|
line: OpenLayers.Handler.Path,
|
||||||
|
poly: OpenLayers.Handler.Polygon
|
||||||
|
})[name];
|
||||||
|
draw.handler = new handler(draw, draw.callbacks, draw.handlerOptions);
|
||||||
|
if(drawActive) {
|
||||||
|
draw.activate();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="init()">
|
||||||
|
<h1 id="title">Snapping Example</h1>
|
||||||
|
<div id="shortdesc">A demonstration snapping while editing vector features.</div>
|
||||||
|
<div id="map" class="smallmap"></div>
|
||||||
|
<br/>
|
||||||
|
<label for="editable">Editable Layer:</label>
|
||||||
|
<select id="editable" name="editable">
|
||||||
|
<option value="poly">polygons</option>
|
||||||
|
<option value="line">lines</option>
|
||||||
|
<option value="point">points</option>
|
||||||
|
</select>
|
||||||
|
<label for="snapping">Enable Snapping</label>
|
||||||
|
<input type="checkbox" name="snapping" id="snapping" checked="checked" />
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="head">
|
||||||
|
<td>targets</td><td>node</td><td>vertex</td><td>edge</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>points</td>
|
||||||
|
<td><input type="checkbox" id="0_node" /><input id="0_nodeTolerance" type="text" size="3" /></td>
|
||||||
|
<td><input type="checkbox" id="0_vertex" /><input id="0_vertexTolerance" type="text" size="3" /></td>
|
||||||
|
<td><input type="checkbox" id="0_edge" /><input id="0_edgeTolerance" type="text" size="3" /></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lines</td>
|
||||||
|
<td><input type="checkbox" id="1_node" /><input id="1_nodeTolerance" type="text" size="3" /></td>
|
||||||
|
<td><input type="checkbox" id="1_vertex" /><input id="1_vertexTolerance" type="text" size="3" /></td>
|
||||||
|
<td><input type="checkbox" id="1_edge" /><input id="1_edgeTolerance" type="text" size="3" /></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>polygons</td>
|
||||||
|
<td><input type="checkbox" id="2_node" /><input id="2_nodeTolerance" type="text" size="3" /></td>
|
||||||
|
<td><input type="checkbox" id="2_vertex" /><input id="2_vertexTolerance" type="text" size="3" /></td>
|
||||||
|
<td><input type="checkbox" id="2_edge" /><input id="2_edgeTolerance" type="text" size="3" /></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>Though all snapping types are shown here for all target layers, not all are sensible.
|
||||||
|
Points don't have edges, for example.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -159,6 +159,7 @@
|
|||||||
"OpenLayers/Control/Permalink.js",
|
"OpenLayers/Control/Permalink.js",
|
||||||
"OpenLayers/Control/Scale.js",
|
"OpenLayers/Control/Scale.js",
|
||||||
"OpenLayers/Control/ScaleLine.js",
|
"OpenLayers/Control/ScaleLine.js",
|
||||||
|
"OpenLayers/Control/Snapping.js",
|
||||||
"OpenLayers/Control/LayerSwitcher.js",
|
"OpenLayers/Control/LayerSwitcher.js",
|
||||||
"OpenLayers/Control/DrawFeature.js",
|
"OpenLayers/Control/DrawFeature.js",
|
||||||
"OpenLayers/Control/DragFeature.js",
|
"OpenLayers/Control/DragFeature.js",
|
||||||
|
|||||||
544
lib/OpenLayers/Control/Snapping.js
Normal file
544
lib/OpenLayers/Control/Snapping.js
Normal file
@@ -0,0 +1,544 @@
|
|||||||
|
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
|
||||||
|
* license. See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
||||||
|
* full text of the license. */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @requires OpenLayers/Control.js
|
||||||
|
* @requires OpenLayers/Layer/Vector.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class: OpenLayers.Control.Snapping
|
||||||
|
* Acts as a snapping agent while editing vector features.
|
||||||
|
*
|
||||||
|
* Inherits from:
|
||||||
|
* - <OpenLayers.Control>
|
||||||
|
*/
|
||||||
|
OpenLayers.Control.Snapping = OpenLayers.Class(OpenLayers.Control, {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constant: EVENT_TYPES
|
||||||
|
* {Array(String)} Supported application event types. Register a listener
|
||||||
|
* for a particular event with the following syntax:
|
||||||
|
* (code)
|
||||||
|
* control.events.register(type, obj, listener);
|
||||||
|
* (end)
|
||||||
|
*
|
||||||
|
* Listeners will be called with a reference to an event object. The
|
||||||
|
* properties of this event depends on exactly what happened.
|
||||||
|
*
|
||||||
|
* Supported control event types (in addition to those from <OpenLayers.Control>):
|
||||||
|
* beforesnap - Triggered before a snap occurs. Listeners receive an
|
||||||
|
* event object with *point*, *x*, *y*, *distance*, *layer*, and
|
||||||
|
* *snapType* properties. The point property will be original point
|
||||||
|
* geometry considered for snapping. The x and y properties represent
|
||||||
|
* coordinates the point will receive. The distance is the distance
|
||||||
|
* of the snap. The layer is the target layer. The snapType property
|
||||||
|
* will be one of "node", "vertex", or "edge". Return false to stop
|
||||||
|
* snapping from occurring.
|
||||||
|
* snap - Triggered when a snap occurs. Listeners receive an event with
|
||||||
|
* *point*, *snapType*, *layer*, and *distance* properties. The point
|
||||||
|
* will be the location snapped to. The snapType will be one of "node",
|
||||||
|
* "vertex", or "edge". The layer will be the target layer. The
|
||||||
|
* distance will be the distance of the snap in map units.
|
||||||
|
* unsnap - Triggered when a vertex is unsnapped. Listeners receive an
|
||||||
|
* event with a *point* property.
|
||||||
|
*/
|
||||||
|
EVENT_TYPES: ["beforesnap", "snap", "unsnap"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* CONSTANT: DEFAULTS
|
||||||
|
* Default target properties.
|
||||||
|
*/
|
||||||
|
DEFAULTS: {
|
||||||
|
tolerance: 10,
|
||||||
|
node: true,
|
||||||
|
edge: true,
|
||||||
|
vertex: true
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: greedy
|
||||||
|
* {Boolean} Snap to closest feature in first layer with an eligible
|
||||||
|
* feature. Default is true.
|
||||||
|
*/
|
||||||
|
greedy: true,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: precedence
|
||||||
|
* {Array} List representing precedence of different snapping types.
|
||||||
|
* Default is "node", "vertex", "edge".
|
||||||
|
*/
|
||||||
|
precedence: ["node", "vertex", "edge"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: resolution
|
||||||
|
* {Float} The map resolution for the previously considered snap.
|
||||||
|
*/
|
||||||
|
resolution: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: geoToleranceCache
|
||||||
|
* {Object} A cache of geo-tolerances. Tolerance values (in map units) are
|
||||||
|
* calculated when the map resolution changes.
|
||||||
|
*/
|
||||||
|
geoToleranceCache: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: layer
|
||||||
|
* {<OpenLayers.Layer.Vector>} The current editable layer. Set at
|
||||||
|
* construction or after construction with <setLayer>.
|
||||||
|
*/
|
||||||
|
layer: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: feature
|
||||||
|
* {<OpenLayers.Feature.Vector>} The current editable feature.
|
||||||
|
*/
|
||||||
|
feature: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Property: point
|
||||||
|
* {<OpenLayers.Geometry.Point>} The currently snapped vertex.
|
||||||
|
*/
|
||||||
|
point: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor: OpenLayers.Control.Snapping
|
||||||
|
* Creates a new snapping control. A control is constructed with an editable
|
||||||
|
* layer and a set of configuration objects for target layers. While the
|
||||||
|
* control is active, dragging vertices while drawing new features or
|
||||||
|
* modifying existing features on the editable layer will engage
|
||||||
|
* snapping to features on the target layers. Whether a vertex snaps to
|
||||||
|
* a feature on a target layer depends on the target layer configuration.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* options - {Object} An object containing all configuration properties for
|
||||||
|
* the control.
|
||||||
|
*
|
||||||
|
* Valid options:
|
||||||
|
* layer - {OpenLayers.Layer.Vector} The editable layer. Features from this
|
||||||
|
* layer that are digitized or modified may have vertices snapped to
|
||||||
|
* features from any of the target layers.
|
||||||
|
* targets - {Array(Object | OpenLayers.Layer.Vector)} A list of objects for
|
||||||
|
* configuring target layers. See valid properties of the target
|
||||||
|
* objects below. If the items in the targets list are vector layers
|
||||||
|
* (instead of configuration objects), the defaults from the <defaults>
|
||||||
|
* property will apply. The editable layer itself may be a target
|
||||||
|
* layer - allowing newly created or edited features to be snapped to
|
||||||
|
* existing features from the same layer. If no targets are provided
|
||||||
|
* the layer given in the constructor (as <layer>) will become the
|
||||||
|
* initial target.
|
||||||
|
* defaults - {Object} An object with default properties to be applied
|
||||||
|
* to all target objects.
|
||||||
|
* greedy - {Boolean} Snap to closest feature in first target layer that
|
||||||
|
* applies. Default is true. If false, all features in all target
|
||||||
|
* layers will be checked and the closest feature in all target layers
|
||||||
|
* will be chosen. The greedy property determines if the order of the
|
||||||
|
* target layers is significant. By default, the order of the target
|
||||||
|
* layers is significant - where layers earlier in the target layer list
|
||||||
|
* have precedence over layers later in the list. Within a single
|
||||||
|
* layer, the closest feature is always chosen for snapping. This
|
||||||
|
* property only determines whether the search for a closer feature
|
||||||
|
* continues after an eligible feature is found in a target layer.
|
||||||
|
*
|
||||||
|
* Valid target properties:
|
||||||
|
* layer - {OpenLayers.Layer.Vector} A target layer. Features from this
|
||||||
|
* layer will be eligible to act as snapping target for the editable
|
||||||
|
* layer.
|
||||||
|
* tolerance - {Float} The distance (in pixels) at which snapping may occur.
|
||||||
|
* Default is 10.
|
||||||
|
* node - {Boolean} Snap to nodes (first or last point in a geometry) in
|
||||||
|
* target layer. Default is true.
|
||||||
|
* nodeTolerance - {Float} Optional distance at which snapping may occur
|
||||||
|
* for nodes specifically. If none is provided, <tolerance> will be
|
||||||
|
* used.
|
||||||
|
* vertex - {Boolean} Snap to vertices in target layer. Default is true.
|
||||||
|
* vertexTolerance - {Float} Optional distance at which snapping may occur
|
||||||
|
* for vertices specifically. If none is provided, <tolerance> will be
|
||||||
|
* used.
|
||||||
|
* edge - {Boolean} Snap to edges in target layer. Default is true.
|
||||||
|
* edgeTolerance - {Float} Optional distance at which snapping may occur
|
||||||
|
* for edges specifically. If none is provided, <tolerance> will be
|
||||||
|
* used.
|
||||||
|
* filter - {OpenLayers.Filter} Optional filter to evaluate to determine if
|
||||||
|
* feature is eligible for snapping. If filter evaluates to true for a
|
||||||
|
* target feature a vertex may be snapped to the feature.
|
||||||
|
*/
|
||||||
|
initialize: function(options) {
|
||||||
|
// concatenate events specific to measure with those from the base
|
||||||
|
Array.prototype.push.apply(
|
||||||
|
this.EVENT_TYPES, OpenLayers.Control.prototype.EVENT_TYPES
|
||||||
|
);
|
||||||
|
OpenLayers.Control.prototype.initialize.apply(this, [options]);
|
||||||
|
this.options = options || {}; // TODO: this could be done by the super
|
||||||
|
|
||||||
|
// set the editable layer if provided
|
||||||
|
if(this.options.layer) {
|
||||||
|
this.setLayer(this.options.layer);
|
||||||
|
}
|
||||||
|
// configure target layers
|
||||||
|
var defaults = OpenLayers.Util.extend({}, this.options.defaults);
|
||||||
|
this.defaults = OpenLayers.Util.applyDefaults(defaults, this.DEFAULTS);
|
||||||
|
this.setTargets(this.options.targets);
|
||||||
|
if(this.targets.length === 0 && this.layer) {
|
||||||
|
this.addTargetLayer(this.layer);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.geoToleranceCache = {};
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* APIMethod: setLayer
|
||||||
|
* Set the editable layer. Call the setLayer method if the editable layer
|
||||||
|
* changes and the same control should be used on a new editable layer.
|
||||||
|
* If the control is already active, it will be active after the new
|
||||||
|
* layer is set.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* layer - {OpenLayers.Layer.Vector} The new editable layer.
|
||||||
|
*/
|
||||||
|
setLayer: function(layer) {
|
||||||
|
if(this.active) {
|
||||||
|
this.deactivate();
|
||||||
|
this.layer = layer;
|
||||||
|
this.activate();
|
||||||
|
} else {
|
||||||
|
this.layer = layer;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: setTargets
|
||||||
|
* Set the targets for the snapping agent.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* targets - {Array} An array of target configs or target layers.
|
||||||
|
*/
|
||||||
|
setTargets: function(targets) {
|
||||||
|
this.targets = [];
|
||||||
|
if(targets && targets.length) {
|
||||||
|
var target;
|
||||||
|
for(var i=0, len=targets.length; i<len; ++i) {
|
||||||
|
target = targets[i];
|
||||||
|
if(target instanceof OpenLayers.Layer.Vector) {
|
||||||
|
this.addTargetLayer(target);
|
||||||
|
} else {
|
||||||
|
this.addTarget(target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: addTargetLayer
|
||||||
|
* Add a target layer with the default target config.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* layer - {<OpenLayers.Layer.Vector>} A target layer.
|
||||||
|
*/
|
||||||
|
addTargetLayer: function(layer) {
|
||||||
|
this.addTarget({layer: layer});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: addTarget
|
||||||
|
* Add a configured target layer.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* target - {Object} A target config.
|
||||||
|
*/
|
||||||
|
addTarget: function(target) {
|
||||||
|
target = OpenLayers.Util.applyDefaults(target, this.defaults);
|
||||||
|
target.nodeTolerance = target.nodeTolerance || target.tolerance;
|
||||||
|
target.vertexTolerance = target.vertexTolerance || target.tolerance;
|
||||||
|
target.edgeTolerance = target.edgeTolerance || target.tolerance;
|
||||||
|
this.targets.push(target);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: removeTargetLayer
|
||||||
|
* Remove a target layer.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* layer - {<OpenLayers.Layer.Vector>} The target layer to remove.
|
||||||
|
*/
|
||||||
|
removeTargetLayer: function(layer) {
|
||||||
|
var target;
|
||||||
|
for(var i=this.targets.length-1; i>=0; --i) {
|
||||||
|
target = this.targets[i];
|
||||||
|
if(target.layer === layer) {
|
||||||
|
this.removeTarget(target);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: removeTarget
|
||||||
|
* Remove a target.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* target - {Object} A target config.
|
||||||
|
*
|
||||||
|
* Returns:
|
||||||
|
* {Array} The targets array.
|
||||||
|
*/
|
||||||
|
removeTarget: function(target) {
|
||||||
|
return OpenLayers.Util.removeItem(this.targets, target);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* APIMethod: activate
|
||||||
|
* Activate the control. Activating the control registers listeners for
|
||||||
|
* editing related events so that during feature creation and
|
||||||
|
* modification, moving vertices will trigger snapping.
|
||||||
|
*/
|
||||||
|
activate: function() {
|
||||||
|
var activated = OpenLayers.Control.prototype.activate.call(this);
|
||||||
|
if(activated) {
|
||||||
|
if(this.layer && this.layer.events) {
|
||||||
|
this.layer.events.on({
|
||||||
|
sketchmodified: this.onSketchModified,
|
||||||
|
vertexmodified: this.onVertexModified,
|
||||||
|
scope: this
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return activated;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* APIMethod: deactivate
|
||||||
|
* Deactivate the control. Deactivating the control unregisters listeners
|
||||||
|
* so feature editing may proceed without engaging the snapping agent.
|
||||||
|
*/
|
||||||
|
deactivate: function() {
|
||||||
|
var deactivated = OpenLayers.Control.prototype.deactivate.call(this);
|
||||||
|
if(deactivated) {
|
||||||
|
if(this.layer && this.layer.events) {
|
||||||
|
this.layer.events.un({
|
||||||
|
sketchmodified: this.onSketchModified,
|
||||||
|
vertexmodified: this.onVertexModified,
|
||||||
|
scope: this
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.feature = null;
|
||||||
|
this.point = null;
|
||||||
|
return deactivated;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: onSketchModified
|
||||||
|
* Registered as a listener for the sketchmodified event on the editable
|
||||||
|
* layer.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* event - {Object} The sketch modified event.
|
||||||
|
*/
|
||||||
|
onSketchModified: function(event) {
|
||||||
|
this.feature = event.feature;
|
||||||
|
this.considerSnapping(event.vertex, event.vertex);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: onVertexModified
|
||||||
|
* Registered as a listener for the vertexmodified event on the editable
|
||||||
|
* layer.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* event - {Object} The vertex modified event.
|
||||||
|
*/
|
||||||
|
onVertexModified: function(event) {
|
||||||
|
this.feature = event.feature;
|
||||||
|
var loc = this.layer.map.getLonLatFromViewPortPx(event.pixel);
|
||||||
|
this.considerSnapping(
|
||||||
|
event.vertex, new OpenLayers.Geometry.Point(loc.lon, loc.lat)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: considerSnapping
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* point - {<OpenLayers.Geometry.Point}} The vertex to be snapped (or
|
||||||
|
* unsnapped).
|
||||||
|
* loc - {<OpenLayers.Geometry.Point>} The location of the mouse in map
|
||||||
|
* coords.
|
||||||
|
*/
|
||||||
|
considerSnapping: function(point, loc) {
|
||||||
|
var best = {
|
||||||
|
rank: Number.POSITIVE_INFINITY,
|
||||||
|
dist: Number.POSITIVE_INFINITY,
|
||||||
|
x: null, y: null
|
||||||
|
};
|
||||||
|
var snapped = false;
|
||||||
|
var result, target;
|
||||||
|
for(var i=0, len=this.targets.length; i<len; ++i) {
|
||||||
|
target = this.targets[i];
|
||||||
|
result = this.testTarget(target, loc);
|
||||||
|
if(result) {
|
||||||
|
if(this.greedy) {
|
||||||
|
best = result;
|
||||||
|
best.target = target;
|
||||||
|
snapped = true;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
if((result.rank < best.rank) ||
|
||||||
|
(result.rank === best.rank && result.dist < best.dist)) {
|
||||||
|
best = result;
|
||||||
|
best.target = target;
|
||||||
|
snapped = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(snapped) {
|
||||||
|
var proceed = this.events.triggerEvent("beforesnap", {
|
||||||
|
point: point, x: best.x, y: best.y, distance: best.dist,
|
||||||
|
layer: best.target.layer, snapType: this.precedence[best.rank]
|
||||||
|
});
|
||||||
|
if(proceed !== false) {
|
||||||
|
point.x = best.x;
|
||||||
|
point.y = best.y;
|
||||||
|
this.point = point;
|
||||||
|
this.events.triggerEvent("snap", {
|
||||||
|
point: point,
|
||||||
|
snapType: this.precedence[best.rank],
|
||||||
|
layer: best.target.layer,
|
||||||
|
distance: best.dist
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
snapped = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(this.point && !snapped) {
|
||||||
|
point.x = loc.x;
|
||||||
|
point.y = loc.y;
|
||||||
|
this.point = null;
|
||||||
|
this.events.triggerEvent("unsnap", {point: point});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: testTarget
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* target - {Object} Object with target layer configuration.
|
||||||
|
* loc - {<OpenLayers.Geometry.Point>} The location of the mouse in map
|
||||||
|
* coords.
|
||||||
|
*
|
||||||
|
* Returns:
|
||||||
|
* {Object} A result object with rank, dist, x, and y properties.
|
||||||
|
* Returns null if candidate is not eligible for snapping.
|
||||||
|
*/
|
||||||
|
testTarget: function(target, loc) {
|
||||||
|
var tolerance = {
|
||||||
|
node: this.getGeoTolerance(target.nodeTolerance),
|
||||||
|
vertex: this.getGeoTolerance(target.vertexTolerance),
|
||||||
|
edge: this.getGeoTolerance(target.edgeTolerance)
|
||||||
|
};
|
||||||
|
// this could be cached if we don't support setting tolerance values directly
|
||||||
|
var maxTolerance = Math.max(
|
||||||
|
tolerance.node, tolerance.vertex, tolerance.edge
|
||||||
|
);
|
||||||
|
var result = {
|
||||||
|
rank: Number.POSITIVE_INFINITY, dist: Number.POSITIVE_INFINITY
|
||||||
|
};
|
||||||
|
var eligible = false;
|
||||||
|
var features = target.layer.features;
|
||||||
|
var feature, type, vertices, vertex, closest, dist, found;
|
||||||
|
var numTypes = this.precedence.length;
|
||||||
|
var ll = new OpenLayers.LonLat(loc.x, loc.y);
|
||||||
|
for(var i=0, len=features.length; i<len; ++i) {
|
||||||
|
feature = features[i];
|
||||||
|
if(feature !== this.feature && !feature._sketch &&
|
||||||
|
feature.state !== OpenLayers.State.DELETE &&
|
||||||
|
(!target.filter || target.filter.evaluate(feature.attributes))) {
|
||||||
|
if(feature.atPoint(ll, maxTolerance, maxTolerance)) {
|
||||||
|
for(var j=0, stop=Math.min(result.rank+1, numTypes); j<stop; ++j) {
|
||||||
|
type = this.precedence[j];
|
||||||
|
if(target[type]) {
|
||||||
|
if(type === "edge") {
|
||||||
|
closest = feature.geometry.distanceTo(loc, {details: true});
|
||||||
|
dist = closest.distance;
|
||||||
|
if(dist <= tolerance[type] && dist < result.dist) {
|
||||||
|
result = {
|
||||||
|
rank: j, dist: dist,
|
||||||
|
x: closest.x0, y: closest.y0 // closest coords on feature
|
||||||
|
};
|
||||||
|
eligible = true;
|
||||||
|
// don't look for lower precedence types for this feature
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// look for nodes or vertices
|
||||||
|
vertices = feature.geometry.getVertices(type === "node");
|
||||||
|
found = false;
|
||||||
|
for(var k=0, klen=vertices.length; k<klen; ++k) {
|
||||||
|
vertex = vertices[k];
|
||||||
|
dist = vertex.distanceTo(loc);
|
||||||
|
if(dist <= tolerance[type] &&
|
||||||
|
(j < result.rank || (j === result.rank && dist < result.dist))) {
|
||||||
|
result = {
|
||||||
|
rank: j, dist: dist,
|
||||||
|
x: vertex.x, y: vertex.y
|
||||||
|
};
|
||||||
|
eligible = true;
|
||||||
|
found = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(found) {
|
||||||
|
// don't look for lower precedence types for this feature
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return eligible ? result : null;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: getGeoTolerance
|
||||||
|
* Calculate a tolerance in map units given a tolerance in pixels. This
|
||||||
|
* takes advantage of the <geoToleranceCache> when the map resolution
|
||||||
|
* has not changed.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* tolerance - {Number} A tolerance value in pixels.
|
||||||
|
*
|
||||||
|
* Returns:
|
||||||
|
* {Number} A tolerance value in map units.
|
||||||
|
*/
|
||||||
|
getGeoTolerance: function(tolerance) {
|
||||||
|
var resolution = this.layer.map.getResolution();
|
||||||
|
if(resolution !== this.resolution) {
|
||||||
|
this.resolution = resolution;
|
||||||
|
this.geoToleranceCache = {};
|
||||||
|
}
|
||||||
|
var geoTolerance = this.geoToleranceCache[tolerance];
|
||||||
|
if(geoTolerance === undefined) {
|
||||||
|
geoTolerance = tolerance * resolution;
|
||||||
|
this.geoToleranceCache[tolerance] = geoTolerance;
|
||||||
|
}
|
||||||
|
return geoTolerance;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method: destroy
|
||||||
|
* Clean up the control.
|
||||||
|
*/
|
||||||
|
destroy: function() {
|
||||||
|
if(this.active) {
|
||||||
|
this.deactivate(); // TODO: this should be handled by the super
|
||||||
|
}
|
||||||
|
delete this.layer;
|
||||||
|
delete this.targets;
|
||||||
|
OpenLayers.Control.prototype.destroy.call(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
CLASS_NAME: "OpenLayers.Control.Snapping"
|
||||||
|
});
|
||||||
312
tests/Control/Snapping.html
Normal file
312
tests/Control/Snapping.html
Normal file
@@ -0,0 +1,312 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../../lib/OpenLayers.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function test_initialize(t) {
|
||||||
|
|
||||||
|
t.plan(5);
|
||||||
|
|
||||||
|
// construct with a single layer
|
||||||
|
var layer = new OpenLayers.Layer.Vector();
|
||||||
|
var control = new OpenLayers.Control.Snapping({
|
||||||
|
layer: layer
|
||||||
|
});
|
||||||
|
|
||||||
|
t.ok(control.layer === layer, "[a] source layer properly set");
|
||||||
|
t.eq(control.targets.length, 1, "[a] one target layer");
|
||||||
|
t.ok(control.targets[0].layer === layer, "[a] target set");
|
||||||
|
control.destroy();
|
||||||
|
|
||||||
|
// construct with a different target, default target config
|
||||||
|
var layer2 = new OpenLayers.Layer.Vector();
|
||||||
|
control = new OpenLayers.Control.Snapping({
|
||||||
|
layer: layer,
|
||||||
|
targets: [layer2]
|
||||||
|
});
|
||||||
|
|
||||||
|
t.eq(control.targets.length, 1, "[b] one target layer");
|
||||||
|
t.ok(control.targets[0].layer == layer2, "[b] target set");
|
||||||
|
control.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_setLayer(t) {
|
||||||
|
|
||||||
|
t.plan(4);
|
||||||
|
|
||||||
|
var layer = new OpenLayers.Layer.Vector();
|
||||||
|
var control = new OpenLayers.Control.Snapping();
|
||||||
|
control.setLayer(layer);
|
||||||
|
|
||||||
|
t.ok(control.layer === layer, "layer properly set");
|
||||||
|
|
||||||
|
// confirm that the control is deactivated and reactivated when setting new layer
|
||||||
|
var log = {
|
||||||
|
activated: 0,
|
||||||
|
deactivated: 0
|
||||||
|
};
|
||||||
|
control.activate = function() {
|
||||||
|
log.activated++;
|
||||||
|
}
|
||||||
|
control.deactivate = function() {
|
||||||
|
log.deactivated++;
|
||||||
|
}
|
||||||
|
control.active = true;
|
||||||
|
|
||||||
|
var layer2 = new OpenLayers.Layer.Vector();
|
||||||
|
control.setLayer(layer2);
|
||||||
|
|
||||||
|
t.eq(log.deactivated, 1, "control deactivated");
|
||||||
|
t.ok(control.layer === layer2, "layer properly reset");
|
||||||
|
t.eq(log.activated, 1, "control reactivated");
|
||||||
|
|
||||||
|
control.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_setTargets(t) {
|
||||||
|
|
||||||
|
t.plan(4);
|
||||||
|
|
||||||
|
var layer1 = new OpenLayers.Layer.Vector();
|
||||||
|
var layer2 = new OpenLayers.Layer.Vector();
|
||||||
|
var control = new OpenLayers.Control.Snapping();
|
||||||
|
|
||||||
|
var log = {
|
||||||
|
addTarget: [],
|
||||||
|
addTargetLayer: []
|
||||||
|
};
|
||||||
|
control.addTarget = function(target) {
|
||||||
|
log.addTarget.push(target);
|
||||||
|
};
|
||||||
|
control.addTargetLayer = function(target) {
|
||||||
|
log.addTargetLayer.push(target);
|
||||||
|
};
|
||||||
|
|
||||||
|
control.setTargets([layer1, {layer: layer2}]);
|
||||||
|
|
||||||
|
t.eq(log.addTargetLayer.length, 1, "setTargetLayer called once");
|
||||||
|
t.ok(log.addTargetLayer[0] === layer1, "setTargetLayer called with layer1");
|
||||||
|
t.eq(log.addTarget.length, 1, "setTarget called once");
|
||||||
|
t.ok(log.addTarget[0].layer === layer2, "setTarget called with layer2");
|
||||||
|
|
||||||
|
control.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_addTarget(t) {
|
||||||
|
t.plan(5);
|
||||||
|
|
||||||
|
var layer = new OpenLayers.Layer.Vector();
|
||||||
|
|
||||||
|
var control = new OpenLayers.Control.Snapping({
|
||||||
|
defaults: {
|
||||||
|
nodeTolerance: 30,
|
||||||
|
tolerance: 40
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var log = {};
|
||||||
|
control.addTarget({layer: layer});
|
||||||
|
|
||||||
|
t.eq(control.targets.length, 1, "single target");
|
||||||
|
var target = control.targets[0];
|
||||||
|
t.ok(target.layer === layer, "correct target layer");
|
||||||
|
t.eq(target.nodeTolerance, 30, "correct nodeTolerance");
|
||||||
|
t.eq(target.edgeTolerance, 40, "correct edgeTolerance");
|
||||||
|
t.eq(target.vertexTolerance, 40, "correct vertexTolerance");
|
||||||
|
|
||||||
|
control.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_removeTargetLayer(t) {
|
||||||
|
|
||||||
|
t.plan(3);
|
||||||
|
|
||||||
|
var layer1 = new OpenLayers.Layer.Vector();
|
||||||
|
var layer2 = new OpenLayers.Layer.Vector();
|
||||||
|
var layer3 = new OpenLayers.Layer.Vector();
|
||||||
|
var control = new OpenLayers.Control.Snapping({
|
||||||
|
targets: [layer1, layer2, layer3]
|
||||||
|
});
|
||||||
|
|
||||||
|
control.removeTargetLayer(layer2);
|
||||||
|
|
||||||
|
t.eq(control.targets.length, 2, "correct targets length");
|
||||||
|
t.ok(control.targets[0].layer === layer1, "layer1 remains");
|
||||||
|
t.ok(control.targets[1].layer === layer3, "layer3 remains");
|
||||||
|
|
||||||
|
control.destroy();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_activate(t) {
|
||||||
|
|
||||||
|
t.plan(4);
|
||||||
|
var layer = new OpenLayers.Layer.Vector();
|
||||||
|
var control = new OpenLayers.Control.Snapping({
|
||||||
|
layer: layer
|
||||||
|
});
|
||||||
|
|
||||||
|
control.activate();
|
||||||
|
|
||||||
|
t.eq(layer.events.listeners.sketchmodified.length, 1, "one sketchmodified listener");
|
||||||
|
t.ok(layer.events.listeners.sketchmodified[0].func === control.onSketchModified, "correct sketchmodified listener");
|
||||||
|
t.eq(layer.events.listeners.vertexmodified.length, 1, "one vertexmodified listener");
|
||||||
|
t.ok(layer.events.listeners.vertexmodified[0].func === control.onVertexModified, "correct vertexmodified listener");
|
||||||
|
|
||||||
|
control.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_deactivate(t) {
|
||||||
|
|
||||||
|
t.plan(2);
|
||||||
|
var layer = new OpenLayers.Layer.Vector();
|
||||||
|
var control = new OpenLayers.Control.Snapping({
|
||||||
|
layer: layer
|
||||||
|
});
|
||||||
|
|
||||||
|
control.activate();
|
||||||
|
control.deactivate();
|
||||||
|
|
||||||
|
t.eq(layer.events.listeners.sketchmodified.length, 0, "no sketchmodified listeners");
|
||||||
|
t.eq(layer.events.listeners.vertexmodified.length, 0, "no vertexmodified listeners");
|
||||||
|
|
||||||
|
control.destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function test_snapping(t) {
|
||||||
|
|
||||||
|
t.plan(33);
|
||||||
|
|
||||||
|
var map = new OpenLayers.Map("map", {
|
||||||
|
resolutions: [1],
|
||||||
|
maxExtent: new OpenLayers.Bounds(0, 0, 100, 100)
|
||||||
|
});
|
||||||
|
|
||||||
|
var layer1 = new OpenLayers.Layer.Vector(null, {
|
||||||
|
isBaseLayer: true
|
||||||
|
});
|
||||||
|
layer1.addFeatures([
|
||||||
|
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT(
|
||||||
|
"LINESTRING(0 0, 10 10, 20 20, 30 30)"
|
||||||
|
)),
|
||||||
|
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT(
|
||||||
|
"LINESTRING(11 10, 20 10, 30 10)"
|
||||||
|
))
|
||||||
|
]);
|
||||||
|
|
||||||
|
var layer2 = new OpenLayers.Layer.Vector();
|
||||||
|
layer2.addFeatures([
|
||||||
|
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT(
|
||||||
|
"LINESTRING(10 10, 20 20, 30 30)"
|
||||||
|
)),
|
||||||
|
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT(
|
||||||
|
"LINESTRING(21 10, 20 20, 20 30)"
|
||||||
|
))
|
||||||
|
]);
|
||||||
|
|
||||||
|
map.addLayers([layer1, layer2]);
|
||||||
|
map.zoomToMaxExtent();
|
||||||
|
|
||||||
|
var control = new OpenLayers.Control.Snapping({
|
||||||
|
layer: layer1,
|
||||||
|
targets: [layer1, layer2],
|
||||||
|
defaults: {tolerance: 4}
|
||||||
|
});
|
||||||
|
control.activate();
|
||||||
|
map.addControl(control);
|
||||||
|
|
||||||
|
// log beforesnap, snap, and unsnap events
|
||||||
|
var events = [];
|
||||||
|
function listener(event) {
|
||||||
|
events.push(event);
|
||||||
|
}
|
||||||
|
control.events.on({
|
||||||
|
beforesnap: listener,
|
||||||
|
snap: listener,
|
||||||
|
unsnap: listener
|
||||||
|
});
|
||||||
|
|
||||||
|
// create a vertex and a convenience method for mocking the drag
|
||||||
|
var vertex = new OpenLayers.Geometry.Point(-100, -100);
|
||||||
|
function drag(x, y) {
|
||||||
|
var px = map.getPixelFromLonLat(new OpenLayers.LonLat(x, y));
|
||||||
|
layer1.events.triggerEvent("vertexmodified", {
|
||||||
|
vertex: vertex, pixel: px
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// mock up drag far from features
|
||||||
|
drag(-100, -100);
|
||||||
|
t.eq(events.length, 0, "no snapping");
|
||||||
|
|
||||||
|
// mock up drag near first node of first feature
|
||||||
|
drag(0, 1);
|
||||||
|
t.eq(events.length, 2, "[a] 2 events triggered");
|
||||||
|
t.eq(events[0].type, "beforesnap", "[a] beforesnap triggered");
|
||||||
|
t.eq(events[0].snapType, "node", "[a] beforesnap triggered for node");
|
||||||
|
t.ok(events[0].point === vertex, "[a] beforesnap triggered with vertex");
|
||||||
|
t.eq(events[0].x, 0, "[a] beforesnap triggered correct x");
|
||||||
|
t.eq(events[0].y, 0, "[a] beforesnap triggered with correct y");
|
||||||
|
t.eq(events[1].type, "snap", "[a] snap triggered");
|
||||||
|
t.eq(events[1].snapType, "node", "[a] snap triggered for node");
|
||||||
|
t.ok(events[1].point === vertex, "[a] snap triggered with point");
|
||||||
|
t.eq(events[1].distance, 1, "[a] snap triggered correct distance");
|
||||||
|
t.ok(events[1].layer === layer1, "[a] snap triggered with correct target layer");
|
||||||
|
t.eq(vertex.x, 0, "[a] vertex x modified");
|
||||||
|
t.eq(vertex.y, 0, "[a] vertex y modified");
|
||||||
|
events = [];
|
||||||
|
|
||||||
|
// mock up drag that unsnaps
|
||||||
|
drag(-100, -50);
|
||||||
|
t.eq(events.length, 1, "[b] 1 event triggered");
|
||||||
|
t.eq(events[0].type, "unsnap", "[b] unsnap triggered");
|
||||||
|
t.ok(events[0].point === vertex, "[b] unsnap triggered with vertex");
|
||||||
|
t.eq(vertex.x, -100, "[b] vertex x unsnapped");
|
||||||
|
t.eq(vertex.y, -50, "[b] vertex y unsnapped");
|
||||||
|
events = [];
|
||||||
|
|
||||||
|
// drag near node of second feature in first layer to demonstrate precedence of node snapping
|
||||||
|
drag(9, 10);
|
||||||
|
t.eq(events.length, 2, "[c] 2 events triggered");
|
||||||
|
t.eq(events[0].type, "beforesnap", "[c] beforesnap triggered first");
|
||||||
|
t.eq(events[1].type, "snap", "[c] snap triggered second");
|
||||||
|
t.eq(events[1].snapType, "node", "[c] snap to node");
|
||||||
|
// unsnap & reset
|
||||||
|
drag(-100, -50);
|
||||||
|
events = [];
|
||||||
|
|
||||||
|
// drag near node of second feature in second layer to demonstrate greedy property
|
||||||
|
// with greedy true (default) the best target from the first layer with eligible targets is used
|
||||||
|
drag(22, 10);
|
||||||
|
t.eq(events.length, 2, "[d] 2 events triggered");
|
||||||
|
t.eq(events[1].type, "snap", "[d] snap triggered second");
|
||||||
|
t.eq(events[1].snapType, "vertex", "[d] snap to vertex");
|
||||||
|
t.ok(events[1].layer === layer1, "[d] snap to vertex in first layer");
|
||||||
|
t.eq(vertex.x, 20, "[d] vertex x modified");
|
||||||
|
t.eq(vertex.y, 10, "[d] vertex y modified");
|
||||||
|
// unsnap & reset
|
||||||
|
drag(-100, -50);
|
||||||
|
events = [];
|
||||||
|
|
||||||
|
// do the same drag but with greedy false - this will look for best target in all layers
|
||||||
|
control.greedy = false;
|
||||||
|
drag(22, 10);
|
||||||
|
t.eq(events.length, 2, "[d] 2 events triggered");
|
||||||
|
t.eq(events[1].type, "snap", "[d] snap triggered second");
|
||||||
|
t.eq(events[1].snapType, "node", "[d] snap to node");
|
||||||
|
t.ok(events[1].layer === layer2, "[d] snap to node in second layer");
|
||||||
|
// unsnap & reset
|
||||||
|
drag(-100, -50);
|
||||||
|
control.greedy = true;
|
||||||
|
events = [];
|
||||||
|
|
||||||
|
map.destroy();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="map" style="width: 100px; height: 100px;"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -30,6 +30,7 @@
|
|||||||
<li>Control/Scale.html</li>
|
<li>Control/Scale.html</li>
|
||||||
<li>Control/ScaleLine.html</li>
|
<li>Control/ScaleLine.html</li>
|
||||||
<li>Control/SelectFeature.html</li>
|
<li>Control/SelectFeature.html</li>
|
||||||
|
<li>Control/Snapping.html</li>
|
||||||
<li>Events.html</li>
|
<li>Events.html</li>
|
||||||
<li>Extras.html</li>
|
<li>Extras.html</li>
|
||||||
<li>Feature.html</li>
|
<li>Feature.html</li>
|
||||||
|
|||||||
Reference in New Issue
Block a user