+专题活动信息中选点bug+专题活动信息中字段补全

liuyg

2022-03-24 d717492e9ff7dfd56762e1c55a97081a502c871f

+专题活动信息中选点bug+专题活动信息中字段补全

 src/api/hd/baseMap.js

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

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

export const getHdName = (current, size, params) => {
  return request({
    url: '/api/blade-hd/hd/selectInList',
    method: 'post',
    params: {
      ...params,
      current,
      size,
    }
  })
}

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

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

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


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

 src/components/basemap/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/basemap/drawFence.js

New file
@@ -0,0 +1,80 @@
import ol from "ol";
class drawFence {
    constructor(props) {
        //这里初始化class的时候需要传map对象进来
        this.map = props;
        this.source;
        this.fenceLayer;
        this.draw;
        //样式
        this.fenceStyle = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
        this.init()
    }
    init() {
        //临时图层的数据源
        this.source = new ol.source.Vector();
        //新建临时图层，并设置临时图层渲染各种要素的样式
        this.fenceLayer = new ol.layer.Vector({
            source: this.source,
            style: this.fenceStyle
        });
        this.map.addLayer(this.fenceLayer)
    }
    drawingEnd(evt) {
        let geo = evt.feature.getGeometry()
        let type = geo.getType(); //获取类型
        console.log(geo)
        //根据不同的类型执行不同的操作
        const handle = {
            'Circle': () => {
                //获取中心点和半径
                let center = geo.getCenter()
                let radius = geo.getRadius()
                console.log(center, radius)
            },
            'Polygon': () => {
                //获取坐标点
                let points = geo.getCoordinates()
                console.log(points)
            },
            'LineString': () => {
                let points = geo.getCoordinates()
                console.log(points)
            }
        }
        if (handle[type]) handle[type]()
        this.closeDraw()
    }
    closeDraw() {
        this.map.removeInteraction(this.draw);
    }
    //画图
    drawingFence(type) {
        this.draw = new ol.interaction.Draw({
            source: this.source, //设置要素源，绘制结束后将绘制的要素添加到临时图层
            type: type, //绘制的类型
        });
        this.map.addInteraction(this.draw);
        const that = this;
        //绘图结束事件回调
        this.draw.on('drawend', function (evt) {
            that.drawingEnd(evt)
        });
    }
}

export default drawFence;

 src/components/basemap/main.vue

New file
@@ -0,0 +1,860 @@
<!--
 * @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 v-if="false">
        <el-button
          type="primary"
          icon="el-icon-finished"
          @click="openDrawLineMethod"
          :class="[
            'openDrawsb',
            openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
          ]"
          >规划路线</el-button
        >
        <el-button
          type="primary"
          @click="openDrawPointMethod"
          icon="el-icon-coordinate"
          :class="[
            'openDrawsb',
            openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
          ]"
          >规划标点</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>
      <el-button-group id="openDrawLine" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelected"
          :disabled="beginDraw"
          >{{ butTitle }}</el-button
        >
        <el-button
          type="primary"
          :disabled="!beginDraw"
          @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>
      <el-button-group id="openDrawPoiton" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelectedPoint"
          :disabled="beginDraw"
          >{{ butTitlePoint }}</el-button
        >
        <el-button
          type="primary"
          :disabled="!beginDraw"
          @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,
  },
  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 "";
      }
    },
  },
  mounted() {
    const ol2d = 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.ol2d = ol2d;

    var view = ol2d.getView();

    // 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.ol2d });
    window.ol3d = ol3d;

    ol2d.addLayer(this.gunAddlayer);
    ol2d.addLayer(this.peopleAddlayer);
    ol2d.addLayer(this.carAddlayer);
    ol2d.addLayer(this.peopleLineAddlayer);
    ol2d.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: {
    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.ol2d.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.ol2d.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.ol2d.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 = ol2d.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 = ol2d;
      // console.log(ol2d, 1);
      // console.log(drawFence, 2);
      // var d = new drawFence(ol2d);
      // 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.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 = ol2d.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/basemap/mainInThere.vue

New file
@@ -0,0 +1,352 @@
<!--
 * @Descripttion:
 * @version:
 * @Author: song
 * @Date: 2021-04-08 15:14:57
 * @LastEditors: song
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map"></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 OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";
// import Cesium from "libs/Cesium/Cesium.js";

export default {
  name: "MapInThere",
  components: {
    tip,
  },
  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(),
      }),
      DrawLayer: new VectorLayer({
        // 图标图层
        // zIndex: 1000,
        source: new VectorSource(),
      }),
      oldService: "",
      mapService: [
        // {
        //   id: "",
        //   value: "",
        // show:''
        // },
      ],
    };
  },
  // computed: {
  //   mapServiceSee() {
  //   },
  // },
  // watch: {
  //   // openDrawChiose() {
  //   //   console.log(this.openDrawChiose, "openDrawChiose");
  //   // },
  //   mapServiceValue: {
  //     handler(val) {
  //       // console.log("深度监听：", val);
  //       // this.checkDom("getMapDataRefs", (dom) => {
  //       //   dom.setServiceData(this.mapServiceValue);
  //       // });
  //     },
  //     deep: true,
  //   },
  // },
  mounted() {
    const ol2d = 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.ol2d = ol2d;

    var view = ol2d.getView();

    // 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.ol2d });
    // window.ol3d = ol3d;

    // ol2d.addLayer(this.gunAddlayer);
    // ol2d.addLayer(this.peopleAddlayer);
    // ol2d.addLayer(this.carAddlayer);
    // ol2d.addLayer(this.peopleLineAddlayer);
    // ol2d.addLayer(this.beginsPoint);
  },
  methods: {
    clearServiceData() {
      this.mapService = [];
    },
    setServiceData(data) {
      let that = this;
      // console.log(data);
      //判断是否是新增
      if (data.length == that.mapService.length) {
        // console.log("不是新增判断显影");
        // 不是新增判断显影
        for (let k in data) {
          if (data[k].show != that.mapService[k].show) {
            //如果有改变
            that.mapService[k].show = data[k].show; // 同步最新show状态
            if (data[k].show) {
              //显示
              // console.log(window.ol2d);
              // console.log(that.mapService);
              window.ol2d.addLayer(that.mapService[k].layer);
            } else {
              //隐藏
              window.ol2d.removeLayer(that.mapService[k].layer);
            }
          }
        }
      } else if (data.length > that.mapService.length) {
        // console.log("新增直接push");
        //新增直接push
        let layer = new OlLayerTile({
          // source: new XYZ({
          //   url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
          // }),
          // new OlLayerTile({
          zIndex: 5,
          title: data.length - 1,
          source: new XYZ({
            url: data[data.length - 1].service, // 注记
          }),
          // }),
        });
        // console.log(data[data.length - 1].service);
        // console.log(that.oldService);
        // let str = "";
        // for (let k in that.oldService) {
        //   if (that.oldService[k] != data[data.length - 1].service[k]) {
        //     // console.log(that.oldService[k]);
        //     // console.log(data[data.length - 1].service[k]);
        //     str += that.oldService[k];
        //   }
        // }
        // console.log("str", str);
        that.oldService = data[data.length - 1].service;
        window.ol2d.addLayer(layer);
        that.mapService.push({
          ...data[data.length - 1],
          layer: layer,
        });
      } else if (data.length < that.mapService.length) {
        // console.log("删除的情况", this.$store.state.map.deleteIndex);
        //删除的情况
        if (that.$store.state.map.deleteIndex != -1) {
          window.ol2d.removeLayer(
            that.mapService[that.$store.state.map.deleteIndex].layer
          );
          that.mapService.splice(that.$store.state.map.deleteIndex, 1);
        }
      }
      // console.log(this.mapService);
      // for()
    },
    // addMapService(data) {
    //   let layer = new OlLayerTile({
    //     // source: new XYZ({
    //     //   url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
    //     // }),
    //     // 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", // 注记
    //     }),
    //     // }),
    //   });
    //   this.mapService.push({
    //     layer: layer,
    //   });
    //   window.ol2d.addLayer(layer);
    //   setTimeout(() => {
    //     window.ol2d.removeLayer(layer);
    //   }, 2000);
    // },
  },
};
</script>

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

 src/components/basemap/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/components/map/mainInThere.vue

@@ -58,13 +58,10 @@
      </el-button-group>
    </div>
    <el-button-group id="dataConfirm" style="display: none">
      <el-button
        type="success"
        icon="el-icon-check"
        @click="useMapData"
        v-show="notNow"
      <el-button type="success" icon="el-icon-check" @click="useMapData"
        >确定选择</el-button
      >
      <!-- v-show="notNow" -->
      <el-button
        type="danger"
        @click="clearUseMapData"
@@ -506,6 +503,7 @@
      if (open) {
        this.openTitle = "";
        this.$parent.closeOpenedMap(); //开放按钮
        this.drawLayerRoom();
      }
    },
    //取消按钮
@@ -517,14 +515,13 @@
      //返回用数据
      // console.log(this.openDrawChiose, this.nowIndex);
      this.$parent.MapDataShow = false;
      let val;
      if (this.openDrawChiose == "openDrawLine") {
        val = "line";
      } else if (this.openDrawChiose == "openDrawPoint") {
        val = "point";
      } else {
        val = "notData";
      }
      let val =
        this.openDrawChiose == "openDrawLine"
          ? "line"
          : this.openDrawChiose == "openDrawPoint"
          ? "point"
          : "notData";
      // console.log(val);
      this.$parent.backMapDataOurData(val, this.nowIndex);
      // 返回后关闭操作按钮
      this.closeOurBut();
@@ -662,9 +659,9 @@
      );
      that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
      that.butTitle = "重新绘画";
      if (!this.fromView) {
      // if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      // }
      if (that.draw != null) {
        that.beginDraw = false;
        that.draw.controlDrawing(true);

 src/router/views/index.js

@@ -117,20 +117,33 @@
        import( /* webpackChunkName: "views" */ '@/views/life/life')
    }]
  },
  {
    path: '/hd',
    component: Layout,
    redirect: '/hd/index',
    children: [{
      path: 'index',
      name: '专题活动',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/hd/hd')
    }]
  },
  // {
  //   path: '/hd',
  //   component: Layout,
  //   redirect: '/hd/index',
  //   children: [{
  //     path: 'index',
  //     name: '专题活动',
  //     meta: {
  //       i18n: 'index'
  //     },
  //     component: () =>
  //       import( /* webpackChunkName: "views" */ '@/views/hd/hd')
  //   }]
  // }, {
  //   path: '/hd/baseMap',
  //   component: Layout,
  //   redirect: '/baseMap/baseMap',
  //   children: [{
  //     path: 'index',
  //     name: '专题活动',
  //     meta: {
  //       i18n: 'index'
  //     },
  //     component: () =>
  //       import( /* webpackChunkName: "views" */ '@/views/hd/baseMap')
  //   }]
  // },
  {
    path: '/vr',
    component: Layout,

 src/store/getters.js

@@ -28,5 +28,7 @@
  flowRoutes: (state) => state.dict.flowRoutes,
  rotesData: (state) => state.map.rotesData, //获取线
  pointData: (state) => state.map.pointData, //获取点
  mapServiceValue: (state) => state.map.mapServiceValue,
  notSet: (state) => state.map.notSet,
};
export default getters;

 src/store/modules/map.js

@@ -11,6 +11,9 @@
  state: {
    rotesData: false,
    pointData: false,
    mapServiceValue: [],
    deleteIndex: -1,
    notSet: false,
  },
  //   actions: {
  //     FlowRoutes({commit}) {
@@ -25,6 +28,19 @@
  //     },
  //   },
  mutations: {
    changeNotSet(state, data) {
      state.notSet = data;
    },
    setMapServiceValue(state, data) {
      state.mapServiceValue.push(data);
    },
    deleteMapServiceValue(state, index) {
      state.deleteIndex = index;
      state.mapServiceValue.splice(index, 1);
    },
    clearMapServiceValue(state, data) {
      state.mapServiceValue = [];
    },
    setRotesData(state, data) {
      state.rotesData = data;
    },

 src/views/hd/baseMap.vue

New file
@@ -0,0 +1,632 @@
<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.hd_delete"
          @click="handleDelete"
          >删 除
        </el-button>
      </template> -->
      <template slot-scope="{ type, disabled }" slot="haveBaseMapForm">
        <div class="inputInline" v-show="!notSet">
          <el-input
            v-model="chouseBaseMapTypeOnce"
            placeholder="底图名称"
            class="inputInlineType"
          ></el-input>
          <el-input
            placeholder="请输入底图地址"
            v-model="mapServiceValueOnce"
            class="input-with-select"
          >
            <!-- <el-select
            v-model="chouseBaseMapTypeOnce"
            slot="prepend"
            placeholder="请选择"
          >
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
          </el-select> -->
            <el-button
              slot="append"
              icon="el-icon-plus"
              @click="addMapServices"
            ></el-button>
          </el-input>
        </div>
      </template>
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <baseMapMap
          ref="baseMapMap"
          id="baseMapMap"
          @setMapData="setMapData"
          @changeMapSI="changeMapSI"
        ></baseMapMap>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {
  getList,
  getHdName,
  getDetail,
  add,
  update,
  remove,
} from "@/api/hd/baseMap";
import { mapGetters } from "vuex";
import baseMapMap from "./baseMapMap.vue";

export default {
  components: {
    // Map,
    baseMapMap,
  },
  data() {
    return {
      mapServiceValueOnce: "",
      chouseBaseMapTypeOnce: "XYZ",
      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,
        align: "center",
        selection: true,
        indexLabel: "序号",
        dialogClickModal: false,
        column: [
          {
            label: "专题名称",
            prop: "hdid",
            editDisabled: true,
            type: "select",
            dicData: [
              // {
              //   label: "真",
              //   value: "true",
              // },
              // {
              //   label: "假",
              //   value: "false",
              // },
            ],
            rules: [
              {
                required: true,
                message: "请输入活动名称",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "活动地点",
          //   viewDisply:false,
          //   addDisplay: false,
          //   hide: true,
          //   editDisply: false,
          //   prop: "address",
          // },
          // {
          //   label: "时间",
          //   prop: "time",
          //   type: "datetime",
          //   span: 8,
          //   format: "yyyy-MM-dd hh:mm:ss",
          //   valueFormat: "yyyy-MM-dd hh:mm:ss",
          //   mock: {
          //     type: "datetime",
          //     format: "yyyy-MM-dd hh:mm:ss",
          //     now: true,
          //   },
          // },
          // {
          //   label: "图片",
          //   prop: "tpurl",
          //   // dataType: 'string',
          //   type: "upload",
          //   propsHttp: {
          //     res: "data",
          //     url: "link",
          //   },
          //   span: 24,
          //   listType: "picture-card",
          //   tip: "只能上传jpg/png文件，且不超过500kb",
          //   action: "/api/blade-resource/oss/endpoint/put-file",
          // },
          {
            label: "专题底图",
            hide: true,
            prop: "haveBaseMap",
            component: "AvueUeditor",
            // options: {
            //   action: "/api/blade-resource/oss/endpoint/put-file",
            //   props: {
            //     res: "data",
            //     url: "link",
            //   },
            // },
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入完整的底图服务内容",
            //     trigger: "blur",
            //   },
            // ],
            minRows: 5,
            span: 24,
          },
          {
            label: "选择路径和标点",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true,
          },
          // {
          //   label: "路线",活动
          //   hide: true,
          //   prop: "lx",
          //   editDisply: false,
          //   addDisplay: false,
          // },
        ],
      },
      data: [],
      LineData: [],
      PointData: [],
    };
  },
  // watch: {
  // rotesData() {
  //   console.log(this.rotesData);
  // },
  // pointData() {
  //   console.log(this.pointData);
  // },
  // },
  computed: {
    ...mapGetters(["permission", "mapServiceValue", "notSet"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.hd_add, false),
        viewBtn: this.vaildData(this.permission.hd_view, false),
        delBtn: this.vaildData(this.permission.hd_delete, false),
        editBtn: this.vaildData(this.permission.hd_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {
    let that = this;
    getHdName().then((res) => {
      let data = res.data.data;
      // console.log(data);
      for (let k in data) {
        that.option.column[0].dicData.push({
          label: data[k].hdname,
          value: data[k].id,
        });
      }
    });
  },
  methods: {
    changeMapSI() {
      this.form["haveBaseMap"] = this.mapServiceValue.length != 0 ? "have" : "";
    },
    addMapServices(val) {
      if (val == 1) {
        this.mapServiceValueOnce = "";
      }
      if (this.mapServiceValueOnce == "") {
        this.$message({
          message: "请输入地图服务地址",
          type: "warning",
        });
        return;
      }
      if (this.chouseBaseMapTypeOnce == "") {
        this.$message({
          message: "请输入地图服务类型",
          type: "warning",
        });
        return;
      }
      // console.log(this.mapServiceValue, this.chouseBaseMapType);
      // this.form["haveBaseMap"] = this.mapServiceValueOnce;
      //传入控制地图层 转store
      // this.$refs.baseMapMap.addService({
      //   type: this.chouseBaseMapType,
      //   service: this.mapServiceValue,
      // });
      let that = this;
      this.$store.commit("setMapServiceValue", {
        type: that.chouseBaseMapTypeOnce,
        service: that.mapServiceValueOnce,
        show: true,
        layer: null,
      });
      this.mapServiceValueOnce = "";
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    rowSave(row, done, loading) {
      if (row.haveBaseMap == "") {
        this.$message({
          message: "请输入至少一个完整的底图服务内容",
          type: "warning",
        });
        loading();
        return;
      }
      let types = "",
        urls = "",
        leng = this.mapServiceValue.length - 1;
      for (let k in this.mapServiceValue) {
        types += this.mapServiceValue[k].type;
        urls += this.mapServiceValue[k].service;
        if (k != leng) {
          types += ",";
          urls += ",";
        }
      }
      let data = {
        hdid: row.hdid,
        maptype: types,
        mapurl: urls,
      };
      // console.log(data);
      // loading();
      // return;
      // var d = [];
      // for (var k in row.tpurl) {
      //   d.push(row.tpurl[k].value);
      // }
      // row.tpurl = d.join(",");
      // let outMapData = this.$refs.getMapData.myRulesUse();
      // if (!outMapData) {
      //   loading();
      //   return;
      // }
      // row["lxname"] = outMapData[0][0];
      // row["lx"] = outMapData[0][1];
      // row["addressname"] = outMapData[1][0];
      // row["address"] = outMapData[1][1];
      // console.log(row);
      // loading();
      // return;
      add(data).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      // let outMapData = this.$refs.getMapData.myRulesUse();
      // if (!outMapData) {
      //   loading();
      //   return;
      // }
      // row["lxname"] = outMapData[0][0];
      // row["lx"] = outMapData[0][1];
      // row["addressname"] = outMapData[1][0];
      // row["address"] = outMapData[1][1];
      // console.log(row);
      // loading();
      // return;
      if (row.haveBaseMap == "") {
        this.$message({
          message: "请输入至少一个完整的底图服务内容",
          type: "warning",
        });
        loading();
        return;
      }
      let types = "",
        urls = "",
        leng = this.mapServiceValue.length - 1;
      for (let k in this.mapServiceValue) {
        types += this.mapServiceValue[k].type;
        urls += this.mapServiceValue[k].service;
        if (k != leng) {
          types += ",";
          urls += ",";
        }
      }
      row.maptype = types;
      row.mapurl = urls;
      // console.log(row);
      // loading();
      // return;
      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();
        });
    },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;

      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }

      //  首次执行
      checkDom();
    },
    beforeOpen(done, type) {
      let that = this;
      if (this.notSet == true) {
        this.$store.commit("changeNotSet", false);
      }
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          console.log(res);
          //解析数据
          let types = this.form.maptype.split(","),
            urls = this.form.mapurl.split(",");
          console.log(types);
          console.log(urls);

          for (let k in types) {
            setTimeout(() => {
              this.$store.commit("setMapServiceValue", {
                type: types[k],
                service: urls[k],
                show: true,
                layer: null,
              });
            }, 500);
          }
        });
        //控制按钮不可编辑
        if (type == "view") {
          this.$store.commit("changeNotSet", true);
        }

        // this.checkDom("getMapData", (dom) => {
        //   // dom.init(val, num, value);
        //   dom[type + "Init"]([
        //     [that.form.lxname, that.form.lx],
        //     [that.form.addressname, that.form.address],
        //   ]);
        // });
      }
      // if (type == "add") {
      //   let that = this;
      //   getHdName().then((res) => {
      //     let data = res.data.data;
      //     // console.log(data);
      //     for (let k in data) {
      //       that.option.column[0].dicData.push({
      //         label: data[k].hdname,
      //         value: data[k].id,
      //       });
      //     }
      //   });
      // }

      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;
        for (let k in this.data) {
          this.data[k]["haveBaseMap"] = this.data[k].maptype;
        }
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</script>

<style lang="scss">
.mapClass {
  margin-left: 88px;
}

.mapClass div label {
  display: none;
}

.mapClassMain {
  /* padding-left: 25px !important; */
}

#baseMapMap {
  width: calc(100% + 90px);
  position: relative;
  left: -90px;
  height: 400px;
}
.input-with-select {
  width: calc(100% - 10px);
  position: relative;
  left: 10px;
  .el-input-group__prepend {
    // width: auto !important;
    // // height: auto !important;
    // padding: 0 !important;
  }
  .el-input__inner {
    // width: auto !important;
    // height: auto !important;
  }
  .el-input--small {
    width: 100px;
  }
}
.inputInline {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  .inputInlineType {
    width: 110px;
  }
}
</style>

 src/views/hd/baseMapMap.vue

New file
@@ -0,0 +1,152 @@
<template>
  <div class="baseMapMap" :key="Refresh">
    <MapInThere ref="baseMapMapsMap" />
    <div class="controlbaseMapMap">
      <div v-for="(item, index) in mapServiceValue" :key="index">
        {{ item.type + " " + index }}
        <el-switch class="around_left" v-model="item.show"> </el-switch>
        <el-button
          class="around_left"
          type="danger"
          icon="el-icon-delete"
          circle
          @click="deleteMapService(index)"
          :disabled="notSet"
        ></el-button>
        <el-divider v-if="index != mapServiceValue.length - 1"></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/basemap/mainInThere.vue";
export default {
  name: "getMapData",
  components: {
    MapInThere,
  },
  computed: {
    ...mapGetters(["mapServiceValue", "notSet"]),
  },
  watch: {
    mapServiceValue: {
      handler(val) {
        // console.log("深度监听：", val);
        //改变父级标单字段验证状态
        this.$emit("changeMapSI");
        this.checkDom("baseMapMapsMap", (dom) => {
          //更改地图图层数据
          dom.setServiceData(this.mapServiceValue);
        });
      },
      deep: true,
    },
  },
  data() {
    return {
      mapServiceData: [],
    };
  },
  destroyed() {
    //销毁清楚数据
    this.$store.commit("clearMapServiceValue");
    this.checkDom("baseMapMapsMap", (dom) => {
      //更改地图图层数据
      dom.clearServiceData();
    });
  },
  mounted() {},
  methods: {
    deleteMapService(index) {
      // console.log(index);
      this.$store.commit("deleteMapServiceValue", index);
    },
    // addService(data) {
    //   this.mapServiceData.push({
    //     ...data,
    //     show: true,
    //   });
    //   console.log(this.mapServiceData);
    //   this.$refs.baseMapMapsMap.addMapService();
    // },
    checkDom(name, fn) {
      //  声明定时器
      let that = this;
      var timer = null;
      //  检查dom是否执行完成
      function checkDom() {
        let dom = that.$refs[name];
        if (dom) {
          //  执行dom加载完成后的操作
          //  清除定时器
          if (!timer) {
            clearTimeout(timer);
          }
          if (fn) {
            //回调函数
            fn(dom);
            return;
          } else {
            return dom;
          }
        } else {
          //  自我调用
          timer = setTimeout(checkDom, 100);
        }
      }
      //  首次执行
      checkDom();
    },
  },
};
</script>

<style lang="scss">
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}
.baseMapMap {
  width: 100%;
  height: 100%;
  position: relative;
  .controlbaseMapMap {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px -3px #000;
  }
  // 验证
  .notPath {
    // border-bottom: 0.5px solid red;
  }
}

//过度动画
.list-enter {
  opacity: 0;
  transform: translateY(10px);
}
.list-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.list-enter-to,
.list-leave {
  opacity: 1;
}
​ .list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}
.around_left {
  padding: 0 5px;
}
</style>