From e3810b5027db6be3f3f919fbbd91b3bd818c847c Mon Sep 17 00:00:00 2001 From: oterral Date: Wed, 8 Jan 2014 15:46:08 +0100 Subject: [PATCH] Add draw features example --- examples/draw-features.html | 59 +++++++++++++++++++++++++++++ examples/draw-features.js | 74 +++++++++++++++++++++++++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 examples/draw-features.html create mode 100644 examples/draw-features.js diff --git a/examples/draw-features.html b/examples/draw-features.html new file mode 100644 index 0000000000..3cb90e6121 --- /dev/null +++ b/examples/draw-features.html @@ -0,0 +1,59 @@ + + + + + + + + + + + Draw features example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Draw features example

+

Example of using the Draw interaction.

+
+ + +
+ +
+

See the draw-features.js source to see how this is done.

+
+
draw, edit, vector
+
+ +
+ +
+ + + + + + diff --git a/examples/draw-features.js b/examples/draw-features.js new file mode 100644 index 0000000000..a61b246f94 --- /dev/null +++ b/examples/draw-features.js @@ -0,0 +1,74 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.interaction'); +goog.require('ol.interaction.Draw'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.Vector'); +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.MapQuestOpenAerial() +}); + +var styleArray = [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 vector = new ol.layer.Vector({ + source: new ol.source.Vector(), + styleFunction: function(feature, resolution) { + return styleArray; + } +}); + +var map = new ol.Map({ + layers: [raster, vector], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [-11000000, 4600000], + zoom: 4 + }) +}); + +var typeSelect = document.getElementById('type'); + +var draw; // global so we can remove it later +function addInteraction() { + draw = new ol.interaction.Draw({ + layer: vector, + type: /** @type {ol.geom.GeometryType} */ + (typeSelect.options[typeSelect.selectedIndex].value) + }); + map.addInteraction(draw); +} + + +/** + * Let user change the geometry type. + * @param {Event} e Change event. + */ +typeSelect.onchange = function(e) { + map.removeInteraction(draw); + addInteraction(); +}; + +addInteraction();