From d8b1c86a025f4ab44cb46dd15c9c5e0d82f28fba Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 14 Dec 2021 15:18:18 +0800
Subject: [PATCH] +包Draw引出
---
src/views/activitys/real.vue | 2
src/components/map/Draw.js | 1191 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/components/map/main.vue | 9
3 files changed, 1,197 insertions(+), 5 deletions(-)
diff --git a/src/components/map/Draw.js b/src/components/map/Draw.js
new file mode 100644
index 0000000..14a0f73
--- /dev/null
+++ b/src/components/map/Draw.js
@@ -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
\ No newline at end of file
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 3585e8f..f92a1aa 100644
--- a/src/components/map/main.vue
+++ b/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(() => {
diff --git a/src/views/activitys/real.vue b/src/views/activitys/real.vue
index cc54eb2..023fbcd 100644
--- a/src/views/activitys/real.vue
+++ b/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 = "已选择路径！";
--
Gitblit v1.9.3