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/Scale.js",
|
||||
"OpenLayers/Control/ScaleLine.js",
|
||||
"OpenLayers/Control/Snapping.js",
|
||||
"OpenLayers/Control/LayerSwitcher.js",
|
||||
"OpenLayers/Control/DrawFeature.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/ScaleLine.html</li>
|
||||
<li>Control/SelectFeature.html</li>
|
||||
<li>Control/Snapping.html</li>
|
||||
<li>Events.html</li>
|
||||
<li>Extras.html</li>
|
||||
<li>Feature.html</li>
|
||||
|
||||
Reference in New Issue
Block a user