diff --git a/old/examples/draw-features.html b/old/examples/draw-features.html deleted file mode 100644 index ebe5703c91..0000000000 --- a/old/examples/draw-features.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - 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/old/examples/draw-features.js b/old/examples/draw-features.js deleted file mode 100644 index 1d48f6d9b4..0000000000 --- a/old/examples/draw-features.js +++ /dev/null @@ -1,122 +0,0 @@ -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.Fill'); -goog.require('ol.style.Rule'); -goog.require('ol.style.Shape'); -goog.require('ol.style.Stroke'); -goog.require('ol.style.Style'); - -var raster = new ol.layer.Tile({ - source: new ol.source.MapQuestOpenAerial() -}); - -var vector = new ol.layer.Vector({ - source: new ol.source.Vector(), - style: new ol.style.Style({ - rules: [ - new ol.style.Rule({ - filter: 'renderIntent("selected")', - symbolizers: [ - new ol.style.Shape({ - fill: new ol.style.Fill({ - color: '#0099ff', - opacity: 1 - }), - stroke: new ol.style.Stroke({ - color: 'white', - opacity: 0.75 - }), - size: 14 - }), - new ol.style.Fill({ - color: '#ffffff', - opacity: 0.5 - }), - new ol.style.Stroke({ - color: 'white', - width: 5 - }), - new ol.style.Stroke({ - color: '#0099ff', - width: 3 - }) - ] - }), - new ol.style.Rule({ - filter: 'renderIntent("temporary")', - symbolizers: [ - new ol.style.Shape({ - fill: new ol.style.Fill({ - color: '#0099ff', - opacity: 1 - }), - stroke: new ol.style.Stroke({ - color: 'white', - opacity: 0.75 - }), - size: 14, - zIndex: 1 - }) - ] - }) - ], - symbolizers: [ - new ol.style.Shape({ - fill: new ol.style.Fill({ - color: '#ffcc33', - opacity: 1 - }), - size: 14 - }), - new ol.style.Fill({ - color: 'white', - opacity: 0.2 - }), - new ol.style.Stroke({ - color: '#ffcc33', - width: 2 - }) - ] - }) -}); - -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(); diff --git a/old/src/ol/interaction/drawinteraction.exports b/old/src/ol/interaction/drawinteraction.exports deleted file mode 100644 index 890ae0f515..0000000000 --- a/old/src/ol/interaction/drawinteraction.exports +++ /dev/null @@ -1 +0,0 @@ -@exportSymbol ol.interaction.Draw diff --git a/old/src/ol/interaction/drawinteraction.js b/old/src/ol/interaction/drawinteraction.js deleted file mode 100644 index b2bd009c99..0000000000 --- a/old/src/ol/interaction/drawinteraction.js +++ /dev/null @@ -1,418 +0,0 @@ -goog.provide('ol.interaction.Draw'); - -goog.require('goog.asserts'); - -goog.require('ol.Coordinate'); -goog.require('ol.Feature'); -goog.require('ol.FeatureRenderIntent'); -goog.require('ol.Map'); -goog.require('ol.MapBrowserEvent'); -goog.require('ol.MapBrowserEvent.EventType'); -goog.require('ol.geom.GeometryType'); -goog.require('ol.geom.LineString'); -goog.require('ol.geom.LinearRing'); -goog.require('ol.geom.MultiLineString'); -goog.require('ol.geom.MultiPoint'); -goog.require('ol.geom.MultiPolygon'); -goog.require('ol.geom.Point'); -goog.require('ol.geom.Polygon'); -goog.require('ol.interaction.Interaction'); -goog.require('ol.layer.Vector'); -goog.require('ol.source.Vector'); - - - -/** - * Interaction that allows drawing geometries. - * @param {olx.interaction.DrawOptions} options Options. - * @constructor - * @extends {ol.interaction.Interaction} - */ -ol.interaction.Draw = function(options) { - goog.base(this); - - /** - * Target layer for drawn features. - * @type {ol.layer.Vector} - * @private - */ - this.layer_ = options.layer; - - /** - * Temporary sketch layer. - * @type {ol.layer.Vector} - * @private - */ - this.sketchLayer_ = null; - - /** - * Pixel distance for snapping. - * @type {number} - * @private - */ - this.snapTolerance_ = goog.isDef(options.snapTolerance) ? - options.snapTolerance : 12; - - /** - * Geometry type. - * @type {ol.geom.GeometryType} - * @private - */ - this.type_ = options.type; - - /** - * Drawing mode (derived from geometry type. - * @type {ol.interaction.DrawMode} - * @private - */ - this.mode_ = ol.interaction.Draw.getMode_(this.type_); - - /** - * Finish coordinate for the feature (first point for polygons, last point for - * linestrings). - * @type {ol.Coordinate} - * @private - */ - this.finishCoordinate_ = null; - - /** - * Sketch feature. - * @type {ol.Feature} - * @private - */ - this.sketchFeature_ = null; - - /** - * Sketch point. - * @type {ol.Feature} - * @private - */ - this.sketchPoint_ = null; - - /** - * Squared tolerance for handling click events. If the squared distance - * between a down and click event is greater than this tolerance, click events - * will not be handled. - * @type {number} - * @private - */ - this.squaredClickTolerance_ = 4; - -}; -goog.inherits(ol.interaction.Draw, ol.interaction.Interaction); - - -/** - * @inheritDoc - */ -ol.interaction.Draw.prototype.setMap = function(map) { - var oldMap = this.getMap(); - if (!goog.isNull(oldMap)) { - oldMap.removeLayer(this.sketchLayer_); - } - - if (!goog.isNull(map)) { - if (goog.isNull(this.sketchLayer_)) { - var layer = new ol.layer.Vector({ - source: new ol.source.Vector(), - style: this.layer_.getStyle() - }); - layer.setTemporary(true); - this.sketchLayer_ = layer; - } - map.addLayer(this.sketchLayer_); - } else { - // removing from a map, clean up - this.abortDrawing_(); - this.sketchLayer_ = null; - } - - goog.base(this, 'setMap', map); -}; - - -/** - * @inheritDoc - */ -ol.interaction.Draw.prototype.handleMapBrowserEvent = function(event) { - var map = event.map; - if (!map.isDef()) { - return true; - } - var pass = true; - if (event.type === ol.MapBrowserEvent.EventType.CLICK) { - pass = this.handleClick_(event); - } else if (event.type === ol.MapBrowserEvent.EventType.MOUSEMOVE) { - pass = this.handleMove_(event); - } else if (event.type === ol.MapBrowserEvent.EventType.DBLCLICK) { - pass = false; - } - return pass; -}; - - -/** - * Handle click events. - * @param {ol.MapBrowserEvent} event A click event. - * @return {boolean} Pass the event to other interactions. - * @private - */ -ol.interaction.Draw.prototype.handleClick_ = function(event) { - var downPx = event.map.getEventPixel(event.target.getDown()); - var clickPx = event.getPixel(); - var dx = downPx[0] - clickPx[0]; - var dy = downPx[1] - clickPx[1]; - var squaredDistance = dx * dx + dy * dy; - var pass = true; - if (squaredDistance <= this.squaredClickTolerance_) { - if (goog.isNull(this.finishCoordinate_)) { - this.startDrawing_(event); - } else if (this.mode_ === ol.interaction.DrawMode.POINT || - this.atFinish_(event)) { - this.finishDrawing_(event); - } else { - this.addToDrawing_(event); - } - pass = false; - } - return pass; -}; - - -/** - * Handle mousemove events. - * @param {ol.MapBrowserEvent} event A mousemove event. - * @return {boolean} Pass the event to other interactions. - * @private - */ -ol.interaction.Draw.prototype.handleMove_ = function(event) { - if (this.mode_ === ol.interaction.DrawMode.POINT && - goog.isNull(this.finishCoordinate_)) { - this.startDrawing_(event); - } else if (!goog.isNull(this.finishCoordinate_)) { - this.modifyDrawing_(event); - } - return true; -}; - - -/** - * Determine if an event is within the snapping tolerance of the start coord. - * @param {ol.MapBrowserEvent} event Event. - * @return {boolean} The event is within the snapping tolerance of the start. - * @private - */ -ol.interaction.Draw.prototype.atFinish_ = function(event) { - var at = false; - if (this.sketchFeature_) { - var geometry = this.sketchFeature_.getGeometry(); - var potentiallyDone = false; - if (this.mode_ === ol.interaction.DrawMode.LINESTRING) { - potentiallyDone = geometry.getCoordinates().length > 2; - } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) { - goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); - potentiallyDone = geometry.getRings()[0].getCoordinates().length > 3; - } - if (potentiallyDone) { - var map = event.map; - var finishPixel = map.getPixelFromCoordinate(this.finishCoordinate_); - var pixel = event.getPixel(); - var dx = pixel[0] - finishPixel[0]; - var dy = pixel[1] - finishPixel[1]; - at = Math.sqrt(dx * dx + dy * dy) <= this.snapTolerance_; - } - } - return at; -}; - - -/** - * Start the drawing. - * @param {ol.MapBrowserEvent} event Event. - * @private - */ -ol.interaction.Draw.prototype.startDrawing_ = function(event) { - var start = event.getCoordinate(); - this.finishCoordinate_ = start; - var sketchFeature = new ol.Feature(); - sketchFeature.setRenderIntent(ol.FeatureRenderIntent.SELECTED); - var features = [sketchFeature]; - var geometry; - if (this.mode_ === ol.interaction.DrawMode.POINT) { - geometry = new ol.geom.Point(start.slice()); - } else { - var sketchPoint = new ol.Feature({ - geom: new ol.geom.Point(start.slice()) - }); - sketchPoint.setRenderIntent(ol.FeatureRenderIntent.TEMPORARY); - this.sketchPoint_ = sketchPoint; - features.push(sketchPoint); - - if (this.mode_ === ol.interaction.DrawMode.LINESTRING) { - geometry = new ol.geom.LineString([start.slice(), start.slice()]); - } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) { - geometry = new ol.geom.Polygon([[start.slice(), start.slice()]]); - } - } - goog.asserts.assert(goog.isDef(geometry)); - sketchFeature.setGeometry(geometry); - this.sketchFeature_ = sketchFeature; - - this.sketchLayer_.getVectorSource().addFeatures(features); -}; - - -/** - * Modify the drawing. - * @param {ol.MapBrowserEvent} event Event. - * @private - */ -ol.interaction.Draw.prototype.modifyDrawing_ = function(event) { - var coordinate = event.getCoordinate(); - var geometry = this.sketchFeature_.getGeometry(); - var coordinates, last; - if (this.mode_ === ol.interaction.DrawMode.POINT) { - goog.asserts.assertInstanceof(geometry, ol.geom.Point); - last = geometry.getCoordinates(); - last[0] = coordinate[0]; - last[1] = coordinate[1]; - geometry.setCoordinates(last); - } else { - if (this.mode_ === ol.interaction.DrawMode.LINESTRING) { - goog.asserts.assertInstanceof(geometry, ol.geom.LineString); - coordinates = geometry.getCoordinates(); - } else { - goog.asserts.assert(this.mode_ === ol.interaction.DrawMode.POLYGON); - goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); - geometry = geometry.getRings()[0]; - goog.asserts.assertInstanceof(geometry, ol.geom.LinearRing); - coordinates = geometry.getCoordinates(); - } - if (this.atFinish_(event)) { - // snap to finish - coordinate = this.finishCoordinate_.slice(); - } - var point = this.sketchPoint_.getGeometry(); - goog.asserts.assertInstanceof(point, ol.geom.Point); - point.setCoordinates(coordinate); - last = coordinates[coordinates.length - 1]; - last[0] = coordinate[0]; - last[1] = coordinate[1]; - geometry.setCoordinates(coordinates); - } -}; - - -/** - * Add a new coordinate to the drawing. - * @param {ol.MapBrowserEvent} event Event. - * @private - */ -ol.interaction.Draw.prototype.addToDrawing_ = function(event) { - var coordinate = event.getCoordinate(); - var geometry = this.sketchFeature_.getGeometry(); - var coordinates, last; - if (this.mode_ === ol.interaction.DrawMode.LINESTRING) { - goog.asserts.assertInstanceof(geometry, ol.geom.LineString); - this.finishCoordinate_ = coordinate.slice(); - coordinates = geometry.getCoordinates(); - coordinates.push(coordinate.slice()); - geometry.setCoordinates(coordinates); - } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) { - goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); - var ring = geometry.getRings()[0]; - coordinates = ring.getCoordinates(); - coordinates.push(coordinate.slice()); - ring.setCoordinates(coordinates); - } -}; - - -/** - * Stop drawing and add the sketch feature to the target layer. - * @param {ol.MapBrowserEvent} event Event. - * @private - */ -ol.interaction.Draw.prototype.finishDrawing_ = function(event) { - var sketchFeature = this.abortDrawing_(); - goog.asserts.assert(!goog.isNull(sketchFeature)); - sketchFeature.setRenderIntent(ol.FeatureRenderIntent.DEFAULT); - var geometry = sketchFeature.getGeometry(); - var coordinates = geometry.getCoordinates(); - if (this.mode_ === ol.interaction.DrawMode.LINESTRING) { - goog.asserts.assertInstanceof(geometry, ol.geom.LineString); - // remove the redundant last point - coordinates.pop(); - geometry.setCoordinates(coordinates); - } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) { - goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); - // force clockwise order for exterior ring - sketchFeature.setGeometry(new ol.geom.Polygon(coordinates)); - } - // cast multi-part geometries - if (this.type_ === ol.geom.GeometryType.MULTI_POINT) { - sketchFeature.setGeometry(new ol.geom.MultiPoint([coordinates])); - } else if (this.type_ === ol.geom.GeometryType.MULTI_LINE_STRING) { - sketchFeature.setGeometry(new ol.geom.MultiLineString([coordinates])); - } else if (this.type_ === ol.geom.GeometryType.MULTI_POLYGON) { - sketchFeature.setGeometry(new ol.geom.MultiPolygon([coordinates])); - } - this.layer_.getVectorSource().addFeatures([sketchFeature]); -}; - - -/** - * Stop drawing without adding the sketch feature to the target layer. - * @return {ol.Feature} The sketch feature (or null if none). - * @private - */ -ol.interaction.Draw.prototype.abortDrawing_ = function() { - this.finishCoordinate_ = null; - var sketchFeature = this.sketchFeature_; - if (!goog.isNull(sketchFeature)) { - var features = [sketchFeature]; - this.sketchFeature_ = null; - if (this.mode_ !== ol.interaction.DrawMode.POINT) { - features.push(this.sketchPoint_); - this.sketchPoint_ = null; - } - this.sketchLayer_.getVectorSource().removeFeatures(features); - } - return sketchFeature; -}; - - -/** - * Get the drawing mode. The mode for mult-part geometries is the same as for - * their single-part cousins. - * @param {ol.geom.GeometryType} type Geometry type. - * @return {ol.interaction.DrawMode} Drawing mode. - * @private - */ -ol.interaction.Draw.getMode_ = function(type) { - var mode; - if (type === ol.geom.GeometryType.POINT || - type === ol.geom.GeometryType.MULTI_POINT) { - mode = ol.interaction.DrawMode.POINT; - } else if (type === ol.geom.GeometryType.LINE_STRING || - type === ol.geom.GeometryType.MULTI_LINE_STRING) { - mode = ol.interaction.DrawMode.LINESTRING; - } else if (type === ol.geom.GeometryType.POLYGON || - type === ol.geom.GeometryType.MULTI_POLYGON) { - mode = ol.interaction.DrawMode.POLYGON; - } - goog.asserts.assert(goog.isDef(mode)); - return mode; -}; - - -/** - * Draw mode. This collapses multi-part geometry types with their single-part - * cousins. - * @enum {string} - */ -ol.interaction.DrawMode = { - POINT: 'point', - LINESTRING: 'linestring', - POLYGON: 'polygon' -};