From ac805e804ba3207cda6f57bb1b207a533ed5c537 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 16 Oct 2016 16:38:00 -0600 Subject: [PATCH] Divide the draw features example into two examples --- examples/draw-features.html | 9 +--- examples/draw-features.js | 32 +------------- examples/draw-shapes.html | 25 +++++++++++ examples/draw-shapes.js | 86 +++++++++++++++++++++++++++++++++++++ 4 files changed, 115 insertions(+), 37 deletions(-) create mode 100644 examples/draw-shapes.html create mode 100644 examples/draw-shapes.js diff --git a/examples/draw-features.html b/examples/draw-features.html index 038a644a5a..613a82a911 100644 --- a/examples/draw-features.html +++ b/examples/draw-features.html @@ -5,11 +5,8 @@ shortdesc: Example of using the ol.interaction.Draw interaction. docs: > Example of using the Draw interaction. Select a geometry type from the dropdown above to start drawing. To finish drawing, click the last - point. To activate freehand drawing for lines and polygons, hold the `Shift` - key. Square drawing is achieved by using Circle mode with a `geometryFunction` - that creates a 4-sided regular polygon instead of a circle. Box drawing uses a - custom `geometryFunction` that takes start and end point of a line with 2 - points and creates a rectangular box. + point. To activate freehand drawing for lines, polygons, and circles, hold + the `Shift` key. tags: "draw, edit, freehand, vector" ---
@@ -20,8 +17,6 @@ tags: "draw, edit, freehand, vector" - - diff --git a/examples/draw-features.js b/examples/draw-features.js index d045c2955f..a7c77aeb07 100644 --- a/examples/draw-features.js +++ b/examples/draw-features.js @@ -5,10 +5,6 @@ goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); goog.require('ol.source.OSM'); 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.OSM() @@ -17,22 +13,7 @@ var raster = new ol.layer.Tile({ var source = new ol.source.Vector({wrapX: false}); var vector = new ol.layer.Vector({ - source: source, - 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' - }) - }) - }) + source: source }); var map = new ol.Map({ @@ -50,18 +31,9 @@ var draw; // global so we can remove it later function addInteraction() { var value = typeSelect.value; if (value !== 'None') { - var geometryFunction; - if (value === 'Square') { - value = 'Circle'; - geometryFunction = ol.interaction.Draw.createRegularPolygon(4); - } else if (value === 'Box') { - value = 'Circle'; - geometryFunction = ol.interaction.Draw.createBox(); - } draw = new ol.interaction.Draw({ source: source, - type: /** @type {ol.geom.GeometryType} */ (value), - geometryFunction: geometryFunction + type: /** @type {ol.geom.GeometryType} */ (typeSelect.value) }); map.addInteraction(draw); } diff --git a/examples/draw-shapes.html b/examples/draw-shapes.html new file mode 100644 index 0000000000..19501e090c --- /dev/null +++ b/examples/draw-shapes.html @@ -0,0 +1,25 @@ +--- +layout: example.html +title: Draw Shapes +shortdesc: Using the ol.interaction.Draw to create regular shapes +docs: > + This demonstrates the use of the `geometryFunction` option for the + `ol.interaction.Draw`. Select a shape type from the dropdown above to start + drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is + achieved by using `type: 'Circle'` type with a `geometryFunction` that creates + a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'` + with a `geometryFunction` that creates a box-shaped polygon instead of a + circle. Star drawing uses a custom geometry function that coverts a circle + into a start using the center and radius provided by the draw interaction. +tags: "draw, edit, freehand, vector" +--- +
+
+ + +
diff --git a/examples/draw-shapes.js b/examples/draw-shapes.js new file mode 100644 index 0000000000..b305802d6f --- /dev/null +++ b/examples/draw-shapes.js @@ -0,0 +1,86 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.geom.Polygon'); +goog.require('ol.interaction.Draw'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.OSM'); +goog.require('ol.source.Vector'); + +var raster = new ol.layer.Tile({ + source: new ol.source.OSM() +}); + +var source = new ol.source.Vector({wrapX: false}); + +var vector = new ol.layer.Vector({ + source: source +}); + +var map = new ol.Map({ + layers: [raster, vector], + target: 'map', + view: new ol.View({ + center: [-11000000, 4600000], + zoom: 4 + }) +}); + +var typeSelect = document.getElementById('type'); + +var draw; // global so we can remove it later +function addInteraction() { + var value = typeSelect.value; + if (value !== 'None') { + var geometryFunction; + if (value === 'Square') { + value = 'Circle'; + geometryFunction = ol.interaction.Draw.createRegularPolygon(4); + } else if (value === 'Box') { + value = 'Circle'; + geometryFunction = ol.interaction.Draw.createBox(); + } else if (value === 'Star') { + value = 'Circle'; + geometryFunction = function(coordinates, geometry) { + if (!geometry) { + geometry = new ol.geom.Polygon(null); + } + var center = coordinates[0]; + var last = coordinates[1]; + var dx = center[0] - last[0]; + var dy = center[1] - last[1]; + var radius = Math.sqrt(dx * dx + dy * dy); + var rotation = Math.atan2(dy, dx); + var newCoordinates = []; + var numPoints = 12; + for (var i = 0; i < numPoints; ++i) { + var angle = rotation + i * 2 * Math.PI / numPoints; + var fraction = i % 2 === 0 ? 1 : 0.5; + var offsetX = radius * fraction * Math.cos(angle); + var offsetY = radius * fraction * Math.sin(angle); + newCoordinates.push([center[0] + offsetX, center[1] + offsetY]); + } + newCoordinates.push(newCoordinates[0].slice()); + geometry.setCoordinates([newCoordinates]); + return geometry; + }; + } + draw = new ol.interaction.Draw({ + source: source, + type: /** @type {ol.geom.GeometryType} */ (value), + geometryFunction: geometryFunction + }); + map.addInteraction(draw); + } +} + + +/** + * Handle change event. + */ +typeSelect.onchange = function() { + map.removeInteraction(draw); + addInteraction(); +}; + +addInteraction();