Use geometry type enum for configuring draw interaction

This allows us to cast single-part geometries to multi-part types before adding features to the target layer.  This doesn't yet allow for drawing multi-part geometries with multiple parts.  That can be handled separately.
This commit is contained in:
Tim Schaub
2013-11-12 11:30:32 -07:00
parent 8194ba9f0a
commit 5a898884ec
4 changed files with 61 additions and 12 deletions

View File

@@ -35,7 +35,7 @@
<p id="shortdesc">Example of using the Draw interaction.</p> <p id="shortdesc">Example of using the Draw interaction.</p>
<form class="form-inline"> <form class="form-inline">
<label>Geometry type &nbsp;</label> <label>Geometry type &nbsp;</label>
<select id="mode"> <select id="type">
<option value="polygon">Polygon</option> <option value="polygon">Polygon</option>
<option value="linestring">Linestring</option> <option value="linestring">Linestring</option>
<option value="point">Point</option> <option value="point">Point</option>

View File

@@ -97,24 +97,24 @@ var map = new ol.Map({
}) })
}); });
var modeSelect = document.getElementById('mode'); var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later var draw; // global so we can remove it later
function addInteraction() { function addInteraction() {
draw = new ol.interaction.Draw({ draw = new ol.interaction.Draw({
layer: vector, layer: vector,
mode: /** @type {ol.interaction.DrawMode} */ type: /** @type {ol.geom.GeometryType} */
(modeSelect.options[modeSelect.selectedIndex].value) (typeSelect.options[typeSelect.selectedIndex].value)
}); });
map.addInteraction(draw); map.addInteraction(draw);
} }
/** /**
* Let user change the draw mode. * Let user change the geometry type.
* @param {Event} e Change event. * @param {Event} e Change event.
*/ */
modeSelect.onchange = function(e) { typeSelect.onchange = function(e) {
map.removeInteraction(draw); map.removeInteraction(draw);
addInteraction(); addInteraction();
}; };

View File

@@ -346,8 +346,8 @@
* @property {ol.layer.Vector} layer Destination layer for the features. * @property {ol.layer.Vector} layer Destination layer for the features.
* @property {number|undefined} snapTolerance Pixel distance for snapping to the * @property {number|undefined} snapTolerance Pixel distance for snapping to the
* drawing finish (default is 12). * drawing finish (default is 12).
* @property {ol.interaction.DrawMode} mode Drawing mode ('point', 'linestring', * @property {ol.geom.GeometryType} type Drawing type ('point', 'linestring',
* or 'polygon'). * 'polygon', 'multipoint', 'multilinestring', or 'multipolygon').
* @todo stability experimental * @todo stability experimental
*/ */

View File

@@ -1,5 +1,4 @@
goog.provide('ol.interaction.Draw'); goog.provide('ol.interaction.Draw');
goog.provide('ol.interaction.DrawMode');
goog.require('goog.asserts'); goog.require('goog.asserts');
@@ -8,7 +7,11 @@ goog.require('ol.Feature');
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.MapBrowserEvent'); goog.require('ol.MapBrowserEvent');
goog.require('ol.MapBrowserEvent.EventType'); goog.require('ol.MapBrowserEvent.EventType');
goog.require('ol.geom.GeometryType');
goog.require('ol.geom.LineString'); goog.require('ol.geom.LineString');
goog.require('ol.geom.MultiLineString');
goog.require('ol.geom.MultiPoint');
goog.require('ol.geom.MultiPolygon');
goog.require('ol.geom.Point'); goog.require('ol.geom.Point');
goog.require('ol.geom.Polygon'); goog.require('ol.geom.Polygon');
goog.require('ol.interaction.Interaction'); goog.require('ol.interaction.Interaction');
@@ -50,11 +53,18 @@ ol.interaction.Draw = function(options) {
options.snapTolerance : 12; options.snapTolerance : 12;
/** /**
* Draw mode. * Geometry type.
* @type {ol.geom.GeometryType}
* @private
*/
this.type_ = options.type;
/**
* Drawing mode (derived from geometry type.
* @type {ol.interaction.DrawMode} * @type {ol.interaction.DrawMode}
* @private * @private
*/ */
this.mode_ = options.mode; this.mode_ = ol.interaction.Draw.getMode_(this.type_);
/** /**
* Finish coordinate for the feature (first point for polygons, last point for * Finish coordinate for the feature (first point for polygons, last point for
@@ -322,6 +332,20 @@ ol.interaction.Draw.prototype.finishDrawing_ = function(event) {
coordinates.pop(); coordinates.pop();
geometry.setCoordinates(coordinates); geometry.setCoordinates(coordinates);
} }
// cast multi-part geometries
if (this.type_ === ol.geom.GeometryType.MULTIPOINT) {
sketchFeature.setGeometry(
new ol.geom.MultiPoint(
[sketchFeature.getGeometry().getCoordinates()]));
} else if (this.type_ === ol.geom.GeometryType.MULTILINESTRING) {
sketchFeature.setGeometry(
new ol.geom.MultiLineString(
[sketchFeature.getGeometry().getCoordinates()]));
} else if (this.type_ === ol.geom.GeometryType.MULTIPOLYGON) {
sketchFeature.setGeometry(
new ol.geom.MultiPolygon(
[sketchFeature.getGeometry().getCoordinates()]));
}
this.layer_.addFeatures([sketchFeature]); this.layer_.addFeatures([sketchFeature]);
}; };
@@ -348,7 +372,32 @@ ol.interaction.Draw.prototype.abortDrawing_ = function() {
/** /**
* Draw mode. * 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.MULTIPOINT) {
mode = ol.interaction.DrawMode.POINT;
} else if (type === ol.geom.GeometryType.LINESTRING ||
type === ol.geom.GeometryType.MULTILINESTRING) {
mode = ol.interaction.DrawMode.LINESTRING;
} else if (type === ol.geom.GeometryType.POLYGON ||
type === ol.geom.GeometryType.MULTIPOLYGON) {
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} * @enum {string}
*/ */
ol.interaction.DrawMode = { ol.interaction.DrawMode = {