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

Fix Snap -> Interaction

Browse Source 
This commit changes ol.Snap -> ol.interaction.Snap, which extends
ol.interaction.Pointer.  The 'pointerdown', 'pointermove' and
'pointerup' map browser events are hanlded to edit the pixel and
coordinate properties to make them 'snap' to the closest feature.
This commit is contained in:
Alexandre Dubé
2015-03-25 15:10:41 -04:00
parent 7d20e2a317
commit d92917ac89
4 changed files with 766 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
examples/snap.html Normal file
View File

@@ -0,0 +1,77 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title> Snap example </title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Snap interaction example</h4>
<p id="shortdesc">Example of using the snap interaction together with
draw and modify interactions. The snap interaction must be added
last, as it needs to be the first to handle the
<code>pointermove</code> event.</p>
<form id="options-form" automplete="off">
<div class="radio">
<label>
<input type="radio" name="interaction" value="draw" id="draw" checked>
Draw &nbsp;
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="interaction" value="modify">
Modify &nbsp;
</label>
</div>
<div class="form-group">
<label>Draw type &nbsp;</label>
<select name="draw-type" id="draw-type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</div>
</form>
<div id="docs">
<p>See the <a href="snap.js" target="_blank">snap.js source</a> to see how this is done.</p>
</div>
<div id="tags">draw, edit, modify, vector, featureoverlay, snap</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=snap" type="text/javascript"></script>
</body>
</html>

162
examples/snap.js Normal file
View File

@@ -0,0 +1,162 @@
goog.require('ol.FeatureOverlay');
goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.interaction');
goog.require('ol.interaction.Draw');
goog.require('ol.interaction.Modify');
goog.require('ol.interaction.Select');
goog.require('ol.interaction.Snap');
goog.require('ol.layer.Tile');
goog.require('ol.source.MapQuest');
goog.require('ol.style.Circle');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
// The features are not added to a regular vector layer/source,
// but to a feature overlay which holds a collection of features.
// This collection is passed to the modify and also the draw
// interaction, so that both can add or modify features.
var featureOverlay = new ol.FeatureOverlay({
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
}),
map: map
});
var Modify = {
init: function() {
this.select = new ol.interaction.Select();
map.addInteraction(this.select);
this.modify = new ol.interaction.Modify({
features: this.select.getFeatures()
});
map.addInteraction(this.modify);
this.setEvents();
},
setEvents: function() {
var selectedFeatures = this.select.getFeatures();
this.select.on('change:active', function() {
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
});
// since snap control duplicates the geometry of features
// when creating the index and it doesn't rebuild the index
// on 'change:geometry', modified geometries should be handled manualy
selectedFeatures.on('add', function(evt) {
// removes the feature geometry from the snap index
featureOverlay.getFeatures().remove(evt.element);
});
selectedFeatures.on('remove', function(evt) {
// adds the feature geometry to the snap index
featureOverlay.getFeatures().push(evt.element);
});
},
setActive: function(active) {
this.select.setActive(active);
this.modify.setActive(active);
}
};
Modify.init();
var Draw = {
init: function() {
map.addInteraction(this.Point);
this.Point.setActive(false);
map.addInteraction(this.LineString);
this.LineString.setActive(false);
map.addInteraction(this.Polygon);
this.Polygon.setActive(false);
},
Point: new ol.interaction.Draw({
features: featureOverlay.getFeatures(),
type: /** @type {ol.geom.GeometryType} */ ('Point')
}),
LineString: new ol.interaction.Draw({
features: featureOverlay.getFeatures(),
type: /** @type {ol.geom.GeometryType} */ ('LineString')
}),
Polygon: new ol.interaction.Draw({
features: featureOverlay.getFeatures(),
type: /** @type {ol.geom.GeometryType} */ ('Polygon')
}),
getActive: function() {
return this.activeType ? this[this.activeType].getActive() : false;
},
setActive: function(active) {
var type = optionsForm.elements['draw-type'].value;
if (active) {
this.activeType && this[this.activeType].setActive(false);
this[type].setActive(true);
this.activeType = type;
} else {
this.activeType && this[this.activeType].setActive(false);
this.activeType = null;
}
}
};
Draw.init();
var optionsForm = document.getElementById('options-form');
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
optionsForm.onchange = function(e) {
var type = e.target.getAttribute('name');
var value = e.target.value;
if (type == 'draw-type') {
Draw.getActive() && Draw.setActive(true);
} else if (type == 'interaction') {
if (value == 'modify') {
Draw.setActive(false);
Modify.setActive(true);
} else if (value == 'draw') {
Draw.setActive(true);
Modify.setActive(false);
}
}
};
Draw.setActive(true);
Modify.setActive(false);
// snap duplicates the geometries so it can create a index.
// when a gemetry is modified, index needs to be rebuild for that
// geometry by removeing the old and adding the new
var snap = new ol.interaction.Snap({
features: featureOverlay.getFeatures()
});
map.addInteraction(snap);