+包Draw引出

liuyg

2021-12-14 d8b1c86a025f4ab44cb46dd15c9c5e0d82f28fba

+包Draw引出

 src/components/map/Draw.js

New file
@@ -0,0 +1,1191 @@
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

 src/components/map/main.vue

@@ -68,7 +68,7 @@
import VectorSource from "ol/source/Vector";

import { OSM, TileWMS, Vector } from "ol/source";
import Draw from "ol/interaction/Draw";
import Draw from "./Draw";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
@@ -364,9 +364,9 @@
          }),
          coordinate: function (res) {
            //画线中的点
            that.coordinates.push(res.coordinate_);
            that.coordinates.push(res);
            that.tipTitle = "可继续，或选择最终位置双击结束";
            // console.log(res.coordinate_, 123456);
            // console.log(res, 123456);
          },
          coordinateOver: function (res) {
            // 结束绘画 处理数据
@@ -402,6 +402,7 @@
        }
      }
      str += ")";
      // console.log(str, 111);
      return str;
    },
    addLinesDraw(val) {
@@ -464,7 +465,7 @@
      if (that.draw != null) {
        that.beginDraw = false;
        that.butTitle = "重新绘画";
        that.draw.controlDrawing(true);
        that.draw.abortDrawing_();
        that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
        $("#map").unbind("mousemove");
        // setTimeout(() => {

 src/views/activitys/real.vue

@@ -601,7 +601,7 @@
    },
    rotesData() {
      // console.log(this.rotesData, "rotesDatarotesDatarotesData");
      console.log(this.rotesData, "this.rotesDatathis.rotesData");
      // console.log(this.rotesData, "this.rotesDatathis.rotesData");
      if (this.rotesData) {
        // var haveMap = (this.option.column[9].value = "已选择路径！");
        // haveMap.value = "已选择路径！";