Modify features example
-Example of using the Modify interaction.
+Editing features with the modify interaction.
-
diff --git a/examples/modify-features.js b/examples/modify-features.js
index b71537ca89..ff26883ca4 100644
--- a/examples/modify-features.js
+++ b/examples/modify-features.js
@@ -8,10 +8,6 @@ goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.source.GeoJSON');
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({
@@ -21,243 +17,24 @@ var raster = new ol.layer.Tile({
})
});
-var styleFunction = (function() {
- var styles = {};
- var image = new ol.style.Circle({
- radius: 5,
- fill: null,
- stroke: new ol.style.Stroke({color: 'orange', width: 2})
- });
- styles['Point'] = [new ol.style.Style({image: image})];
- styles['Polygon'] = [new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'blue',
- width: 3
- }),
- fill: new ol.style.Fill({
- color: 'rgba(0, 0, 255, 0.1)'
- })
- })];
- styles['MultiLinestring'] = [new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'green',
- width: 3
- })
- })];
- styles['MultiPolygon'] = [new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'yellow',
- width: 1
- }),
- fill: new ol.style.Fill({
- color: 'rgba(255, 255, 0, 0.1)'
- })
- })];
- styles['default'] = [new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: 'red',
- width: 3
- }),
- fill: new ol.style.Fill({
- color: 'rgba(255, 0, 0, 0.1)'
- }),
- image: image
- })];
- return function(feature, resolution) {
- return styles[feature.getGeometry().getType()] || styles['default'];
- };
-})();
-
-var testDataSource = new ol.source.GeoJSON(
- /** @type {olx.source.GeoJSONOptions} */ ({
- object: {
- 'type': 'FeatureCollection',
- 'crs': {
- 'type': 'name',
- 'properties': {
- 'name': 'EPSG:3857'
- }
- },
- 'features': [
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'Point',
- 'coordinates': [0, 0]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'MultiPoint',
- 'coordinates': [[-2e6, 0], [0, -2e6]]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'LineString',
- 'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'LineString',
- 'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'Polygon',
- 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
- [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
- [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'MultiLineString',
- 'coordinates': [
- [[-1e6, -7.5e5], [-1e6, 7.5e5]],
- [[1e6, -7.5e5], [1e6, 7.5e5]],
- [[-7.5e5, -1e6], [7.5e5, -1e6]],
- [[-7.5e5, 1e6], [7.5e5, 1e6]]
- ]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'MultiPolygon',
- 'coordinates': [
- [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
- [-3e6, 6e6], [-5e6, 6e6]]],
- [[[-2e6, 6e6], [-2e6, 8e6], [0e6, 8e6],
- [0e6, 6e6], [-2e6, 6e6]]],
- [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
- [3e6, 6e6], [1e6, 6e6]]]
- ]
- }
- },
- {
- 'type': 'Feature',
- 'geometry': {
- 'type': 'GeometryCollection',
- 'geometries': [
- {
- 'type': 'LineString',
- 'coordinates': [[-5e6, -5e6], [0e6, -5e6]]
- },
- {
- 'type': 'Point',
- 'coordinates': [4e6, -5e6]
- },
- {
- 'type': 'Polygon',
- 'coordinates': [
- [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
- ]
- }
- ]
- }
- }
- ]
- }
- }));
-
-var testDataLayer = new ol.layer.Vector({
- source: testDataSource,
- style: styleFunction
-});
-
-var realDataSource = new ol.source.GeoJSON({
+var source = new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: 'data/geojson/countries.geojson'
});
-var realDataLayer = new ol.layer.Vector({
- source: realDataSource,
- style: styleFunction
+var vector = new ol.layer.Vector({
+ source: source
});
-var overlayStyle = (function() {
- var styles = {};
- styles['Polygon'] = [
- new ol.style.Style({
- fill: new ol.style.Fill({
- color: [255, 255, 255, 0.5]
- })
- }),
- new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: [255, 255, 255, 1],
- width: 5
- })
- }),
- new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: [0, 153, 255, 1],
- width: 3
- })
- })
- ];
- styles['MultiPolygon'] = styles['Polygon'];
-
- styles['LineString'] = [
- new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: [255, 255, 255, 1],
- width: 5
- })
- }),
- new ol.style.Style({
- stroke: new ol.style.Stroke({
- color: [0, 153, 255, 1],
- width: 3
- })
- })
- ];
- styles['MultiLineString'] = styles['LineString'];
-
- styles['Point'] = [
- new ol.style.Style({
- image: new ol.style.Circle({
- radius: 7,
- fill: new ol.style.Fill({
- color: [0, 153, 255, 1]
- }),
- stroke: new ol.style.Stroke({
- color: [255, 255, 255, 0.75],
- width: 1.5
- })
- }),
- zIndex: 100000
- })
- ];
- styles['MultiPoint'] = styles['Point'];
-
- styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
-
- return function(feature, resolution) {
- return styles[feature.getGeometry().getType()];
- };
-})();
-
-var select = new ol.interaction.Select({
- style: overlayStyle
-});
+var select = new ol.interaction.Select({});
var modify = new ol.interaction.Modify({
- features: select.getFeatures(),
- style: overlayStyle
+ features: select.getFeatures()
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([select, modify]),
- layers: [raster, testDataLayer, realDataLayer],
+ layers: [raster, vector],
renderer: 'canvas',
target: 'map',
view: new ol.View2D({
@@ -265,14 +42,3 @@ var map = new ol.Map({
zoom: 2
})
});
-
-$('#layer-select').change(function() {
- select.getFeatures().clear();
- var index = $(this).children().index($(this).find(':selected'));
- var layers = [testDataLayer, realDataLayer];
- var i, ii;
- for (i = 0, ii = layers.length; i < ii; ++i) {
- layers[i].setVisible(index == i);
- }
-});
-$('#layer-select').trigger('change');
diff --git a/examples/modify-test.html b/examples/modify-test.html
new file mode 100644
index 0000000000..e892368e0e
--- /dev/null
+++ b/examples/modify-test.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
+
+
+
+ Select a feature on the Test Data layer and drag the circle that appears when the cursor gets close to the selected geometry. On the Real data (topology) layer, editing adjacent countries that are selected preserves the topology.
+This example demonstrates how the modify and select interactions can be used together. Zoom in to an area of interest and select a feature for editing. Then drag points around to modify the feature. You can preserve topology by selecting multiple features before editing (Shift+click to select multiple features).
See the modify-features.js source to see how this is done.
+
+
+
+
+
+ 
OpenLayers 3 Examples
+
+
+
+
+
+
+
+
+
diff --git a/examples/modify-test.js b/examples/modify-test.js
new file mode 100644
index 0000000000..96c5c5d5a4
--- /dev/null
+++ b/examples/modify-test.js
@@ -0,0 +1,248 @@
+goog.require('ol.Collection');
+goog.require('ol.Map');
+goog.require('ol.View2D');
+goog.require('ol.interaction');
+goog.require('ol.interaction.Modify');
+goog.require('ol.interaction.Select');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.GeoJSON');
+goog.require('ol.style.Circle');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+var styleFunction = (function() {
+ var styles = {};
+ var image = new ol.style.Circle({
+ radius: 5,
+ fill: null,
+ stroke: new ol.style.Stroke({color: 'orange', width: 2})
+ });
+ styles['Point'] = [new ol.style.Style({image: image})];
+ styles['Polygon'] = [new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: 'blue',
+ width: 3
+ }),
+ fill: new ol.style.Fill({
+ color: 'rgba(0, 0, 255, 0.1)'
+ })
+ })];
+ styles['MultiLinestring'] = [new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: 'green',
+ width: 3
+ })
+ })];
+ styles['MultiPolygon'] = [new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: 'yellow',
+ width: 1
+ }),
+ fill: new ol.style.Fill({
+ color: 'rgba(255, 255, 0, 0.1)'
+ })
+ })];
+ styles['default'] = [new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: 'red',
+ width: 3
+ }),
+ fill: new ol.style.Fill({
+ color: 'rgba(255, 0, 0, 0.1)'
+ }),
+ image: image
+ })];
+ return function(feature, resolution) {
+ return styles[feature.getGeometry().getType()] || styles['default'];
+ };
+})();
+
+var source = new ol.source.GeoJSON(
+ /** @type {olx.source.GeoJSONOptions} */ ({
+ object: {
+ 'type': 'FeatureCollection',
+ 'crs': {
+ 'type': 'name',
+ 'properties': {
+ 'name': 'EPSG:3857'
+ }
+ },
+ 'features': [
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'Point',
+ 'coordinates': [0, 0]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'MultiPoint',
+ 'coordinates': [[-2e6, 0], [0, -2e6]]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'LineString',
+ 'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'LineString',
+ 'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'Polygon',
+ 'coordinates': [[[-5e6, -1e6], [-4e6, 1e6],
+ [-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
+ [-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'MultiLineString',
+ 'coordinates': [
+ [[-1e6, -7.5e5], [-1e6, 7.5e5]],
+ [[1e6, -7.5e5], [1e6, 7.5e5]],
+ [[-7.5e5, -1e6], [7.5e5, -1e6]],
+ [[-7.5e5, 1e6], [7.5e5, 1e6]]
+ ]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'MultiPolygon',
+ 'coordinates': [
+ [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
+ [-3e6, 6e6], [-5e6, 6e6]]],
+ [[[-2e6, 6e6], [-2e6, 8e6], [0e6, 8e6],
+ [0e6, 6e6], [-2e6, 6e6]]],
+ [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
+ [3e6, 6e6], [1e6, 6e6]]]
+ ]
+ }
+ },
+ {
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'GeometryCollection',
+ 'geometries': [
+ {
+ 'type': 'LineString',
+ 'coordinates': [[-5e6, -5e6], [0e6, -5e6]]
+ },
+ {
+ 'type': 'Point',
+ 'coordinates': [4e6, -5e6]
+ },
+ {
+ 'type': 'Polygon',
+ 'coordinates': [
+ [[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
+ ]
+ }
+ ]
+ }
+ }
+ ]
+ }
+ }));
+
+var layer = new ol.layer.Vector({
+ source: source,
+ style: styleFunction
+});
+
+var overlayStyle = (function() {
+ var styles = {};
+ styles['Polygon'] = [
+ new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: [255, 255, 255, 0.5]
+ })
+ }),
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: [255, 255, 255, 1],
+ width: 5
+ })
+ }),
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: [0, 153, 255, 1],
+ width: 3
+ })
+ })
+ ];
+ styles['MultiPolygon'] = styles['Polygon'];
+
+ styles['LineString'] = [
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: [255, 255, 255, 1],
+ width: 5
+ })
+ }),
+ new ol.style.Style({
+ stroke: new ol.style.Stroke({
+ color: [0, 153, 255, 1],
+ width: 3
+ })
+ })
+ ];
+ styles['MultiLineString'] = styles['LineString'];
+
+ styles['Point'] = [
+ new ol.style.Style({
+ image: new ol.style.Circle({
+ radius: 7,
+ fill: new ol.style.Fill({
+ color: [0, 153, 255, 1]
+ }),
+ stroke: new ol.style.Stroke({
+ color: [255, 255, 255, 0.75],
+ width: 1.5
+ })
+ }),
+ zIndex: 100000
+ })
+ ];
+ styles['MultiPoint'] = styles['Point'];
+
+ styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
+
+ return function(feature, resolution) {
+ return styles[feature.getGeometry().getType()];
+ };
+})();
+
+var select = new ol.interaction.Select({
+ style: overlayStyle
+});
+
+var modify = new ol.interaction.Modify({
+ features: select.getFeatures(),
+ style: overlayStyle
+});
+
+var map = new ol.Map({
+ interactions: ol.interaction.defaults().extend([select, modify]),
+ layers: [layer],
+ renderer: 'canvas',
+ target: 'map',
+ view: new ol.View2D({
+ center: [0, 1000000],
+ zoom: 2
+ })
+});
+
+
+
+
+
+
+
+
+
+
+
+
+ Modify features test
+Example for testing feature modification.
+
+
+
+ See the modify-test.js source to see how this is done.
+