Example of using the snap interaction together with draw and modify interactions.
Created
November 1, 2017 21:46
-
-
Save pingyangtiaer/0b18d198317c6047206a3737084255df to your computer and use it in GitHub Desktop.
Snap Interaction
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="map" class="map"></div> | |
<form id="options-form" automplete="off"> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="interaction" value="draw" id="draw" checked> | |
Draw | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="interaction" value="modify"> | |
Modify | |
</label> | |
</div> | |
<div class="form-group"> | |
<label>Draw type </label> | |
<select name="draw-type" id="draw-type"> | |
<option value="Point">Point</option> | |
<option value="LineString">LineString</option> | |
<option value="Polygon">Polygon</option> | |
<option value="Circle">Circle</option> | |
</select> | |
</div> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var raster = new ol.layer.Tile({ | |
source: new ol.source.OSM() | |
}); | |
var vector = new ol.layer.Vector({ | |
source: new ol.source.Vector(), | |
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' | |
}) | |
}) | |
}) | |
}); | |
var map = new ol.Map({ | |
layers: [raster, vector], | |
target: 'map', | |
view: new ol.View({ | |
center: [-11000000, 4600000], | |
zoom: 4 | |
}) | |
}); | |
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); | |
}); | |
}, | |
setActive: function(active) { | |
this.select.setActive(active); | |
this.modify.setActive(active); | |
} | |
}; | |
Modify.init(); | |
var optionsForm = document.getElementById('options-form'); | |
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); | |
map.addInteraction(this.Circle); | |
this.Circle.setActive(false); | |
}, | |
Point: new ol.interaction.Draw({ | |
source: vector.getSource(), | |
type: /** @type {ol.geom.GeometryType} */ ('Point') | |
}), | |
LineString: new ol.interaction.Draw({ | |
source: vector.getSource(), | |
type: /** @type {ol.geom.GeometryType} */ ('LineString') | |
}), | |
Polygon: new ol.interaction.Draw({ | |
source: vector.getSource(), | |
type: /** @type {ol.geom.GeometryType} */ ('Polygon') | |
}), | |
Circle: new ol.interaction.Draw({ | |
source: vector.getSource(), | |
type: /** @type {ol.geom.GeometryType} */ ('Circle') | |
}), | |
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(); | |
/** | |
* 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); | |
// The snap interaction must be added after the Modify and Draw interactions | |
// in order for its map browser event handlers to be fired first. Its handlers | |
// are responsible of doing the snapping. | |
var snap = new ol.interaction.Snap({ | |
source: vector.getSource() | |
}); | |
map.addInteraction(snap); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://openlayers.org/en/v4.4.2/build/ol.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://openlayers.org/en/v4.4.2/css/ol.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment