地块管理

tangzy

2022-05-23 466571867b56a2ab20bdfb6352404ff890f30167

地块管理

 package-lock.json

Diff too large

 package.json

@@ -55,4 +55,4 @@
            "git add"
        ]
    }
}
}

 public/index.html

@@ -23,6 +23,10 @@
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="libs/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="js/drawTree.js"></script>
  <!-- Avue地图选点 -->
  <script type="text/javascript"
          src='https://webapi.amap.com/maps?v=1.4.11&key=7ab53b28352e55dc5754699add0ad862&plugin=AMap.PlaceSearch'></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <title>智慧农业综合管理平台</title>

 src/api/panorama/panorama.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/panorama/panorama/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/panorama/panorama/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/panorama/panorama/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/panorama/panorama/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/panorama/panorama/submit',
    method: 'post',
    data: row
  })
}


 src/api/remote/remote.js

New file
@@ -0,0 +1,50 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/remote/remote/list',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/remote/remote/detail',
    method: 'get',
    params: {
      id
    }
  })
}

export const remove = (ids) => {
  return request({
    url: '/api/remote/remote/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

export const add = (row) => {
  return request({
    url: '/api/remote/remote/submit',
    method: 'post',
    data: row
  })
}

export const update = (row) => {
  return request({
    url: '/api/remote/remote/submit',
    method: 'post',
    data: row
  })
}


 src/components/mapOncePoint/Draw.js

New file
@@ -0,0 +1,1280 @@
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("ol/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("ol/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("ol/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("ol/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("ol/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("ol/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("ol/coordinate.js").Coordinate} PointCoordType
 */
/**
 * Coordinate type when drawing lines.
 * @typedef {Array<import("ol/coordinate.js").Coordinate>} LineCoordType
 */
/**
 * Coordinate type when drawing polygons.
 * @typedef {Array<Array<import("ol/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("ol/geom/SimpleGeometry.js").default,
 *     import("ol/proj/Projection.js").default):
 *     import("ol/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("ol/Observable").OnSignature<import("ol/Observable").EventTypes, import("ol/events/Event.js").default, Return> &
 *   import("ol/Observable").OnSignature<import("ol/ObjectEventType").Types|
 *     'change:active', import("ol/Object").ObjectEvent, Return> &
 *   import("ol/Observable").OnSignature<'drawabort'|'drawend'|'drawstart', DrawEvent, Return> &
 *   import("ol/Observable").CombinedOnSignature<import("ol/Observable").EventTypes|import("ol/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;
    /***
     * @type {DrawOnSignature<import("ol/events").EventsKey>}
     */
    _this.coordinate = options.coordinate;
    /***
     * 输出坐标
     */
    _this.coordinateOver = options.coordinateOver;
    /***
     * 结束绘画
     */
    _this.overDraw = false;
    /***
     * 控制结束绘画
     */
    _this.isPoint = options.isPoint;
    /***
     * 是否是点
     */
    _this.coordinateOverPoint = options.coordinateOverPoint;
    /***
     * 输出点
     */
    _this.on;
    /***
     * @type {DrawOnSignature<import("ol/events").EventsKey>}
     */
    _this.once;
    /***
     * @type {DrawOnSignature<void>}
     */
    _this.un;
    /**
     * @type {boolean}
     * @private
     */
    _this.shouldHandle_ = false;
    /**
     * @type {import("ol/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("ol/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("ol/geom/GeometryType.js").default}
     * @private
     */
    _this.type_ = /** @type {import("ol/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("ol/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("ol/geom/SimpleGeometry.js").default|undefined} geometry Optional geometry.
         * @param {import("ol/proj/Projection.js").default} projection The view projection.
         * @return {import("ol/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("ol/geom/SimpleGeometry.js").default|undefined} geometry Optional geometry.
         * @param {import("ol/proj/Projection.js").default} projection The view projection.
         * @return {import("ol/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("ol/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("ol/events/condition.js").Condition}
     */
    _this.condition_ = options.condition ? options.condition : noModifierKeys;
    /**
     * @private
     * @type {import("ol/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("ol/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("ol/MapBrowserEvent.js").default} event Map browser event.
   * @return {boolean} `false` to stop event propagation.
   * @api
   */
  Draw.prototype.controlDrawing = function (val) {
    this.overDraw = val;
  };

  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
    ) {
      if (this.overDraw) {
        return;
      }
      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_) {
        if (this.overDraw) {
          return;
        }
        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)
      ) {
        if (this.overDraw) {
          return;
        }
        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("ol/MapBrowserEvent.js").default} event Event.
   * @return {boolean} If the event was consumed.
   */
  Draw.prototype.handleDownEvent = function (event) {
    // console.log(event.coordinate_, 'handleDownEvent')
    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("ol/MapBrowserEvent.js").default} event Event.
   * @return {boolean} If the event was consumed.
   */
  Draw.prototype.handleUpEvent = function (event) {
    // console.log(event.coordinate_, 'handleUpEvent')//获取坐标点
    if (this.isPoint) {
      this.coordinateOverPoint(event);
      this.finishDrawing();
      return;
    }
    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.coordinateOverPoint(event);
          this.coordinate(event);
          this.startDrawing_(event.coordinate);
        }
        if (!startingToDraw && this.freehand_) {
          this.finishDrawing();
        } else if (
          !this.freehand_ &&
          (!startingToDraw || this.mode_ === Mode.POINT)
        ) {
          //选择后抬起
          this.coordinate(event);
          if (this.atFinish_(event.pixel)) {
            //结束绘画
            this.coordinateOver("结束");
            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;
  };
  // Draw.prototype.getCoordinate = function (fn) {
  //     this.coordinate = fn;
  //     console.log(this.coordinate)
  // }
  /**
   * Handle move events.
   * @param {import("ol/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("ol/pixel.js").Pixel} pixel Pixel.
   * @return {boolean} The event is within the snapping tolerance of the start.
   * @private
   */
  Draw.prototype.atFinish_ = function (pixel) {
    // console.log(pixel, 879789)
    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("ol/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("ol/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("ol/coordinate.js").Coordinate} start Start coordinate.
   * @private
   */
  Draw.prototype.startDrawing_ = function (start) {
    if (this.overDraw) {
      return;
    }
    var projection = this.getMap().getView().getProjection();
    this.finishCoordinate_ = start;
    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("ol/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.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 () {
    // console.log("finishDrawing")
    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);
    }
  };
  /**
   * 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("ol/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("ol/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 multi-part geometries is the same as for
 * their single-part cousins.
 * @param {import("ol/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/mapOncePoint/chousePoint.vue

New file
@@ -0,0 +1,173 @@
<template>
  <div>
    <avue-input-map
      :params="params"
      placeholder="请选择地点"
      v-model="chousePointData"
    ></avue-input-map>
  </div>
</template>

<script>
import mapOncePoint from "./mapOncePoint.vue";
export default {
  components: {
    mapOncePoint,
  },
  name: 'chousePoint',
  data() {
    return {
      params: {
        zoom: 10,
        // zoomEnable: false,
        // dragEnable: false,
      },
      chousePointData: [115.87179386, 28.74509276, ""],
    };
  },
  watch: {
    chousePointData: {
      handler(oldData, newData) {
        // setTimeout(() => {
        // if (
        //   this.chousePointData[0] &&
        //   this.chousePointData[1] &&
        //   this.chousePointData[2]
        // ) {
        let outInt = this.gcj02towgs84(
          this.chousePointData[0],
          this.chousePointData[1]
        );
        let outdata = [...outInt, this.chousePointData[2]];
        console.log(this.chousePointData, "gcj02");
        console.log(outdata, " wgs84");
        this.$emit("setData", outdata);
        // } else {
        //   this.$message.error("未成功选择地点");
        //   this.$emit("setData", ["", "", ""]);
        // }
        // }, 500);
      },
      deep: true,
    },
  },
  methods: {
    openMaps(data) {
      //转wgs84
      let ints = this.wgs84togcj02(data.jd, data.wd);
      this.chousePointData = [...ints, data.name];
    },
    wgs84togcj02(lng, lat) {
      var lat = +lat;
      var lng = +lng;
      var PI = 3.1415926535897932384626;
      var ee = 0.00669342162296594323;
      var a = 6378245.0;
      if (this.out_of_china(lng, lat)) {
        return [lng, lat];
      } else {
        var dlat = this.transformlat(lng - 105.0, lat - 35.0);
        var dlng = this.transformlng(lng - 105.0, lat - 35.0);
        var radlat = (lat / 180.0) * PI;
        var magic = Math.sin(radlat);
        magic = 1 - ee * magic * magic;
        var sqrtmagic = Math.sqrt(magic);
        dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
        dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
        var mglat = lat + dlat;
        var mglng = lng + dlng;
        return [mglng, mglat];
      }
    },
    // GCJ02 转换为 WGS84
    gcj02towgs84(lng, lat) {
      var lat = +lat;
      var lng = +lng;
      var PI = 3.1415926535897932384626;
      var ee = 0.00669342162296594323;
      var a = 6378245.0;
      // 判断是否在国内，不在国内则不做偏移
      if (this.out_of_china(lng, lat)) {
        return [lng, lat];
      } else {
        var dlat = this.transformlat(lng - 105.0, lat - 35.0);
        var dlng = this.transformlng(lng - 105.0, lat - 35.0);
        var radlat = (lat / 180.0) * PI;
        var magic = Math.sin(radlat);
        magic = 1 - ee * magic * magic;
        var sqrtmagic = Math.sqrt(magic);
        dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI);
        dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI);
        var mglat = lat + dlat;
        var mglng = lng + dlng;
        return [lng * 2 - mglng, lat * 2 - mglat];
      }
    },
    out_of_china(lng, lat) {
      var lat = +lat;
      var lng = +lng;
      // 纬度3.86~53.55,经度73.66~135.05
      return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
    },
    transformlng(lng, lat) {
      var lat = +lat;
      var lng = +lng;
      var PI = 3.1415926535897932384626;
      var ret =
        300.0 +
        lng +
        2.0 * lat +
        0.1 * lng * lng +
        0.1 * lng * lat +
        0.1 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((150.0 * Math.sin((lng / 12.0) * PI) +
          300.0 * Math.sin((lng / 30.0) * PI)) *
          2.0) /
        3.0;
      return ret;
    },
    transformlat(lng, lat) {
      var lat = +lat;
      var lng = +lng;
      var PI = 3.1415926535897932384626;
      var ret =
        -100.0 +
        2.0 * lng +
        3.0 * lat +
        0.2 * lat * lat +
        0.1 * lng * lat +
        0.2 * Math.sqrt(Math.abs(lng));
      ret +=
        ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) *
          2.0) /
        3.0;
      ret +=
        ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) *
          2.0) /
        3.0;
      ret +=
        ((160.0 * Math.sin((lat / 12.0) * PI) +
          320 * Math.sin((lat * PI) / 30.0)) *
          2.0) /
        3.0;
      return ret;
    },
  },
};
</script>

<style lang="scss" scoped>
.myInputMap {
  width: 100%;
  height: 500px;
}
</style>

 src/components/mapOncePoint/mapOncePoint.vue

New file
@@ -0,0 +1,897 @@
<!--
 * @Descripttion:
 * @version:
 * @Author: song
 * @Date: 2021-04-08 15:14:57
 * @LastEditors: song
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map" style="height: calc(100% - 40px)">
    <div class="controlMap">
      <el-button-group id="openDrawPoiton">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelectedPoint"
          :disabled="beginDraw"
          >{{ butTitlePoint }}</el-button
        >
        <!-- :disabled="!beginDraw" -->
        <el-button type="primary" @click="stopDraw" icon="el-icon-delete"
          >取消</el-button
        >
        <!-- <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button> -->
      </el-button-group>
    </div>
    <el-button-group id="dataConfirm" style="display: none">
      <!-- v-show="butTitle == '重新绘画' || butTitlePoint == '重新标点'" -->
      <el-button type="success" icon="el-icon-check" @click="useMapData"
        >确定选择</el-button
      >
      <el-button
        type="danger"
        @click="clearUseMapData"
        icon="el-icon-refresh-right"
        >清空</el-button
      >
    </el-button-group>
    <!-- <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button> -->
    <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
  </div>
</template>
<script>
import OLCesium from "olcs/OLCesium.js";
import "ol/ol.css";
import OlView from "ol/View.js";
import XYZ from "ol/source/XYZ";
import OlLayerTile from "ol/layer/Tile.js";
import OlMap from "ol/Map.js";
import tip from "./tip.vue";
import {
  // eslint-disable-next-line no-unused-vars
  defaults as OlControlDefaults,
  defaults,
  // 全屏控件
  FullScreen,
  // 比例尺控件
  ScaleLine,
  // 缩放滚动条控件
  // eslint-disable-next-line no-unused-vars
  ZoomSlider,
  // 鼠标位置控件
  // eslint-disable-next-line no-unused-vars
  MousePosition,
  // -地图属性控件
  Attribution,
  // 鹰眼控件
  // eslint-disable-next-line no-unused-vars
  OverviewMap,
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate,
} from "ol/control.js";

import VectorLayer from "ol/layer/Vector";
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";
import LineString from "ol/geom/LineString.js";
import { Icon, Style, Fill, Stroke } from "ol/style.js";

// import drawFence from "./drawFence";

import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
// import OlLayerVector from "ol/layer/Vector";
// import OlSourceVector from "ol/source/Vector";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
// // 用来添加相关文字描述的
// import Text from "ol/style/Text";
// // import Fill from "ol/style/Fill";
// import Cesium from "libs/Cesium/Cesium.js";

export default {
  name: "Map",
  components: {
    tip,
  },
  props: ["isOpenMaps"],
  data() {
    return {
      // gunAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      // peopleAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      // carAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      // peopleLineAddlayer: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),
      // beginsPoint: new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // }),

      // 存储新增点，线，面，数据的地方
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      typeSelected: "LineString",
      drawLayer: null,
      draw: null,
      coordinates: [],
      coordinatesStr: "",
      beginDraw: false,
      butTitle: "开始绘画",
      view: "",
      // map: null,

      showTip: false,
      tipTitle: "",
      position: {
        w: 200,
        h: 10,
      },
      // openDrawChiose: "", //openDrawPoint openDrawLine
      openDrawLine: false,
      openDrawPoint: false,

      butTitlePoint: "选择标点",
      olLayer: null, //点图层

      nowIndex: "", //返回第几个

      fromView: false, //若是查看  不显示更改按钮
    };
  },
  computed: {
    openDrawChiose() {
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
      } else {
        return "";
      }
    },
  },
  watch: {
    isOpenMaps() {
      if (this.isOpenMaps) {
        this.createMap();
      }
    },
  },
  mounted() {
    // const ol2dOncePoint = new OlMap({
    //   layers: [
    //     // new OlLayerTile({
    //     //   zIndex: 4,
    //     //   title: "影像",
    //     //   source: new XYZ({
    //     //     url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
    //     //   }),
    //     // }),
    //     // new OlLayerTile({
    //     //   zIndex: 5,
    //     //   title: "道路+中文注记",
    //     //   source: new XYZ({
    //     //     url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
    //     //   }),
    //     // }),
    //     new OlLayerTile({
    //       zIndex: 4,
    //       title: "矢量",
    //       source: new XYZ({
    //         url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
    //         // url: "/localData/sl/{z}/{x}/{y}.png",
    //         tileUrlFunction: function (tileCoord) {
    //           var z = tileCoord[0];
    //           var x = tileCoord[1];
    //           var y = Math.pow(2, z) + tileCoord[2];
    //           return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
    //         },
    //       }),
    //     }),
    //     new OlLayerTile({
    //       zIndex: 5,
    //       title: "中文注记",
    //       source: new XYZ({
    //         url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
    //       }),
    //     }),
    //   ],

    //   // 注意地图控件的写法
    //   controls: defaults().extend([
    //     // new FullScreen(),
    //     // new ScaleLine(),
    //     // new MousePosition(),
    //     // new Rotate(),
    //     // new Attribution()
    //   ]),
    //   target: "map",
    //   view: new OlView({
    //     center: [0, 0],
    //     zoom: 2,
    //     projection: "EPSG:4326",
    //   }),
    // });
    // window.ol2dOncePoint = ol2dOncePoint;

    // var view = ol2dOncePoint.getView();
    // console.log(ol2dOncePoint);
    // // let provider = new Cesium.UrlTemplateImageryProvider({
    // //   url: "/wp/{z}/{x}/{y}.png",
    // //   fileExtension: "png",
    // // });
    // // view.imageryLayers.addImageryProvider(provider);

    // // view.setCenter([115.85883507433789, 28.708432053474827])
    // view.setCenter([114.03858862, 27.63088262]);

    // //
    // view.setZoom(18);
    // this.view = view;
    // const ol3d = new OLCesium({ map: window.ol2dOncePoint });
    // window.ol3d = ol3d;

    // ol2dOncePoint.addLayer(this.gunAddlayer);
    // ol2dOncePoint.addLayer(this.peopleAddlayer);
    // ol2dOncePoint.addLayer(this.carAddlayer);
    // ol2dOncePoint.addLayer(this.peopleLineAddlayer);
    // ol2dOncePoint.addLayer(this.beginsPoint);
    // this.addLines()
    // let that = this;
    // that.addNewLine();

    return;
    that.beginsPoint.getSource().clear();
    let iconFeature = new OlFeature({
      geometry: new OlGeomPoint([114.03928791, 27.62954732]), //绘制图形（点）
    });
    iconFeature.setStyle(
      new OlStyleStyle({
        image: new OlStyleIcon({
          scale: 0.5,
          offset: [0, 5],
          offsetOrigin: "bottom",
          //透明度
          opacity: 1,
          //图片路径
          src: "img/dingwei/dingwei4.png",
        }),
      })
    );
    that.beginsPoint.getSource().addFeature(iconFeature);

    //监听鼠标位置
    //
  },
  methods: {
    createMap() {
      const ol2dOncePoint = new OlMap({
        layers: [
          // new OlLayerTile({
          //   zIndex: 4,
          //   title: "影像",
          //   source: new XYZ({
          //     url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
          //   }),
          // }),
          // new OlLayerTile({
          //   zIndex: 5,
          //   title: "道路+中文注记",
          //   source: new XYZ({
          //     url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
          //   }),
          // }),
          new OlLayerTile({
            zIndex: 4,
            title: "矢量",
            source: new XYZ({
              url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
              // url: "/localData/sl/{z}/{x}/{y}.png",
              tileUrlFunction: function (tileCoord) {
                var z = tileCoord[0];
                var x = tileCoord[1];
                var y = Math.pow(2, z) + tileCoord[2];
                return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
              },
            }),
          }),
          new OlLayerTile({
            zIndex: 5,
            title: "中文注记",
            source: new XYZ({
              url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
            }),
          }),
        ],

        // 注意地图控件的写法
        controls: defaults().extend([
          // new FullScreen(),
          // new ScaleLine(),
          // new MousePosition(),
          // new Rotate(),
          // new Attribution()
        ]),
        target: "map",
        view: new OlView({
          center: [0, 0],
          zoom: 2,
          projection: "EPSG:4326",
        }),
      });
      window.ol2dOncePoint = ol2dOncePoint;

      var view = ol2dOncePoint.getView();
      // console.log(ol2dOncePoint);
      // let provider = new Cesium.UrlTemplateImageryProvider({
      //   url: "/wp/{z}/{x}/{y}.png",
      //   fileExtension: "png",
      // });
      // view.imageryLayers.addImageryProvider(provider);

      // view.setCenter([115.85883507433789, 28.708432053474827])
      view.setCenter([114.03858862, 27.63088262]);

      //
      view.setZoom(18);
      this.view = view;
    },
    init(val, num, value, fromView) {
      if (fromView) {
        this.fromView = fromView;
      }
      //若是查看  不显示更改按钮
      //初始化
      // console.log(val, "地图初始化", "第:" + num);
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径");
        if (!fromView) {
          this.openDrawLineMethod();
        }
        if (value) {
          //有数据就加载
          this.addLinesDraw(value);
        }
      } else {
        // console.log("加载标点");
        if (!fromView) {
          this.openDrawPointMethod();
        }
        if (value) {
          //有数据就加载
          let intlat = value;
          if (typeof value == "string") {
            intlat = value.split(","); //改为数组
            intlat = [+intlat[0], +intlat[1]]; //改为数字
          }
          this.addIconMarker(intlat);
        }
      }
    },
    useMapData() {
      //返回用数据
      this.$parent.MapDataShow = false;
      let val;
      if (this.openDrawPoint) {
        val = "point";
      } else if (this.openDrawLine) {
        val = "line";
      }
      this.$parent.backMapData(val, this.nowIndex);
    },
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
      }
      this.useMapData();
    },
    openDrawLineMethod() {
      if (this.openDrawPoint) {
        this.openDrawPoint = false;
        // $("#openDrawPoiton").hide();
      }
      //打开画路径
      $("#openDrawLine").toggle(100);
      this.openDrawLine = !this.openDrawLine;
    },
    openDrawPointMethod() {
      if (this.openDrawLine) {
        this.openDrawLine = false;
        $("#openDrawLine").hide();
      }
      //打开画点
      // $("#openDrawPoiton").toggle(100);
      this.openDrawPoint = !this.openDrawPoint;
    },
    getTypeSelectedPoint() {
      this.tipTitle = "单击左键选择位置";
      let that = this;
      let isHaveOne = false;
      $("#map")
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
          // console.log(e.clientX);
          // console.log(e.offsetX);
          // console.log(e.pageX);
          // console.log(e.screenX);
          // console.log("================================");
        });

      if (this.typeSelected !== "None") {
        this.draw = new Draw({
          source: this.drawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
          }),
          isPoint: true,
          coordinate: function (res) {},
          coordinateOverPoint: function (res) {
            if (isHaveOne) {
              return;
            }
            that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
            // console.log(res.coordinate);//输出点
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
          },
        });
        this.map.addInteraction(this.draw);
      }

      // 选点
      // this.addIconMarker([115.9111272006128, 28.699307185841562]);
    },
    addIconMarker(intlat) {
      let that = this;
      that.carAddlayer.getSource().clear();
      // if (this.olLayer) {
      //   window.ol2dOncePoint.removeLayer(this.olLayer);
      // }
      // let iconFeatures;

      // this.olLayer = new VectorLayer({
      //   // 图标图层
      //   zIndex: 22,
      //   source: new VectorSource(),
      // });
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat), //绘制图形（点）
      });
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            //控制标注图片和文字之间的距离
            // anchor: [0.2, 1],
            //标注样式的起点位置
            // anchorOrigin: "top-right",
            //X方向单位：分数
            // anchorXUnits: "10px",
            //Y方向单位：像素
            // anchorYUnits: "-10px",
            //偏移起点位置的方向
            offset: [0, 5],
            offsetOrigin: "bottom",
            //透明度
            opacity: 1,
            //图片路径
            // src: require("img/logos.png"),
            src: "img/dingwei/dingwei5.png",
          }),
        })
      );

      // 加载多个点用addFeatures，一个点用addFeature
      // this.olLayer.getSource().addFeature(iconFeature);
      that.carAddlayer.getSource().addFeature(iconFeature);
      // window.ol2dOncePoint.addLayer(this.olLayer);

      // var startMarker = new OlFeature({
      //   type: "icon",
      //   // geometry: new OlGeomPoint([118.10131072998047, 36.819305419921875]),
      //   geometry: new OlGeomPoint(intlat),
      // });

      // var vectorLayer = new OlLayerVector({
      //   source: new OlSourceVector({
      //     features: [startMarker],
      //   }),
      //   style: new OlStyleStyle({
      //     image: new OlStyleIcon({
      //       anchor: [0.5, 1],
      //       src: "img/logos.png",
      //       // src: http://192.168.4.61:9527/static/mapMoniter/0.png
      //       // 说明下，因为vue项目打包之后，我这张图片放到了static目录下，直接给相对路径是无法访问到，
      //       // 可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到，下面附了对应帖子链接
      //     }),
      //     // 设置图片下面显示字体的样式和内容
      //     text: new Text({
      //       text: "文字描述", // 添加文字描述
      //       font: "14px font-size", // 设置字体大小
      //       // fill: new Fill({
      //       //   // 设置字体颜色
      //       //   color: "#1CAF9A",
      //       // }),
      //       offsetY: 10, // 设置文字偏移量
      //     }),
      //   }),
      // });
      // window.ol2dOncePoint.addLayer(vectorLayer);

      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
      }
    },
    goTudefault(x, y) {
      this.view.setCenter([x, y]);
      this.view.setZoom(14.5);
    },
    init3D(val) {
      window.ol3d.setEnabled(val);
    },
    addEntitys(item, icon, scale, name, type) {
      const iconFeature = new Feature({
        geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
        name: name,
        attributes: item,
      });

      const iconStyle = new Style({
        // text: new Text({ // 字体, 未成功, 浪费许多时间
        //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
        //   text: "\e645",
        //   fill: new Fill({ color: "green" }),
        // }),

        image: new Icon({
          scale: scale,
          opacity: 1,
          src: icon,
          // src: require('../../assets/Mark.png')
        }),

        // new CircleStyle({ // 普通样式
        //   radius: 6,
        //   fill: new Fill({
        //     color: 'rgba(200, 155, 155, 0.8)'
        //   }),
        //   stroke: new Stroke({
        //     color: 'black',
        //     width: 0.3,
        //   })
        // }),
      });

      iconFeature.setStyle(iconStyle);

      this[type].getSource().addFeature(iconFeature);
    },

    addLines(ringId) {
      var that = this;
      if (ringId != null && ringId != "") {
        $.ajax({
          url: "api/routeIn/routein/selectList",
          type: "post",
          data: {
            id: ringId,
          },
          dataType: "JSON",
          success: function (data) {
            that.peopleLineAddlayer.getSource().clear();
            var entityData = "";
            var entityArr = [];
            entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);

            // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
            if (entityData && entityData != "") {
              entityData = entityData[1].split(",");

              for (var j = 0; j < entityData.length; j++) {
                entityArr.push([
                  Number(entityData[j].split(" ")[0]),
                  Number(entityData[j].split(" ")[1]),
                ]);
              }
            }

            var lineCoords = entityArr; // 线里点的集合

            var view = ol2dOncePoint.getView();
            view.setCenter([
              lineCoords[Math.ceil(entityArr.length / 2)][0],
              lineCoords[Math.ceil(entityArr.length / 2)][1],
            ]);
            view.setZoom(14.5);

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
            var feature_LineString = new Feature({
              geometry: new LineString(lineCoords),
            });

            feature_LineString.setStyle(
              new Style({
                //填充色
                fill: new Fill({
                  color: "rgba(255, 255, 255, 0.2)",
                }),
                //边线颜色
                stroke: new Stroke({
                  color: "rgb(252, 94, 32)",
                  width: 5,
                }),
              })
            );
            that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
            that.butTitle = "修改绘画";
          },
          error: function (data) {
            // 请求失败函数
            console.log(data);
          },
        });
      }
    },
    addNewLine() {
      this.map = ol2dOncePoint;
      // console.log(ol2dOncePoint, 1);
      // console.log(drawFence, 2);
      // var d = new drawFence(ol2dOncePoint);
      // console.log(d);

      // 添加一个绘制的线使用的layer
      this.drawLayer = new VectorLayer({
        //layer所对应的source
        source: new Vector(),
      });
      //把layer加入到地图中
      this.map.addLayer(this.drawLayer);
    },
    getTypeSelected() {
      this.beginDraw = true;
      this.draw && this.map.removeInteraction(this.draw);
      this.peopleLineAddlayer.getSource().clear();
      //再根据typeSelect的值绘制新的Interaction
      this.addInteraction();
    },
    stopDraw() {
      this.$parent.isOpenMaps = false;
      return;
      this.showTip = false;
      this.draw && this.map.removeInteraction(this.draw);
      this.beginDraw = false;
      this.tipTitle = "";
      this.$store.commit("setRotesData", ""); //用vuex传最终数据
    },
    setTipPosition(x, y, n, m) {
      this.position.w = x + n;
      this.position.h = y + m;
    },
    addInteraction() {
      this.tipTitle = "单击左键或右键开始绘画";
      $("#map")
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
          // console.log(e.clientX);
          // console.log(e.offsetX);
          // console.log(e.pageX);
          // console.log(e.screenX);
          // console.log("================================");
        });

      this.coordinates = [];
      let value = this.typeSelected,
        that = this;
      if (value !== "None") {
        this.draw = new Draw({
          source: this.drawLayer.getSource(),
          type: this.typeSelected,
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
          }),
          coordinate: function (res) {
            //画线中的点
            that.coordinates.push(res.coordinate_);
            that.tipTitle = "可继续，或选择最终位置双击结束";
            // console.log(res.coordinate_, 123456);
          },
          coordinateOver: function (res) {
            // 结束绘画 处理数据
            // console.log(that.doData(that.coordinates));
            let d = that.doData(that.coordinates);
            that.addLinesDraw(d);
            // console.log(d);
            // console.log(that.$store);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
            // that.coordinatesStr = that.doData(that.coordinates);
          },
        });
        this.map.addInteraction(this.draw);
      }
    },
    doData(val) {
      //      ` routeInfo: "
      //      LINESTRING(
      //        115.875489096939 28.7179278611352
      //        ,115.8794051221 28.7176267680684
      //        ,115.879340749084 28.7143052776491
      //        ,115.878879409134 28.7140324026424
      //        ,115.875220876038 28.7150580325974
      //        ,115.875489096939 28.7179466794231
      //        ,115.875489096939 28.7179466794231
      //        )"
      // `
      let str = "LINESTRING(";
      for (let k = 0; k < val.length; k++) {
        str += `${val[k][0]} ${val[k][1]}`;
        if (k != val.length - 1) {
          str += ",";
        }
      }
      str += ")";
      return str;
    },
    addLinesDraw(val) {
      var that = this;
      // if (ringId != null && ringId != "") {
      //   $.ajax({
      //     url: "api/routeIn/routein/selectList",
      //     type: "post",
      //     data: {
      //       id: ringId,
      //     },
      //     dataType: "JSON",
      //     success: function (data) {
      that.peopleLineAddlayer.getSource().clear();
      var entityData = "";
      var entityArr = [];
      entityData = val.match(/\(([^)]*)\)/);

      // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
      if (entityData && entityData != "") {
        entityData = entityData[1].split(",");

        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
          ]);
        }
      }

      var lineCoords = entityArr; // 线里点的集合

      var view = ol2dOncePoint.getView();
      view.setCenter([
        lineCoords[Math.ceil(entityArr.length / 2)][0],
        lineCoords[Math.ceil(entityArr.length / 2)][1],
      ]);
      view.setZoom(14.5);

      // 要素
      // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
      var feature_LineString = new Feature({
        geometry: new LineString(lineCoords),
      });

      feature_LineString.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          //边线颜色
          stroke: new Stroke({
            color: "rgb(252, 94, 32)",
            width: 5,
          }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
      that.butTitle = "重新绘画";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (that.draw != null) {
        that.beginDraw = false;
        that.draw.controlDrawing(true);
        that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
        $("#map").unbind("mousemove");
        // setTimeout(() => {
        this.tipTitle = "";
        this.showTip = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
#map {
  position: relative;
  .controlMap {
    position: absolute;
    top: 10px;
    left: calc(50% - 97px);
    z-index: 2 !important;
    #openDrawLine,
    #openDrawPoiton {
      width: 174px;
      position: absolute;
      // top: 43px;
      top: 10px;
      // left: calc(50% - 96px);
      left: 50%;
    }
    .openDrawsb {
      background-color: #fff;
      color: black;
    }
    .activeDraw {
      background-color: #409eff;
      color: #fff;
    }
  }
  #dataConfirm {
    position: absolute;
    top: 20px;
    left: calc(50% + 82px);
    z-index: 3 !important;
  }
}
</style>

 src/components/mapOncePoint/tip.vue

New file
@@ -0,0 +1,25 @@
<template>
  <div
    class="mapTip"
    :style="{ top: position.h + 'px', left: position.w + 'px' }"
  >
    {{ title }}
  </div>
</template>

<script>
export default {
  props: ["title", "position"],
};
</script>

<style lang="scss" scoped>
.mapTip {
  background-color: rgb(168, 168, 168);
  padding: 5px;
  border: 1px solid #000;
  position: absolute;
  z-index: 10 !important;
  border-radius: 5px;
}
</style>

 src/main.js

@@ -52,6 +52,9 @@
Vue.component('avueUeditor', avueUeditor);
Vue.component('flowDesign', flowDesign);
Vue.component('tenantPackage', tenantPackage);
//加载全局组件选地图定位点，每个页面都要使用
import chousePoint from './components/mapOncePoint/chousePoint'
Vue.component("chousePoint", chousePoint);
// 加载相关url地址
Object.keys(urls).forEach(key => {
    Vue.prototype[key] = urls[key];
@@ -72,4 +75,4 @@
    store,
    i18n,
    render: h => h(App)
}).$mount('#app');
}).$mount('#app');

 src/router/views/index.js

@@ -106,6 +106,20 @@
                import ( /* webpackChunkName: "views" */ '@/views/wel/farmDetail')
        }]
    },
  {
    path: '/recovery',
    redirect: '/recovery/recovery',
    component: Layout,
    children: [{
      path: 'recovery',
      name: '采收记录',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import ( /* webpackChunkName: "views" */ '@/views/recovery/recovery')
    }]
  },
    {
        path: '/dict-horizontal',
        component: Layout,
@@ -232,4 +246,4 @@
                import ( /* webpackChunkName: "views" */ '@/views/farm/farm')
        }]
    },
]
]

 src/views/land/land.vue

@@ -48,6 +48,15 @@
        >农事记录
        </el-button
        >
        <el-button
          icon="el-icon-circle-plus-outline"
          type="text"
          size="mini"
          @click="startc(row)"
          :size="size"
        >采收记录
        </el-button
        >
      </template>
    </avue-crud>
  </basic-container>
@@ -302,6 +311,12 @@
        query: row
      });
    },
    startc(row) {
      this.$router.push({
        path: `/recovery`,
        query: row
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);

 src/views/panorama/panorama.vue

New file
@@ -0,0 +1,275 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.panorama_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{ type, disabled }" slot="chouseJdWdForm">
        <chousePoint @setData="getMapDatas" ref="chousePointRef"></chousePoint>
       </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/panorama/panorama";
  import {mapGetters} from "vuex";
  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "全景名称",
              prop: "panoramaName",
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "全景地址",
              prop: "panoramaUrl",
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "选择地点",
              prop: "chouseJdWd",
              hide: true,
              viewDisplay: false,
              span: 24,
            },
            {
              label: "详细地点",
              prop: "addressName",
              hide: true,
              // overHidden: true,
              editDisplay: false,
              addDisplay: false,
              span: 24,
            },
            {
              label: "经度",
              prop: "jd",
              disabled: true,
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
            {
              label: "纬度",
              prop: "wd",
              disabled: true,
              rules: [{
                required: true,
                message: "请输入",
                trigger: "blur"
              }]
            },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.panorama_add, false),
          viewBtn: this.vaildData(this.permission.panorama_view, false),
          delBtn: this.vaildData(this.permission.panorama_delete, false),
          editBtn: this.vaildData(this.permission.panorama_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      getMapDatas(res) {
        this.form["jd"] = res[0];
        this.form["wd"] = res[1];
        this.form["addressName"] = res[2];
      },
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then((res) => {
            this.form = res.data.data;
            if (type == "edit") {
              let that = this;
              this.$store.commit("readDom", {
                this: that,
                refName: "chousePointRef",
                fn: (dom) => {
                  dom.openMaps({
                    jd: this.form.jd,
                    wd: this.form.wd,
                    name: this.form.addressName,
                  });
                },
              });
            }
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
</style>

 src/views/remote/remote.vue

New file
@@ -0,0 +1,218 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.remote_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/remote/remote";
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "遥感名称",
              prop: "reName",
              rules: [{
                required: true,
                message: "请输入遥感名称",
                trigger: "blur"
              }]
            },
            {
              label: "遥感地址",
              prop: "reUrl",
              rules: [{
                required: true,
                message: "请输入遥感地址",
                trigger: "blur"
              }]
            },
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.remote_add, false),
          viewBtn: this.vaildData(this.permission.remote_view, false),
          delBtn: this.vaildData(this.permission.remote_delete, false),
          editBtn: this.vaildData(this.permission.remote_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      rowSave(row, done, loading) {
        add(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          window.console.log(error);
        });
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          done();
        }, error => {
          loading();
          console.log(error);
        });
      },
      rowDel(row) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(row.id);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.$refs.crud.toggleSelection();
          });
      },
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          getDetail(this.form.id).then(res => {
            this.form = res.data.data;
          });
        }
        done();
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
</style>