| New file |
| | |
|---|
| | | var __extends = (this && this.__extends) || (function() { |
|---|
| | | var extendStatics = function(d, b) { |
|---|
| | | extendStatics = Object.setPrototypeOf || |
|---|
| | | ({ __proto__: [] } |
|---|
| | | instanceof Array && function(d, b) { d.__proto__ = b; }) || |
|---|
| | | function(d, b) { for (var p in b) |
|---|
| | | if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; |
|---|
| | | return extendStatics(d, b); |
|---|
| | | }; |
|---|
| | | return function(d, b) { |
|---|
| | | if (typeof b !== "function" && b !== null) |
|---|
| | | throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); |
|---|
| | | extendStatics(d, b); |
|---|
| | | |
|---|
| | | function __() { this.constructor = d; } |
|---|
| | | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); |
|---|
| | | }; |
|---|
| | | })(); |
|---|
| | | /** |
|---|
| | | * @module ol/interaction/Draw |
|---|
| | | */ |
|---|
| | | import Circle from 'ol/geom/Circle.js'; |
|---|
| | | import Event from 'ol/events/Event.js'; |
|---|
| | | import EventType from 'ol/events/EventType.js'; |
|---|
| | | import Feature from 'ol/Feature.js'; |
|---|
| | | import GeometryType from 'ol/geom/GeometryType.js'; |
|---|
| | | import InteractionProperty from 'ol/interaction/Property.js'; |
|---|
| | | import LineString from 'ol/geom/LineString.js'; |
|---|
| | | import MapBrowserEvent from 'ol/MapBrowserEvent.js'; |
|---|
| | | import MapBrowserEventType from 'ol/MapBrowserEventType.js'; |
|---|
| | | import MultiLineString from 'ol/geom/MultiLineString.js'; |
|---|
| | | import MultiPoint from 'ol/geom/MultiPoint.js'; |
|---|
| | | import MultiPolygon from 'ol/geom/MultiPolygon.js'; |
|---|
| | | import Point from 'ol/geom/Point.js'; |
|---|
| | | import PointerInteraction from 'ol/interaction/Pointer.js'; |
|---|
| | | import Polygon, { fromCircle, makeRegular } from 'ol/geom/Polygon.js'; |
|---|
| | | import VectorLayer from 'ol/layer/Vector.js'; |
|---|
| | | import VectorSource from 'ol/source/Vector.js'; |
|---|
| | | import { FALSE, TRUE } from 'ol/functions.js'; |
|---|
| | | import { always, noModifierKeys, shiftKeyOnly } from 'ol/events/condition.js'; |
|---|
| | | import { boundingExtent, getBottomLeft, getBottomRight, getTopLeft, getTopRight, } from 'ol/extent.js'; |
|---|
| | | import { createEditingStyle } from 'ol/style/Style.js'; |
|---|
| | | import { fromUserCoordinate, getUserProjection } from 'ol/proj.js'; |
|---|
| | | import { squaredDistance as squaredCoordinateDistance } from 'ol/coordinate.js'; |
|---|
| | | /** |
|---|
| | | * @typedef {Object} Options |
|---|
| | | * @property {import("../geom/GeometryType.js").default} type Geometry type of |
|---|
| | | * the geometries being drawn with this instance. |
|---|
| | | * @property {number} [clickTolerance=6] The maximum distance in pixels between |
|---|
| | | * "down" and "up" for a "up" event to be considered a "click" event and |
|---|
| | | * actually add a point/vertex to the geometry being drawn. The default of `6` |
|---|
| | | * was chosen for the draw interaction to behave correctly on mouse as well as |
|---|
| | | * on touch devices. |
|---|
| | | * @property {import("../Collection.js").default<Feature>} [features] |
|---|
| | | * Destination collection for the drawn features. |
|---|
| | | * @property {VectorSource} [source] Destination source for |
|---|
| | | * the drawn features. |
|---|
| | | * @property {number} [dragVertexDelay=500] Delay in milliseconds after pointerdown |
|---|
| | | * before the current vertex can be dragged to its exact position. |
|---|
| | | * @property {number} [snapTolerance=12] Pixel distance for snapping to the |
|---|
| | | * drawing finish. Must be greater than `0`. |
|---|
| | | * @property {boolean} [stopClick=false] Stop click, singleclick, and |
|---|
| | | * doubleclick events from firing during drawing. |
|---|
| | | * @property {number} [maxPoints] The number of points that can be drawn before |
|---|
| | | * a polygon ring or line string is finished. By default there is no |
|---|
| | | * restriction. |
|---|
| | | * @property {number} [minPoints] The number of points that must be drawn |
|---|
| | | * before a polygon ring or line string can be finished. Default is `3` for |
|---|
| | | * polygon rings and `2` for line strings. |
|---|
| | | * @property {import("../events/condition.js").Condition} [finishCondition] A function |
|---|
| | | * that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a |
|---|
| | | * boolean to indicate whether the drawing can be finished. Not used when drawing |
|---|
| | | * POINT or MULTI_POINT geometries. |
|---|
| | | * @property {import("../style/Style.js").StyleLike} [style] |
|---|
| | | * Style for sketch features. |
|---|
| | | * @property {GeometryFunction} [geometryFunction] |
|---|
| | | * Function that is called when a geometry's coordinates are updated. |
|---|
| | | * @property {string} [geometryName] Geometry name to use for features created |
|---|
| | | * by the draw interaction. |
|---|
| | | * @property {import("../events/condition.js").Condition} [condition] A function that |
|---|
| | | * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a |
|---|
| | | * boolean to indicate whether that event should be handled. |
|---|
| | | * By default {@link module:ol/events/condition.noModifierKeys}, i.e. a click, |
|---|
| | | * adds a vertex or deactivates freehand drawing. |
|---|
| | | * @property {boolean} [freehand=false] Operate in freehand mode for lines, |
|---|
| | | * polygons, and circles. This makes the interaction always operate in freehand |
|---|
| | | * mode and takes precedence over any `freehandCondition` option. |
|---|
| | | * @property {import("../events/condition.js").Condition} [freehandCondition] |
|---|
| | | * Condition that activates freehand drawing for lines and polygons. This |
|---|
| | | * function takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and |
|---|
| | | * returns a boolean to indicate whether that event should be handled. The |
|---|
| | | * default is {@link module:ol/events/condition.shiftKeyOnly}, meaning that the |
|---|
| | | * Shift key activates freehand drawing. |
|---|
| | | * @property {boolean} [wrapX=false] Wrap the world horizontally on the sketch |
|---|
| | | * overlay. |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * Coordinate type when drawing points. |
|---|
| | | * @typedef {import("../coordinate.js").Coordinate} PointCoordType |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * Coordinate type when drawing lines. |
|---|
| | | * @typedef {Array<import("../coordinate.js").Coordinate>} LineCoordType |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * Coordinate type when drawing polygons. |
|---|
| | | * @typedef {Array<Array<import("../coordinate.js").Coordinate>>} PolyCoordType |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * Types used for drawing coordinates. |
|---|
| | | * @typedef {PointCoordType|LineCoordType|PolyCoordType} SketchCoordType |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * Function that takes an array of coordinates and an optional existing geometry |
|---|
| | | * and a projection as arguments, and returns a geometry. The optional existing |
|---|
| | | * geometry is the geometry that is returned when the function is called without |
|---|
| | | * a second argument. |
|---|
| | | * @typedef {function(!SketchCoordType, import("../geom/SimpleGeometry.js").default, |
|---|
| | | * import("../proj/Projection.js").default): |
|---|
| | | * import("../geom/SimpleGeometry.js").default} GeometryFunction |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * Draw mode. This collapses multi-part geometry types with their single-part |
|---|
| | | * cousins. |
|---|
| | | * @enum {string} |
|---|
| | | */ |
|---|
| | | var Mode = { |
|---|
| | | POINT: 'Point', |
|---|
| | | LINE_STRING: 'LineString', |
|---|
| | | POLYGON: 'Polygon', |
|---|
| | | CIRCLE: 'Circle', |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * @enum {string} |
|---|
| | | */ |
|---|
| | | var DrawEventType = { |
|---|
| | | /** |
|---|
| | | * Triggered upon feature draw start |
|---|
| | | * @event DrawEvent#drawstart |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | DRAWSTART: 'drawstart', |
|---|
| | | /** |
|---|
| | | * Triggered upon feature draw end |
|---|
| | | * @event DrawEvent#drawend |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | DRAWEND: 'drawend', |
|---|
| | | /** |
|---|
| | | * Triggered upon feature draw abortion |
|---|
| | | * @event DrawEvent#drawabort |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | DRAWABORT: 'drawabort', |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * @classdesc |
|---|
| | | * Events emitted by {@link module:ol/interaction/Draw~Draw} instances are |
|---|
| | | * instances of this type. |
|---|
| | | */ |
|---|
| | | var DrawEvent = /** @class */ (function(_super) { |
|---|
| | | __extends(DrawEvent, _super); |
|---|
| | | /** |
|---|
| | | * @param {DrawEventType} type Type. |
|---|
| | | * @param {Feature} feature The feature drawn. |
|---|
| | | */ |
|---|
| | | function DrawEvent(type, feature) { |
|---|
| | | var _this = _super.call(this, type) || this; |
|---|
| | | /** |
|---|
| | | * The feature being drawn. |
|---|
| | | * @type {Feature} |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | _this.feature = feature; |
|---|
| | | return _this; |
|---|
| | | } |
|---|
| | | return DrawEvent; |
|---|
| | | }(Event)); |
|---|
| | | export { DrawEvent }; |
|---|
| | | /*** |
|---|
| | | * @template Return |
|---|
| | | * @typedef {import("../Observable").OnSignature<import("../Observable").EventTypes, import("../events/Event.js").default, Return> & |
|---|
| | | * import("../Observable").OnSignature<import("../ObjectEventType").Types| |
|---|
| | | * 'change:active', import("../Object").ObjectEvent, Return> & |
|---|
| | | * import("../Observable").OnSignature<'drawabort'|'drawend'|'drawstart', DrawEvent, Return> & |
|---|
| | | * import("../Observable").CombinedOnSignature<import("../Observable").EventTypes|import("../ObjectEventType").Types| |
|---|
| | | * 'change:active'|'drawabort'|'drawend'|'drawstart', Return>} DrawOnSignature |
|---|
| | | */ |
|---|
| | | /** |
|---|
| | | * @classdesc |
|---|
| | | * Interaction for drawing feature geometries. |
|---|
| | | * |
|---|
| | | * @fires DrawEvent |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | var Draw = /** @class */ (function(_super) { |
|---|
| | | __extends(Draw, _super); |
|---|
| | | /** |
|---|
| | | * @param {Options} options Options. |
|---|
| | | */ |
|---|
| | | function Draw(options) { |
|---|
| | | var _this = this; |
|---|
| | | var pointerOptions = /** @type {import("./Pointer.js").Options} */ (options); |
|---|
| | | if (!pointerOptions.stopDown) { |
|---|
| | | pointerOptions.stopDown = FALSE; |
|---|
| | | } |
|---|
| | | _this = _super.call(this, pointerOptions) || this; |
|---|
| | | /*** |
|---|
| | | * 自定义输入 |
|---|
| | | */ |
|---|
| | | _this._coordinate = options.coordinate || function() { return false }; |
|---|
| | | /*** |
|---|
| | | * 自定义输出 |
|---|
| | | */ |
|---|
| | | _this._coordinateOver = options.coordinateOver || function() { return false }; |
|---|
| | | /*** |
|---|
| | | * @type {DrawOnSignature<import("../Observable").OnReturn>} |
|---|
| | | */ |
|---|
| | | _this.on; |
|---|
| | | /*** |
|---|
| | | * @type {DrawOnSignature<import("../Observable").OnReturn>} |
|---|
| | | */ |
|---|
| | | _this.once; |
|---|
| | | /*** |
|---|
| | | * @type {DrawOnSignature<void>} |
|---|
| | | */ |
|---|
| | | _this.un; |
|---|
| | | /** |
|---|
| | | * @type {boolean} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.shouldHandle_ = false; |
|---|
| | | /** |
|---|
| | | * @type {import("../pixel.js").Pixel} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.downPx_ = null; |
|---|
| | | /** |
|---|
| | | * @type {?} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.downTimeout_; |
|---|
| | | /** |
|---|
| | | * @type {number|undefined} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.lastDragTime_; |
|---|
| | | /** |
|---|
| | | * Pointer type of the last pointermove event |
|---|
| | | * @type {string} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.pointerType_; |
|---|
| | | /** |
|---|
| | | * @type {boolean} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.freehand_ = false; |
|---|
| | | /** |
|---|
| | | * Target source for drawn features. |
|---|
| | | * @type {VectorSource} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.source_ = options.source ? options.source : null; |
|---|
| | | /** |
|---|
| | | * Target collection for drawn features. |
|---|
| | | * @type {import("../Collection.js").default<Feature>} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.features_ = options.features ? options.features : null; |
|---|
| | | /** |
|---|
| | | * Pixel distance for snapping. |
|---|
| | | * @type {number} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.snapTolerance_ = options.snapTolerance ? options.snapTolerance : 12; |
|---|
| | | /** |
|---|
| | | * Geometry type. |
|---|
| | | * @type {import("../geom/GeometryType.js").default} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.type_ = /** @type {import("../geom/GeometryType.js").default} */ (options.type); |
|---|
| | | /** |
|---|
| | | * Drawing mode (derived from geometry type. |
|---|
| | | * @type {Mode} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.mode_ = getMode(_this.type_); |
|---|
| | | /** |
|---|
| | | * Stop click, singleclick, and doubleclick events from firing during drawing. |
|---|
| | | * Default is `false`. |
|---|
| | | * @type {boolean} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.stopClick_ = !!options.stopClick; |
|---|
| | | /** |
|---|
| | | * The number of points that must be drawn before a polygon ring or line |
|---|
| | | * string can be finished. The default is 3 for polygon rings and 2 for |
|---|
| | | * line strings. |
|---|
| | | * @type {number} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.minPoints_ = options.minPoints ? |
|---|
| | | options.minPoints : |
|---|
| | | _this.mode_ === Mode.POLYGON ? |
|---|
| | | 3 : |
|---|
| | | 2; |
|---|
| | | /** |
|---|
| | | * The number of points that can be drawn before a polygon ring or line string |
|---|
| | | * is finished. The default is no restriction. |
|---|
| | | * @type {number} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.maxPoints_ = |
|---|
| | | _this.mode_ === Mode.CIRCLE ? |
|---|
| | | 2 : |
|---|
| | | options.maxPoints ? |
|---|
| | | options.maxPoints : |
|---|
| | | Infinity; |
|---|
| | | /** |
|---|
| | | * A function to decide if a potential finish coordinate is permissible |
|---|
| | | * @private |
|---|
| | | * @type {import("../events/condition.js").Condition} |
|---|
| | | */ |
|---|
| | | _this.finishCondition_ = options.finishCondition ? |
|---|
| | | options.finishCondition : |
|---|
| | | TRUE; |
|---|
| | | var geometryFunction = options.geometryFunction; |
|---|
| | | if (!geometryFunction) { |
|---|
| | | var mode_1 = _this.mode_; |
|---|
| | | if (mode_1 === Mode.CIRCLE) { |
|---|
| | | /** |
|---|
| | | * @param {!LineCoordType} coordinates The coordinates. |
|---|
| | | * @param {import("../geom/SimpleGeometry.js").default|undefined} geometry Optional geometry. |
|---|
| | | * @param {import("../proj/Projection.js").default} projection The view projection. |
|---|
| | | * @return {import("../geom/SimpleGeometry.js").default} A geometry. |
|---|
| | | */ |
|---|
| | | geometryFunction = function(coordinates, geometry, projection) { |
|---|
| | | var circle = geometry ? |
|---|
| | | /** @type {Circle} */ (geometry) : |
|---|
| | | new Circle([NaN, NaN]); |
|---|
| | | var center = fromUserCoordinate(coordinates[0], projection); |
|---|
| | | var squaredLength = squaredCoordinateDistance(center, fromUserCoordinate(coordinates[coordinates.length - 1], projection)); |
|---|
| | | circle.setCenterAndRadius(center, Math.sqrt(squaredLength)); |
|---|
| | | var userProjection = getUserProjection(); |
|---|
| | | if (userProjection) { |
|---|
| | | circle.transform(projection, userProjection); |
|---|
| | | } |
|---|
| | | return circle; |
|---|
| | | }; |
|---|
| | | } else { |
|---|
| | | var Constructor_1; |
|---|
| | | if (mode_1 === Mode.POINT) { |
|---|
| | | Constructor_1 = Point; |
|---|
| | | } else if (mode_1 === Mode.LINE_STRING) { |
|---|
| | | Constructor_1 = LineString; |
|---|
| | | } else if (mode_1 === Mode.POLYGON) { |
|---|
| | | Constructor_1 = Polygon; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * @param {!LineCoordType} coordinates The coordinates. |
|---|
| | | * @param {import("../geom/SimpleGeometry.js").default|undefined} geometry Optional geometry. |
|---|
| | | * @param {import("../proj/Projection.js").default} projection The view projection. |
|---|
| | | * @return {import("../geom/SimpleGeometry.js").default} A geometry. |
|---|
| | | */ |
|---|
| | | geometryFunction = function(coordinates, geometry, projection) { |
|---|
| | | if (geometry) { |
|---|
| | | if (mode_1 === Mode.POLYGON) { |
|---|
| | | if (coordinates[0].length) { |
|---|
| | | // Add a closing coordinate to match the first |
|---|
| | | geometry.setCoordinates([ |
|---|
| | | coordinates[0].concat([coordinates[0][0]]), |
|---|
| | | ]); |
|---|
| | | } else { |
|---|
| | | geometry.setCoordinates([]); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | geometry.setCoordinates(coordinates); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | geometry = new Constructor_1(coordinates); |
|---|
| | | } |
|---|
| | | return geometry; |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * @type {GeometryFunction} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.geometryFunction_ = geometryFunction; |
|---|
| | | /** |
|---|
| | | * @type {number} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.dragVertexDelay_ = |
|---|
| | | options.dragVertexDelay !== undefined ? options.dragVertexDelay : 500; |
|---|
| | | /** |
|---|
| | | * Finish coordinate for the feature (first point for polygons, last point for |
|---|
| | | * linestrings). |
|---|
| | | * @type {import("../coordinate.js").Coordinate} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.finishCoordinate_ = null; |
|---|
| | | /** |
|---|
| | | * Sketch feature. |
|---|
| | | * @type {Feature} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.sketchFeature_ = null; |
|---|
| | | /** |
|---|
| | | * Sketch point. |
|---|
| | | * @type {Feature<Point>} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.sketchPoint_ = null; |
|---|
| | | /** |
|---|
| | | * Sketch coordinates. Used when drawing a line or polygon. |
|---|
| | | * @type {SketchCoordType} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.sketchCoords_ = null; |
|---|
| | | /** |
|---|
| | | * Sketch line. Used when drawing polygon. |
|---|
| | | * @type {Feature<LineString>} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.sketchLine_ = null; |
|---|
| | | /** |
|---|
| | | * Sketch line coordinates. Used when drawing a polygon or circle. |
|---|
| | | * @type {LineCoordType} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.sketchLineCoords_ = null; |
|---|
| | | /** |
|---|
| | | * Squared tolerance for handling up events. If the squared distance |
|---|
| | | * between a down and up event is greater than this tolerance, up events |
|---|
| | | * will not be handled. |
|---|
| | | * @type {number} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.squaredClickTolerance_ = options.clickTolerance ? |
|---|
| | | options.clickTolerance * options.clickTolerance : |
|---|
| | | 36; |
|---|
| | | /** |
|---|
| | | * Draw overlay where our sketch features are drawn. |
|---|
| | | * @type {VectorLayer} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.overlay_ = new VectorLayer({ |
|---|
| | | source: new VectorSource({ |
|---|
| | | useSpatialIndex: false, |
|---|
| | | wrapX: options.wrapX ? options.wrapX : false, |
|---|
| | | }), |
|---|
| | | style: options.style ? options.style : getDefaultStyleFunction(), |
|---|
| | | updateWhileInteracting: true, |
|---|
| | | }); |
|---|
| | | /** |
|---|
| | | * Name of the geometry attribute for newly created features. |
|---|
| | | * @type {string|undefined} |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | _this.geometryName_ = options.geometryName; |
|---|
| | | /** |
|---|
| | | * @private |
|---|
| | | * @type {import("../events/condition.js").Condition} |
|---|
| | | */ |
|---|
| | | _this.condition_ = options.condition ? options.condition : noModifierKeys; |
|---|
| | | /** |
|---|
| | | * @private |
|---|
| | | * @type {import("../events/condition.js").Condition} |
|---|
| | | */ |
|---|
| | | _this.freehandCondition_; |
|---|
| | | if (options.freehand) { |
|---|
| | | _this.freehandCondition_ = always; |
|---|
| | | } else { |
|---|
| | | _this.freehandCondition_ = options.freehandCondition ? |
|---|
| | | options.freehandCondition : |
|---|
| | | shiftKeyOnly; |
|---|
| | | } |
|---|
| | | _this.addChangeListener(InteractionProperty.ACTIVE, _this.updateState_); |
|---|
| | | return _this; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * Remove the interaction from its current map and attach it to the new map. |
|---|
| | | * Subclasses may set up event handlers to get notified about changes to |
|---|
| | | * the map here. |
|---|
| | | * @param {import("../PluggableMap.js").default} map Map. |
|---|
| | | */ |
|---|
| | | Draw.prototype.setMap = function(map) { |
|---|
| | | _super.prototype.setMap.call(this, map); |
|---|
| | | this.updateState_(); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Get the overlay layer that this interaction renders sketch features to. |
|---|
| | | * @return {VectorLayer} Overlay layer. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.getOverlay = function() { |
|---|
| | | return this.overlay_; |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Handles the {@link module:ol/MapBrowserEvent map browser event} and may actually draw or finish the drawing. |
|---|
| | | * @param {import("../MapBrowserEvent.js").default} event Map browser event. |
|---|
| | | * @return {boolean} `false` to stop event propagation. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.handleEvent = function(event) { |
|---|
| | | if (event.originalEvent.type === EventType.CONTEXTMENU) { |
|---|
| | | // Avoid context menu for long taps when drawing on mobile |
|---|
| | | event.originalEvent.preventDefault(); |
|---|
| | | } |
|---|
| | | this.freehand_ = |
|---|
| | | this.mode_ !== Mode.POINT && this.freehandCondition_(event); |
|---|
| | | var move = event.type === MapBrowserEventType.POINTERMOVE; |
|---|
| | | var pass = true; |
|---|
| | | if (!this.freehand_ && |
|---|
| | | this.lastDragTime_ && |
|---|
| | | event.type === MapBrowserEventType.POINTERDRAG) { |
|---|
| | | var now = Date.now(); |
|---|
| | | if (now - this.lastDragTime_ >= this.dragVertexDelay_) { |
|---|
| | | this.downPx_ = event.pixel; |
|---|
| | | this.shouldHandle_ = !this.freehand_; |
|---|
| | | move = true; |
|---|
| | | } else { |
|---|
| | | this.lastDragTime_ = undefined; |
|---|
| | | } |
|---|
| | | if (this.shouldHandle_ && this.downTimeout_ !== undefined) { |
|---|
| | | clearTimeout(this.downTimeout_); |
|---|
| | | this.downTimeout_ = undefined; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.freehand_ && |
|---|
| | | event.type === MapBrowserEventType.POINTERDRAG && |
|---|
| | | this.sketchFeature_ !== null) { |
|---|
| | | this.addToDrawing_(event.coordinate); |
|---|
| | | pass = false; |
|---|
| | | } else if (this.freehand_ && |
|---|
| | | event.type === MapBrowserEventType.POINTERDOWN) { |
|---|
| | | pass = false; |
|---|
| | | } else if (move && this.getPointerCount() < 2) { |
|---|
| | | pass = event.type === MapBrowserEventType.POINTERMOVE; |
|---|
| | | if (pass && this.freehand_) { |
|---|
| | | this.handlePointerMove_(event); |
|---|
| | | if (this.shouldHandle_) { |
|---|
| | | // Avoid page scrolling when freehand drawing on mobile |
|---|
| | | event.originalEvent.preventDefault(); |
|---|
| | | } |
|---|
| | | } else if (event.originalEvent.pointerType === 'mouse' || |
|---|
| | | (event.type === MapBrowserEventType.POINTERDRAG && |
|---|
| | | this.downTimeout_ === undefined)) { |
|---|
| | | this.handlePointerMove_(event); |
|---|
| | | } |
|---|
| | | } else if (event.type === MapBrowserEventType.DBLCLICK) { |
|---|
| | | pass = false; |
|---|
| | | } |
|---|
| | | return _super.prototype.handleEvent.call(this, event) && pass; |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Handle pointer down events. |
|---|
| | | * @param {import("../MapBrowserEvent.js").default} event Event. |
|---|
| | | * @return {boolean} If the event was consumed. |
|---|
| | | */ |
|---|
| | | Draw.prototype.handleDownEvent = function(event) { |
|---|
| | | this.shouldHandle_ = !this.freehand_; |
|---|
| | | if (this.freehand_) { |
|---|
| | | this.downPx_ = event.pixel; |
|---|
| | | if (!this.finishCoordinate_) { |
|---|
| | | this.startDrawing_(event.coordinate); |
|---|
| | | } |
|---|
| | | return true; |
|---|
| | | } else if (this.condition_(event)) { |
|---|
| | | this.lastDragTime_ = Date.now(); |
|---|
| | | this.downTimeout_ = setTimeout(function() { |
|---|
| | | this.handlePointerMove_(new MapBrowserEvent(MapBrowserEventType.POINTERMOVE, event.map, event.originalEvent, false, event.frameState)); |
|---|
| | | }.bind(this), this.dragVertexDelay_); |
|---|
| | | this.downPx_ = event.pixel; |
|---|
| | | return true; |
|---|
| | | } else { |
|---|
| | | this.lastDragTime_ = undefined; |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Handle pointer up events. |
|---|
| | | * @param {import("../MapBrowserEvent.js").default} event Event. |
|---|
| | | * @return {boolean} If the event was consumed. |
|---|
| | | */ |
|---|
| | | Draw.prototype.handleUpEvent = function(event) { |
|---|
| | | var pass = true; |
|---|
| | | if (this.getPointerCount() === 0) { |
|---|
| | | if (this.downTimeout_) { |
|---|
| | | clearTimeout(this.downTimeout_); |
|---|
| | | this.downTimeout_ = undefined; |
|---|
| | | } |
|---|
| | | this.handlePointerMove_(event); |
|---|
| | | if (this.shouldHandle_) { |
|---|
| | | var startingToDraw = !this.finishCoordinate_; |
|---|
| | | if (startingToDraw) { |
|---|
| | | this.startDrawing_(event.coordinate); |
|---|
| | | } |
|---|
| | | if (!startingToDraw && this.freehand_) { |
|---|
| | | this.finishDrawing(); |
|---|
| | | } else if (!this.freehand_ && |
|---|
| | | (!startingToDraw || this.mode_ === Mode.POINT)) { |
|---|
| | | if (this.atFinish_(event.pixel)) { |
|---|
| | | if (this.finishCondition_(event)) { |
|---|
| | | this.finishDrawing(); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.addToDrawing_(event.coordinate); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | pass = false; |
|---|
| | | } else if (this.freehand_) { |
|---|
| | | this.abortDrawing(); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (!pass && this.stopClick_) { |
|---|
| | | event.preventDefault(); |
|---|
| | | } |
|---|
| | | return pass; |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Handle move events. |
|---|
| | | * @param {import("../MapBrowserEvent.js").default} event A move event. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.handlePointerMove_ = function(event) { |
|---|
| | | this.pointerType_ = event.originalEvent.pointerType; |
|---|
| | | if (this.downPx_ && |
|---|
| | | ((!this.freehand_ && this.shouldHandle_) || |
|---|
| | | (this.freehand_ && !this.shouldHandle_))) { |
|---|
| | | var downPx = this.downPx_; |
|---|
| | | var clickPx = event.pixel; |
|---|
| | | var dx = downPx[0] - clickPx[0]; |
|---|
| | | var dy = downPx[1] - clickPx[1]; |
|---|
| | | var squaredDistance = dx * dx + dy * dy; |
|---|
| | | this.shouldHandle_ = this.freehand_ ? |
|---|
| | | squaredDistance > this.squaredClickTolerance_ : |
|---|
| | | squaredDistance <= this.squaredClickTolerance_; |
|---|
| | | if (!this.shouldHandle_) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | if (this.finishCoordinate_) { |
|---|
| | | this.modifyDrawing_(event.coordinate); |
|---|
| | | } else { |
|---|
| | | this.createOrUpdateSketchPoint_(event.coordinate.slice()); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Determine if an event is within the snapping tolerance of the start coord. |
|---|
| | | * @param {import("../pixel.js").Pixel} pixel Pixel. |
|---|
| | | * @return {boolean} The event is within the snapping tolerance of the start. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.atFinish_ = function(pixel) { |
|---|
| | | var at = false; |
|---|
| | | if (this.sketchFeature_) { |
|---|
| | | var potentiallyDone = false; |
|---|
| | | var potentiallyFinishCoordinates = [this.finishCoordinate_]; |
|---|
| | | var mode = this.mode_; |
|---|
| | | if (mode === Mode.POINT) { |
|---|
| | | at = true; |
|---|
| | | } else if (mode === Mode.CIRCLE) { |
|---|
| | | at = this.sketchCoords_.length === 2; |
|---|
| | | } else if (mode === Mode.LINE_STRING) { |
|---|
| | | potentiallyDone = this.sketchCoords_.length > this.minPoints_; |
|---|
| | | } else if (mode === Mode.POLYGON) { |
|---|
| | | var sketchCoords = /** @type {PolyCoordType} */ (this.sketchCoords_); |
|---|
| | | potentiallyDone = sketchCoords[0].length > this.minPoints_; |
|---|
| | | potentiallyFinishCoordinates = [ |
|---|
| | | sketchCoords[0][0], |
|---|
| | | sketchCoords[0][sketchCoords[0].length - 2], |
|---|
| | | ]; |
|---|
| | | } |
|---|
| | | if (potentiallyDone) { |
|---|
| | | var map = this.getMap(); |
|---|
| | | for (var i = 0, ii = potentiallyFinishCoordinates.length; i < ii; i++) { |
|---|
| | | var finishCoordinate = potentiallyFinishCoordinates[i]; |
|---|
| | | var finishPixel = map.getPixelFromCoordinate(finishCoordinate); |
|---|
| | | var dx = pixel[0] - finishPixel[0]; |
|---|
| | | var dy = pixel[1] - finishPixel[1]; |
|---|
| | | var snapTolerance = this.freehand_ ? 1 : this.snapTolerance_; |
|---|
| | | at = Math.sqrt(dx * dx + dy * dy) <= snapTolerance; |
|---|
| | | if (at) { |
|---|
| | | this.finishCoordinate_ = finishCoordinate; |
|---|
| | | break; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | return at; |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * @param {import("../coordinate").Coordinate} coordinates Coordinate. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.createOrUpdateSketchPoint_ = function(coordinates) { |
|---|
| | | if (!this.sketchPoint_) { |
|---|
| | | this.sketchPoint_ = new Feature(new Point(coordinates)); |
|---|
| | | this.updateSketchFeatures_(); |
|---|
| | | } else { |
|---|
| | | var sketchPointGeom = this.sketchPoint_.getGeometry(); |
|---|
| | | sketchPointGeom.setCoordinates(coordinates); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * @param {import("../geom/Polygon.js").default} geometry Polygon geometry. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.createOrUpdateCustomSketchLine_ = function(geometry) { |
|---|
| | | if (!this.sketchLine_) { |
|---|
| | | this.sketchLine_ = new Feature(); |
|---|
| | | } |
|---|
| | | var ring = geometry.getLinearRing(0); |
|---|
| | | var sketchLineGeom = this.sketchLine_.getGeometry(); |
|---|
| | | if (!sketchLineGeom) { |
|---|
| | | sketchLineGeom = new LineString(ring.getFlatCoordinates(), ring.getLayout()); |
|---|
| | | this.sketchLine_.setGeometry(sketchLineGeom); |
|---|
| | | } else { |
|---|
| | | sketchLineGeom.setFlatCoordinates(ring.getLayout(), ring.getFlatCoordinates()); |
|---|
| | | sketchLineGeom.changed(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Start the drawing. |
|---|
| | | * @param {import("../coordinate.js").Coordinate} start Start coordinate. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.startDrawing_ = function(start) { |
|---|
| | | var projection = this.getMap().getView().getProjection(); |
|---|
| | | this.finishCoordinate_ = start; |
|---|
| | | this._coordinate(this.finishCoordinate_) |
|---|
| | | if (this.mode_ === Mode.POINT) { |
|---|
| | | this.sketchCoords_ = start.slice(); |
|---|
| | | } else if (this.mode_ === Mode.POLYGON) { |
|---|
| | | this.sketchCoords_ = [ |
|---|
| | | [start.slice(), start.slice()] |
|---|
| | | ]; |
|---|
| | | this.sketchLineCoords_ = this.sketchCoords_[0]; |
|---|
| | | } else { |
|---|
| | | this.sketchCoords_ = [start.slice(), start.slice()]; |
|---|
| | | } |
|---|
| | | if (this.sketchLineCoords_) { |
|---|
| | | this.sketchLine_ = new Feature(new LineString(this.sketchLineCoords_)); |
|---|
| | | } |
|---|
| | | var geometry = this.geometryFunction_(this.sketchCoords_, undefined, projection); |
|---|
| | | this.sketchFeature_ = new Feature(); |
|---|
| | | if (this.geometryName_) { |
|---|
| | | this.sketchFeature_.setGeometryName(this.geometryName_); |
|---|
| | | } |
|---|
| | | this.sketchFeature_.setGeometry(geometry); |
|---|
| | | this.updateSketchFeatures_(); |
|---|
| | | this.dispatchEvent(new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_)); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Modify the drawing. |
|---|
| | | * @param {import("../coordinate.js").Coordinate} coordinate Coordinate. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.modifyDrawing_ = function(coordinate) { |
|---|
| | | var map = this.getMap(); |
|---|
| | | var geometry = this.sketchFeature_.getGeometry(); |
|---|
| | | var projection = map.getView().getProjection(); |
|---|
| | | var coordinates, last; |
|---|
| | | if (this.mode_ === Mode.POINT) { |
|---|
| | | last = this.sketchCoords_; |
|---|
| | | } else if (this.mode_ === Mode.POLYGON) { |
|---|
| | | coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0]; |
|---|
| | | last = coordinates[coordinates.length - 1]; |
|---|
| | | if (this.atFinish_(map.getPixelFromCoordinate(coordinate))) { |
|---|
| | | // snap to finish |
|---|
| | | coordinate = this.finishCoordinate_.slice(); |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | coordinates = this.sketchCoords_; |
|---|
| | | last = coordinates[coordinates.length - 1]; |
|---|
| | | } |
|---|
| | | last[0] = coordinate[0]; |
|---|
| | | last[1] = coordinate[1]; |
|---|
| | | this.geometryFunction_( |
|---|
| | | /** @type {!LineCoordType} */ |
|---|
| | | (this.sketchCoords_), geometry, projection); |
|---|
| | | if (this.sketchPoint_) { |
|---|
| | | var sketchPointGeom = this.sketchPoint_.getGeometry(); |
|---|
| | | sketchPointGeom.setCoordinates(coordinate); |
|---|
| | | } |
|---|
| | | if (geometry.getType() === GeometryType.POLYGON && |
|---|
| | | this.mode_ !== Mode.POLYGON) { |
|---|
| | | this.createOrUpdateCustomSketchLine_( /** @type {Polygon} */ (geometry)); |
|---|
| | | } else if (this.sketchLineCoords_) { |
|---|
| | | var sketchLineGeom = this.sketchLine_.getGeometry(); |
|---|
| | | sketchLineGeom.setCoordinates(this.sketchLineCoords_); |
|---|
| | | } |
|---|
| | | this.updateSketchFeatures_(); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Add a new coordinate to the drawing. |
|---|
| | | * @param {!PointCoordType} coordinate Coordinate |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.addToDrawing_ = function(coordinate) { |
|---|
| | | var geometry = this.sketchFeature_.getGeometry(); |
|---|
| | | var projection = this.getMap().getView().getProjection(); |
|---|
| | | var done; |
|---|
| | | var coordinates; |
|---|
| | | var mode = this.mode_; |
|---|
| | | if (mode === Mode.LINE_STRING || mode === Mode.CIRCLE) { |
|---|
| | | this.finishCoordinate_ = coordinate.slice(); |
|---|
| | | coordinates = /** @type {LineCoordType} */ (this.sketchCoords_); |
|---|
| | | if (coordinates.length >= this.maxPoints_) { |
|---|
| | | if (this.freehand_) { |
|---|
| | | coordinates.pop(); |
|---|
| | | } else { |
|---|
| | | done = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | coordinates.push(coordinate.slice()); |
|---|
| | | this._coordinate(coordinate.slice()) |
|---|
| | | this.geometryFunction_(coordinates, geometry, projection); |
|---|
| | | } else if (mode === Mode.POLYGON) { |
|---|
| | | coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0]; |
|---|
| | | if (coordinates.length >= this.maxPoints_) { |
|---|
| | | if (this.freehand_) { |
|---|
| | | coordinates.pop(); |
|---|
| | | } else { |
|---|
| | | done = true; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | coordinates.push(coordinate.slice()); |
|---|
| | | if (done) { |
|---|
| | | this.finishCoordinate_ = coordinates[0]; |
|---|
| | | } |
|---|
| | | this.geometryFunction_(this.sketchCoords_, geometry, projection); |
|---|
| | | } |
|---|
| | | this.createOrUpdateSketchPoint_(coordinate.slice()); |
|---|
| | | this.updateSketchFeatures_(); |
|---|
| | | if (done) { |
|---|
| | | this.finishDrawing(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Remove last point of the feature currently being drawn. Does not do anything when |
|---|
| | | * drawing POINT or MULTI_POINT geometries. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.removeLastPoint = function() { |
|---|
| | | if (!this.sketchFeature_) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var geometry = this.sketchFeature_.getGeometry(); |
|---|
| | | var projection = this.getMap().getView().getProjection(); |
|---|
| | | var coordinates; |
|---|
| | | var mode = this.mode_; |
|---|
| | | if (mode === Mode.LINE_STRING || mode === Mode.CIRCLE) { |
|---|
| | | coordinates = /** @type {LineCoordType} */ (this.sketchCoords_); |
|---|
| | | coordinates.splice(-2, 1); |
|---|
| | | if (coordinates.length >= 2) { |
|---|
| | | this.finishCoordinate_ = coordinates[coordinates.length - 2].slice(); |
|---|
| | | var finishCoordinate = this.finishCoordinate_.slice(); |
|---|
| | | coordinates[coordinates.length - 1] = finishCoordinate; |
|---|
| | | this.createOrUpdateSketchPoint_(finishCoordinate); |
|---|
| | | } |
|---|
| | | this.geometryFunction_(coordinates, geometry, projection); |
|---|
| | | if (geometry.getType() === GeometryType.POLYGON && this.sketchLine_) { |
|---|
| | | this.createOrUpdateCustomSketchLine_( /** @type {Polygon} */ (geometry)); |
|---|
| | | } |
|---|
| | | } else if (mode === Mode.POLYGON) { |
|---|
| | | coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0]; |
|---|
| | | coordinates.splice(-2, 1); |
|---|
| | | var sketchLineGeom = this.sketchLine_.getGeometry(); |
|---|
| | | if (coordinates.length >= 2) { |
|---|
| | | var finishCoordinate = coordinates[coordinates.length - 2].slice(); |
|---|
| | | coordinates[coordinates.length - 1] = finishCoordinate; |
|---|
| | | this.createOrUpdateSketchPoint_(finishCoordinate); |
|---|
| | | } |
|---|
| | | sketchLineGeom.setCoordinates(coordinates); |
|---|
| | | this.geometryFunction_(this.sketchCoords_, geometry, projection); |
|---|
| | | } |
|---|
| | | if (coordinates.length === 1) { |
|---|
| | | this.abortDrawing(); |
|---|
| | | } |
|---|
| | | this.updateSketchFeatures_(); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Stop drawing and add the sketch feature to the target layer. |
|---|
| | | * The {@link module:ol/interaction/Draw~DrawEventType.DRAWEND} event is |
|---|
| | | * dispatched before inserting the feature. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.finishDrawing = function() { |
|---|
| | | var sketchFeature = this.abortDrawing_(); |
|---|
| | | if (!sketchFeature) { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | var coordinates = this.sketchCoords_; |
|---|
| | | var geometry = sketchFeature.getGeometry(); |
|---|
| | | var projection = this.getMap().getView().getProjection(); |
|---|
| | | if (this.mode_ === Mode.LINE_STRING) { |
|---|
| | | // remove the redundant last point |
|---|
| | | coordinates.pop(); |
|---|
| | | this.geometryFunction_(coordinates, geometry, projection); |
|---|
| | | } else if (this.mode_ === Mode.POLYGON) { |
|---|
| | | // remove the redundant last point in ring |
|---|
| | | /** @type {PolyCoordType} */ |
|---|
| | | (coordinates)[0].pop(); |
|---|
| | | this.geometryFunction_(coordinates, geometry, projection); |
|---|
| | | coordinates = geometry.getCoordinates(); |
|---|
| | | } |
|---|
| | | // cast multi-part geometries |
|---|
| | | if (this.type_ === GeometryType.MULTI_POINT) { |
|---|
| | | sketchFeature.setGeometry(new MultiPoint([ /** @type {PointCoordType} */ (coordinates)])); |
|---|
| | | } else if (this.type_ === GeometryType.MULTI_LINE_STRING) { |
|---|
| | | sketchFeature.setGeometry(new MultiLineString([ /** @type {LineCoordType} */ (coordinates)])); |
|---|
| | | } else if (this.type_ === GeometryType.MULTI_POLYGON) { |
|---|
| | | sketchFeature.setGeometry(new MultiPolygon([ /** @type {PolyCoordType} */ (coordinates)])); |
|---|
| | | } |
|---|
| | | // First dispatch event to allow full set up of feature |
|---|
| | | this.dispatchEvent(new DrawEvent(DrawEventType.DRAWEND, sketchFeature)); |
|---|
| | | // Then insert feature |
|---|
| | | if (this.features_) { |
|---|
| | | this.features_.push(sketchFeature); |
|---|
| | | } |
|---|
| | | if (this.source_) { |
|---|
| | | this.source_.addFeature(sketchFeature); |
|---|
| | | } |
|---|
| | | this._coordinateOver(); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Stop drawing without adding the sketch feature to the target layer. |
|---|
| | | * @return {Feature} The sketch feature (or null if none). |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.abortDrawing_ = function() { |
|---|
| | | this.finishCoordinate_ = null; |
|---|
| | | var sketchFeature = this.sketchFeature_; |
|---|
| | | this.sketchFeature_ = null; |
|---|
| | | this.sketchPoint_ = null; |
|---|
| | | this.sketchLine_ = null; |
|---|
| | | this.overlay_.getSource().clear(true); |
|---|
| | | return sketchFeature; |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Stop drawing without adding the sketch feature to the target layer. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.abortDrawing = function() { |
|---|
| | | var sketchFeature = this.abortDrawing_(); |
|---|
| | | if (sketchFeature) { |
|---|
| | | this.dispatchEvent(new DrawEvent(DrawEventType.DRAWABORT, sketchFeature)); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Append coordinates to the end of the geometry that is currently being drawn. |
|---|
| | | * This can be used when drawing LineStrings or Polygons. Coordinates will |
|---|
| | | * either be appended to the current LineString or the outer ring of the current |
|---|
| | | * Polygon. If no geometry is being drawn, a new one will be created. |
|---|
| | | * @param {!LineCoordType} coordinates Linear coordinates to be appended to |
|---|
| | | * the coordinate array. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.appendCoordinates = function(coordinates) { |
|---|
| | | var mode = this.mode_; |
|---|
| | | var newDrawing = !this.sketchFeature_; |
|---|
| | | if (newDrawing) { |
|---|
| | | this.startDrawing_(coordinates[0]); |
|---|
| | | } |
|---|
| | | /** @type {LineCoordType} */ |
|---|
| | | var sketchCoords; |
|---|
| | | if (mode === Mode.LINE_STRING || mode === Mode.CIRCLE) { |
|---|
| | | sketchCoords = /** @type {LineCoordType} */ (this.sketchCoords_); |
|---|
| | | } else if (mode === Mode.POLYGON) { |
|---|
| | | sketchCoords = |
|---|
| | | this.sketchCoords_ && this.sketchCoords_.length ? |
|---|
| | | /** @type {PolyCoordType} */ (this.sketchCoords_)[0] : |
|---|
| | | []; |
|---|
| | | } else { |
|---|
| | | return; |
|---|
| | | } |
|---|
| | | if (newDrawing) { |
|---|
| | | sketchCoords.shift(); |
|---|
| | | } |
|---|
| | | // Remove last coordinate from sketch drawing (this coordinate follows cursor position) |
|---|
| | | sketchCoords.pop(); |
|---|
| | | // Append coordinate list |
|---|
| | | for (var i = 0; i < coordinates.length; i++) { |
|---|
| | | this.addToDrawing_(coordinates[i]); |
|---|
| | | } |
|---|
| | | var ending = coordinates[coordinates.length - 1]; |
|---|
| | | // Duplicate last coordinate for sketch drawing (cursor position) |
|---|
| | | this.addToDrawing_(ending); |
|---|
| | | this.modifyDrawing_(ending); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Initiate draw mode by starting from an existing geometry which will |
|---|
| | | * receive new additional points. This only works on features with |
|---|
| | | * `LineString` geometries, where the interaction will extend lines by adding |
|---|
| | | * points to the end of the coordinates array. |
|---|
| | | * This will change the original feature, instead of drawing a copy. |
|---|
| | | * |
|---|
| | | * The function will dispatch a `drawstart` event. |
|---|
| | | * |
|---|
| | | * @param {!Feature<LineString>} feature Feature to be extended. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | Draw.prototype.extend = function(feature) { |
|---|
| | | var geometry = feature.getGeometry(); |
|---|
| | | var lineString = geometry; |
|---|
| | | this.sketchFeature_ = feature; |
|---|
| | | this.sketchCoords_ = lineString.getCoordinates(); |
|---|
| | | var last = this.sketchCoords_[this.sketchCoords_.length - 1]; |
|---|
| | | this.finishCoordinate_ = last.slice(); |
|---|
| | | this.sketchCoords_.push(last.slice()); |
|---|
| | | this.sketchPoint_ = new Feature(new Point(last)); |
|---|
| | | this.updateSketchFeatures_(); |
|---|
| | | this.dispatchEvent(new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_)); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * Redraw the sketch features. |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.updateSketchFeatures_ = function() { |
|---|
| | | var sketchFeatures = []; |
|---|
| | | if (this.sketchFeature_) { |
|---|
| | | sketchFeatures.push(this.sketchFeature_); |
|---|
| | | } |
|---|
| | | if (this.sketchLine_) { |
|---|
| | | sketchFeatures.push(this.sketchLine_); |
|---|
| | | } |
|---|
| | | if (this.sketchPoint_) { |
|---|
| | | sketchFeatures.push(this.sketchPoint_); |
|---|
| | | } |
|---|
| | | var overlaySource = this.overlay_.getSource(); |
|---|
| | | overlaySource.clear(true); |
|---|
| | | overlaySource.addFeatures(sketchFeatures); |
|---|
| | | }; |
|---|
| | | /** |
|---|
| | | * @private |
|---|
| | | */ |
|---|
| | | Draw.prototype.updateState_ = function() { |
|---|
| | | var map = this.getMap(); |
|---|
| | | var active = this.getActive(); |
|---|
| | | if (!map || !active) { |
|---|
| | | this.abortDrawing(); |
|---|
| | | } |
|---|
| | | this.overlay_.setMap(active ? map : null); |
|---|
| | | }; |
|---|
| | | return Draw; |
|---|
| | | }(PointerInteraction)); |
|---|
| | | /** |
|---|
| | | * @return {import("../style/Style.js").StyleFunction} Styles. |
|---|
| | | */ |
|---|
| | | function getDefaultStyleFunction() { |
|---|
| | | var styles = createEditingStyle(); |
|---|
| | | return function(feature, resolution) { |
|---|
| | | return styles[feature.getGeometry().getType()]; |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * Create a `geometryFunction` for `type: 'Circle'` that will create a regular |
|---|
| | | * polygon with a user specified number of sides and start angle instead of a |
|---|
| | | * `import("../geom/Circle.js").Circle` geometry. |
|---|
| | | * @param {number} [opt_sides] Number of sides of the regular polygon. |
|---|
| | | * Default is 32. |
|---|
| | | * @param {number} [opt_angle] Angle of the first point in counter-clockwise |
|---|
| | | * radians. 0 means East. |
|---|
| | | * Default is the angle defined by the heading from the center of the |
|---|
| | | * regular polygon to the current pointer position. |
|---|
| | | * @return {GeometryFunction} Function that draws a polygon. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | export function createRegularPolygon(opt_sides, opt_angle) { |
|---|
| | | return function(coordinates, opt_geometry, projection) { |
|---|
| | | var center = fromUserCoordinate( |
|---|
| | | /** @type {LineCoordType} */ |
|---|
| | | (coordinates)[0], projection); |
|---|
| | | var end = fromUserCoordinate( |
|---|
| | | /** @type {LineCoordType} */ |
|---|
| | | (coordinates)[coordinates.length - 1], projection); |
|---|
| | | var radius = Math.sqrt(squaredCoordinateDistance(center, end)); |
|---|
| | | var geometry = opt_geometry ? |
|---|
| | | /** @type {Polygon} */ (opt_geometry) : |
|---|
| | | fromCircle(new Circle(center), opt_sides); |
|---|
| | | var angle = opt_angle; |
|---|
| | | if (!opt_angle && opt_angle !== 0) { |
|---|
| | | var x = end[0] - center[0]; |
|---|
| | | var y = end[1] - center[1]; |
|---|
| | | angle = Math.atan2(y, x); |
|---|
| | | } |
|---|
| | | makeRegular(geometry, center, radius, angle); |
|---|
| | | var userProjection = getUserProjection(); |
|---|
| | | if (userProjection) { |
|---|
| | | geometry.transform(projection, userProjection); |
|---|
| | | } |
|---|
| | | return geometry; |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * Create a `geometryFunction` that will create a box-shaped polygon (aligned |
|---|
| | | * with the coordinate system axes). Use this with the draw interaction and |
|---|
| | | * `type: 'Circle'` to return a box instead of a circle geometry. |
|---|
| | | * @return {GeometryFunction} Function that draws a box-shaped polygon. |
|---|
| | | * @api |
|---|
| | | */ |
|---|
| | | export function createBox() { |
|---|
| | | return function(coordinates, opt_geometry, projection) { |
|---|
| | | var extent = boundingExtent( |
|---|
| | | /** @type {LineCoordType} */ |
|---|
| | | ([ |
|---|
| | | coordinates[0], |
|---|
| | | coordinates[coordinates.length - 1], |
|---|
| | | ]).map(function(coordinate) { |
|---|
| | | return fromUserCoordinate(coordinate, projection); |
|---|
| | | })); |
|---|
| | | var boxCoordinates = [ |
|---|
| | | [ |
|---|
| | | getBottomLeft(extent), |
|---|
| | | getBottomRight(extent), |
|---|
| | | getTopRight(extent), |
|---|
| | | getTopLeft(extent), |
|---|
| | | getBottomLeft(extent), |
|---|
| | | ], |
|---|
| | | ]; |
|---|
| | | var geometry = opt_geometry; |
|---|
| | | if (geometry) { |
|---|
| | | geometry.setCoordinates(boxCoordinates); |
|---|
| | | } else { |
|---|
| | | geometry = new Polygon(boxCoordinates); |
|---|
| | | } |
|---|
| | | var userProjection = getUserProjection(); |
|---|
| | | if (userProjection) { |
|---|
| | | geometry.transform(projection, userProjection); |
|---|
| | | } |
|---|
| | | return geometry; |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | /** |
|---|
| | | * Get the drawing mode. The mode for mult-part geometries is the same as for |
|---|
| | | * their single-part cousins. |
|---|
| | | * @param {import("../geom/GeometryType.js").default} type Geometry type. |
|---|
| | | * @return {Mode} Drawing mode. |
|---|
| | | */ |
|---|
| | | function getMode(type) { |
|---|
| | | switch (type) { |
|---|
| | | case GeometryType.POINT: |
|---|
| | | case GeometryType.MULTI_POINT: |
|---|
| | | return Mode.POINT; |
|---|
| | | case GeometryType.LINE_STRING: |
|---|
| | | case GeometryType.MULTI_LINE_STRING: |
|---|
| | | return Mode.LINE_STRING; |
|---|
| | | case GeometryType.POLYGON: |
|---|
| | | case GeometryType.MULTI_POLYGON: |
|---|
| | | return Mode.POLYGON; |
|---|
| | | case GeometryType.CIRCLE: |
|---|
| | | return Mode.CIRCLE; |
|---|
| | | default: |
|---|
| | | throw new Error('Invalid type: ' + type); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | export default Draw; |
|---|
| | | //# sourceMappingURL=Draw.js.map |
|---|
