zhba/zhba_enterprises.git

parent: 303d9b6c | patch | commit | ignore whitespace

liuyg

2022-03-16 e4be7a095f31b76d4f3d60c06eefe774ffd264fc

+地图添加面  电子围栏

9 files modified

1 files renamed

13 files added

	public/index.html	65 ●●●●● patch \| view \| raw \| blame \| history
	public/js/1.js	8098 ●●●●● patch \| view \| raw \| blame \| history
	public/js/drawTree.js	8437 ●●●●● patch \| view \| raw \| blame \| history
	public/js/jquery.min.js	5682 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map copy/Draw.js	1280 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map copy/drawFence.js	80 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map copy/main.vue	860 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map copy/mainInThere.vue	794 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map copy/tip.vue	25 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/Draw.js	2165 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/main.vue	724 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/mainInThere.vue	903 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map1/Draw.js	1163 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map1/main.vue	patch \| view \| raw \| blame \| history
	src/components/map1/main1.vue	596 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map1/tip.vue	25 ●●●●● patch \| view \| raw \| blame \| history
	src/router/axios.js	38 ●●●●● patch \| view \| raw \| blame \| history
	src/router/views/index.js	2069 ●●●●● patch \| view \| raw \| blame \| history
	src/store/getters.js	5 ●●●●● patch \| view \| raw \| blame \| history
	src/store/modules/control.js	7 ●●●●● patch \| view \| raw \| blame \| history
	src/views/rail/getMapDataInThere.vue	543 ●●●●● patch \| view \| raw \| blame \| history
	src/views/rail/rail.vue	252 ●●●●● patch \| view \| raw \| blame \| history
	vue.config.js	6 ●●●●● patch \| view \| raw \| blame \| history

 public/index.html

@@ -4,7 +4,7 @@
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
  <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
@@ -18,6 +18,12 @@
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.8.12/index.css">
  <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
  <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>

  <!-- 地图 -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="libs/Cesium/Cesium.js"></script>
  <script type="text/javascript" src="js/drawTree.js"></script>

  <link rel="icon" href="<%= BASE_URL %>favicon.png">
  <title>保安服务企业管理</title>
  <style>
@@ -53,7 +59,7 @@
      padding: 1em 0;
    }

    .avue-home__footer > a {
    .avue-home__footer>a {
      font-size: 12px;
      color: #ABABAB;
      text-decoration: none;
@@ -75,41 +81,42 @@
      color: #ABABAB;
      font-size: 12px;
    }

  </style>
</head>

<body>
<noscript>
  <strong>
    很抱歉，如果没有 JavaScript 支持，Saber 将不能正常工作。请启用浏览器的 JavaScript 然后继续。
  </strong>
</noscript>
<div id="app">
  <div class="avue-home">
    <div class="avue-home__main">
      <img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
      <div class="avue-home__title">
        正在加载资源
  <noscript>
    <strong>
      很抱歉，如果没有 JavaScript 支持，Saber 将不能正常工作。请启用浏览器的 JavaScript 然后继续。
    </strong>
  </noscript>
  <div id="app">
    <div class="avue-home">
      <div class="avue-home__main">
        <img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
        <div class="avue-home__title">
          正在加载资源
        </div>
        <div class="avue-home__sub-title d">
          初次加载资源可能需要较多时间 请耐心等待
        </div>
      </div>
      <div class="avue-home__sub-title d">
        初次加载资源可能需要较多时间 请耐心等待
      </div>
    </div>
    <div class="avue-home__footer">
      <!-- <a href="https://bladex.vip" target="_blank">
      <div class="avue-home__footer">
        <!-- <a href="https://bladex.vip" target="_blank">
        https://bladex.vip </a> -->
      </div>
    </div>
  </div>
</div>
<!-- built files will be auto injected -->
<script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/vue/2.6.10/vue.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/vuex/3.1.1/vuex.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/avue/2.8.12/avue.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/echarts/echarts.min.js" charset="utf-8"></script>
  <!-- built files will be auto injected -->
  <script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/vue/2.6.10/vue.min.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/vuex/3.1.1/vuex.min.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/avue/2.8.12/avue.min.js" charset="utf-8"></script>
  <script src="<%= BASE_URL %>cdn/echarts/echarts.min.js" charset="utf-8"></script>
</body>

</html>

 public/js/1.js

New file
Diff too large

 public/js/drawTree.js

New file
Diff too large

 public/js/jquery.min.js

New file
Diff too large

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

New file
@@ -0,0 +1,794 @@
<!--
 * @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 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-group>
      <div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
      <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" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
      </el-button-group>
      <el-button-group id="openDrawPoint" style="display: none">
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="getTypeSelectedPoint"
          :disabled="beginDraw"
          >{{ butTitlePoint }}</el-button
        >
        <el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
          >取消</el-button
        >
      </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
      >
      <el-button
        type="danger"
        @click="clearUseMapData"
        icon="el-icon-refresh-right"
        >清空</el-button
      >
    </el-button-group>
    <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 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(),
      }),
      peopleLineAddlayer: null,

      // 存储新增点，线，面，数据的地方
      // 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, //若是查看  不显示更改按钮

      openTitle: "", //当前选择

      ourDatas: [], //所有数据
      ourLayer: {}, //图层合集

      notNow: true, //如果修改，不显示确认按钮
    };
  },
  computed: {
    openDrawChiose() {
      // console.log(
      //   "this.openDrawLine:",
      //   this.openDrawLine,
      //   "this.openDrawPoint:",
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
      } else {
        return "notBut---";
      }
    },
  },
  // watch: {
  //   openDrawChiose() {
  //     console.log(this.openDrawChiose, "openDrawChiose");
  //   },
  // },
  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: {
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
      }
      this.useMapData();
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      this.Renders(ourDatas);
    },
    //加载底层路线和图标
    Renders(ourDatas) {
      // for (let i in ourDatas) {
      //   console.log(ourDatas[i].value, "------", i);
      // }
      this.deleteElement();
      for (let k in ourDatas) {
        if (ourDatas[k].isLine) {
          if (!ourDatas[k].value) {
            // this.deleteElement("line", ourDatas[k].id);
          } else {
            this.addLines(ourDatas[k], "line");
          }
        } else {
          if (!ourDatas[k].value) {
            // this.deleteElement("point", ourDatas[k].id);
          } else {
            this.addPoint(ourDatas[k], "point");
          }
        }
      }
      this.drawLayerRoom(); //重置绘画层
    },
    // 若没有value数据，删除地图上的元素
    deleteElement(name, id) {
      // console.log(name, id);
      // this.ourLayer[name + id].getSource().clear();
      for (let k in this.ourLayer) {
        this.ourLayer[k].getSource().clear();
      }
    },
    //加载点
    addPoint(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        }),
        iconFeature = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        iconFeatureTitle = new OlFeature({
          geometry: new OlGeomPoint(data.value), //绘制图形（点）
        }),
        that = this;
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            src: "img/dingwei/dingwei5.png",
          }),
        })
      );
      iconFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -40,
            fill: new OlStyleFill({
              color: "#1296DB",
            }),
          }),
        })
      );
      layer.getSource().addFeature(iconFeature);
      layer.getSource().addFeature(iconFeatureTitle);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 77777);
    },
    addLines(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        }),
        that = this;
      //绘画线路
      var entityData = "";
      var entityArr = [];
      entityData = data.value.match(/\(([^)]*)\)/);
      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; // 线里点的集合
      // console.log(lineCoords);
      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(18,150,219)",
            width: 5,
          }),
        })
      );
      //线名称
      let lineFeatureTitle = new OlFeature({
        geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
      });
      lineFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -10,
            fill: new OlStyleFill({
              color: "#1296DB",
            }),
          }),
        })
      );
      layer.getSource().addFeature(lineFeatureTitle);
      layer.getSource().addFeature(feature_LineString);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 88888);
    },

    //上面是初始化·················

    //下面是选择点或线路开始按钮
    init(val, num, value) {
      this.openTitle = val;
      if (value) {
        this.notNow = false;
      } else {
        this.notNow = true;
      }
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
        this.controlBut("openDrawLine", this.notNow);
      } else {
        // console.log("加载标点按钮");
        this.controlBut("openDrawPoint", this.notNow);
      }
    },
    controlBut(openName, notNow) {
      this.closeOurBut();
      this[openName] = true;
      $("#" + openName).show();
      $("#openTitle").show();
      if (!notNow) {
        $("#dataConfirm").show(100);
      }
    },
    closeOurBut(open) {
      $("#dataConfirm").hide();
      $("#openDrawPoint").hide();
      $("#openDrawLine").hide();
      $("#openTitle").hide();
      this.openDrawLine = false;
      this.openDrawPoint = false;
      if (open) {
        this.openTitle = "";
        this.$parent.closeOpenedMap(); //开放按钮
      }
    },
    //取消按钮
    stopDrawOur() {
      this.closeOurBut(true);
    },
    //确认数据
    useMapData() {
      //返回用数据
      // 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";
      }
      this.$parent.backMapDataOurData(val, this.nowIndex);
      // 返回后关闭操作按钮
      this.closeOurBut();
      //清除绘画图层
      this.drawLayerRoom();
    },
    //提示位置
    setTipPosition(x, y, n, m) {
      this.position.w = x + n;
      this.position.h = y + m;
    },
    //实时添加最上图层，为了编辑或新建路径能在最上
    drawLayerRoom() {
      let that = this;
      //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
      if (that.peopleLineAddlayer) {
        that.peopleLineAddlayer.getSource().clear();
        that.peopleLineAddlayer = null;
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        });
      } else {
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource(),
        });
      }
      ol2d.addLayer(this.peopleLineAddlayer);
    },

    //选择绘画路线------↓
    getTypeSelected() {
      let that = this;
      this.beginDraw = true;
      this.draw && ol2d.removeInteraction(this.draw);
      //再根据typeSelect的值绘制新的Interaction
      this.drawLayerRoom(); //重置绘画层
      this.addInteraction();
    },
    addInteraction() {
      let value = this.typeSelected,
        that = this;
      this.tipTitle = "单击左键或右键开始绘画";
      $("#map") //提示器
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });
      this.coordinates = [];
      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 = "可继续，或选择最终位置双击结束";
          },
          coordinateOver: function (res) {
            // 结束绘画 处理数据
            let d = that.doData(that.coordinates);
            that.addLinesDraw(d);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
          },
        });
        ol2d.addInteraction(this.draw);
      }
    },
    //处理数据
    doData(val) {
      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;
      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 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: "red",
            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;
      }
    },
    //绘画路线------↑
    //绘画点-------↓
    getTypeSelectedPoint() {
      this.tipTitle = "单击左键选择位置";
      let that = this;
      let isHaveOne = false;
      this.drawLayerRoom(); //重置绘画层
      $("#map")
        .off("mousemove")
        .mousemove(function (e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });

      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传最终数据
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
          },
        });
        ol2d.addInteraction(this.draw);
      }
    },
    addIconMarker(intlat) {
      let that = this;
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat), //绘制图形（点）
      });
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            //透明度
            opacity: 1,
            //图片路径
            src: "img/dingwei/dingwei6.png",
          }),
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(iconFeature);
      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
      }
    },
    //绘制点------↑
  },
};
</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/map copy/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/Draw.js

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

 src/components/map/main.vue

@@ -7,31 +7,12 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map" style="height: 100%">
    <div class="controlMap">
      <el-button-group>
        <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>
    </div>
  <div id="map" style="height: calc(100% - 40px)">
    <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";
@@ -60,83 +41,152 @@
  // 缩放到范围控件
  // eslint-disable-next-line no-unused-vars
  ZoomToExtent,
  Rotate,
  Rotate
} from "ol/control.js";
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { ImageStatic, Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";
import Draw from "ol/interaction/Draw";
import { Point } from "ol/geom";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";

import { Vector } from "ol/source";
// import Draw from "./Draw";
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 img from "@/assets/img/car.png";
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,
    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(),
        source: new VectorSource()
      }),
      //多边形Layer
      polygonlayer: new VectorLayer({
      beginsPoint: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
        source: new VectorSource()
      }),
      vectorSource: new VectorSource(),
      features: [],
      feature: null,

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

      typeSelected: "Polygon",
      typeSelected: "LineString",
      drawLayer: null,
      draw: null,
      drawSource:null,
      coordinates: [],
      coordinatesStr: "",
      beginDraw: false,
      butTitle: "开始绘画",
      view: "",
      isDraw: true, // 是否绘制
      // map: null,

      showTip: false,
      tipTitle: "",
      position: {
        w: 200,
        h: 10,
        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: "影像",
          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", // 行政区划
          }),
            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" // 注记
          })
        })
      ],

      // 注意地图控件的写法
@@ -151,111 +201,303 @@
      view: new OlView({
        center: [0, 0],
        zoom: 2,
        projection: "EPSG:4326",
      }),
        projection: "EPSG:4326"
      })
    });
    window.ol2d = ol2d;

    var view = ol2d.getView();

    // view.setCenter([115.85883507433789, 28.708432053474827])
    view.setCenter([115.9032747077233, 28.67433116990186]);

    //设置放大层级
    view.setZoom(13);
    this.view = view;

    // const drawSource = new VectorSource();

    // const drawLayer = new VectorLayer({

    //     source: drawSource

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

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

    // ol2d.addLayer(drawLayer);
    //
    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.polygonlayer);
    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);

    //监听鼠标位置
    var that = this;
    //
    that.addNewLine();
    var obj = {
        fenceId: '12',
        name: '围栏3',
        center: '',
        radius: '',
        type: 'polyline',
        points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'
    }
    this.showFence(obj);
  },
  watch: {
    persons(val) {
      if (val) {
        this.setFeature();
      }
    },
  },
  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);
    },
    // 点
    setFeature() {
      let that = this;
      that.features = [];
      that.vectorSource.clear();
      that.persons.map((item) => {
        that.feature = new Feature({
          geometry: new Point([item.x, item.y]),
          name: item.name,
        });
        // 设置Feature的样式，使用小旗子图标
        that.feature.setStyle(
          new Style({
            image: new Icon({
              anchor: [0, 1],
              src: img,
            }),
            text: new Text({
              // 位置
              textAlign: "center",
              // 基准线
              textBaseline: "middle",
              // 文字样式
              font: "normal 20px 微软雅黑",
              // 文本内容
              text: item.name,
              // 文本填充样式（即文字颜色）
              fill: new Fill({ color: "#aa3300" }),
              stroke: new Stroke({ color: "#ffcc33", width: 2 }),
            }),
          })
        );
        that.features.push(that.feature);
      });
      that.vectorSource.addFeatures(that.features);
    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,
        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: 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);
@@ -270,10 +512,10 @@
          url: "api/routeIn/routein/selectList",
          type: "post",
          data: {
            id: ringId,
            id: ringId
          },
          dataType: "JSON",
          success: function (data) {
          success: function(data) {
            that.peopleLineAddlayer.getSource().clear();
            var entityData = "";
            var entityArr = [];
@@ -286,7 +528,7 @@
              for (var j = 0; j < entityData.length; j++) {
                entityArr.push([
                  Number(entityData[j].split(" ")[0]),
                  Number(entityData[j].split(" ")[1]),
                  Number(entityData[j].split(" ")[1])
                ]);
              }
            }
@@ -296,107 +538,60 @@
            var view = ol2d.getView();
            view.setCenter([
              lineCoords[Math.ceil(entityArr.length / 2)][0],
              lineCoords[Math.ceil(entityArr.length / 2)][1],
              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),
              geometry: new LineString(lineCoords)
            });

            feature_LineString.setStyle(
              new Style({
                //填充色
                fill: new Fill({
                  color: "rgba(255, 255, 255, 0.2)",
                  color: "rgba(255, 255, 255, 0.2)"
                }),
                //边线颜色
                stroke: new Stroke({
                  color: "rgb(252, 94, 32)",
                  width: 5,
                }),
                  width: 5
                })
              })
            );
            that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
            that.butTitle = "修改绘画";
          },
          error: function (data) {
          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(),
        source: new Vector()
      });
      //把layer加入到地图中
      this.map.addLayer(this.drawLayer);
    },
    //转换坐标点（多）
    transPoints(points) {
        let arr = points.split(';');
        let point = [];
        arr.forEach(item => {
            let newPoint = item.split(',');
            point.push(newPoint)
        })
        let _points = point.map(item => {
            item = [parseFloat(item[0]), parseFloat(item[1])];
            item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
            return item;
        })
        return _points;
    },
     //回显围栏
    showFence(obj) {
        let {
            fenceId,
            name,
            type,
            center,
            radius,
            points
        } = obj;
        if (type == 'polygon') {
            this.showPolygon(fenceId, points, name)
        }
    },
     /**
     *
     * @param {*} fenceId 围栏id
     * @param {*} points 多边形坐标点
     * @param {*} name 围栏名
     */
    showPolygon(fenceId, points, name) {
        let _points = this.transPoints(points)
        _points = [_points]
        //多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号
        var polygonFeature = new ol.Feature({ //路线
            geometry: new ol.geom.Polygon(_points)

        });
        debugger;
        polygonFeature.setId(fenceId)
        this.source.addFeature(polygonFeature);
        console.log(this.source.getFeatures())
    },
    //开始绘制
    getTypeSelected() {
      this.beginDraw = true;
      this.draw && this.map.removeInteraction(this.draw);
      this.peopleLineAddlayer.getSource().clear();
      this.polygonlayer.getSource().clear();
      //再根据typeSelect的值绘制新的Interaction
      // this.addInteraction();
      this.drawStart();
      this.addInteraction();
    },
    stopDraw() {
      this.showTip = false;
@@ -409,22 +604,25 @@
      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);
      //   });
      $("#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(),
@@ -432,15 +630,16 @@
          style: new Style({
            stroke: new Stroke({
              color: "red",
              width: 3,
            }),
              width: 3
            })
          }),
          coordinate: function (res) {
          coordinate: function(res) {
            //画线中的点
            that.coordinates.push(res);
            that.coordinates.push(res.coordinate_);
            that.tipTitle = "可继续，或选择最终位置双击结束";
            // console.log(res.coordinate_, 123456);
          },
          coordinateOver: function (res) {
          coordinateOver: function(res) {
            // 结束绘画 处理数据
            // console.log(that.doData(that.coordinates));
            let d = that.doData(that.coordinates);
@@ -449,50 +648,9 @@
            // console.log(that.$store);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
            // that.coordinatesStr = that.doData(that.coordinates);
          },
          }
        });
        this.map.addInteraction(this.draw);
      }
    },
     // 开始绘制多边形
    drawStart(type) {
      type = 'Polygon';
      let that = this;
      var draw;
      if (this.isDraw) {
        this.isDraw = false;
        draw = new Draw({
          source: this.source,
          type: type,
        });
        this.map.addInteraction(this.draw);
        draw.on("drawend", function (evt) {
          that.drawingEnd(evt);
        });
      } else {
        this.source.clear();
        this.map.removeInteraction(this.draw);
        this.isDraw = true;
        this.polygon = [];
        this.polygonPersons = [];
      }
    },
 
    // 构建多边形结束
    drawingEnd(evt) {
      let that = this;
      const geo = evt.feature.getGeometry();
      const t = geo.getType();
      if (t === "Polygon") {
        // 获取坐标点
        const points = geo.getCoordinates();
        points[0].map((item) => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        for (let i = 0; i < this.persons.length; i++) {
          this.polygonPersons.push(this.persons[i]);
        }
        this.isDraw = false;
      }
    },
    doData(val) {
@@ -515,13 +673,20 @@
        }
      }
      str += ")";
      // console.log(str, 111);
      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();
      that.polygonlayer.getSource().clear();
      var entityData = "";
      var entityArr = [];
      entityData = val.match(/\(([^)]*)\)/);
@@ -533,7 +698,7 @@
        for (var j = 0; j < entityData.length; j++) {
          entityArr.push([
            Number(entityData[j].split(" ")[0]),
            Number(entityData[j].split(" ")[1]),
            Number(entityData[j].split(" ")[1])
          ]);
        }
      }
@@ -543,54 +708,79 @@
      var view = ol2d.getView();
      view.setCenter([
        lineCoords[Math.ceil(entityArr.length / 2)][0],
        lineCoords[Math.ceil(entityArr.length / 2)][1],
        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),
        geometry: new LineString(lineCoords)
      });

      feature_LineString.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
            color: "rgba(255, 255, 255, 0.2)"
          }),
          //边线颜色
          stroke: new Stroke({
            color: "rgb(252, 94, 32)",
            width: 5,
          }),
            width: 5
          })
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
      that.polygonlayer.getSource().addFeature(feature_LineString);
      that.butTitle = "重新绘画";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (that.draw != null) {
        that.beginDraw = false;
        that.butTitle = "重新绘画";
        that.draw.abortDrawing_();
        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% - 80px);
    z-index: 2 !important;
  }
  // .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>
</style>

 src/components/map/mainInThere.vue

New file
@@ -0,0 +1,903 @@
<!--
 * @Descripttion:
 * @version:
 * @Author: song
 * @Date: 2021-04-08 15:14:57
 * @LastEditors: song
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
  <div id="map">
    <tip v-if="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 Polygon from "ol/geom/Polygon.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()
      }),
      peopleLineAddlayer: null,

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

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

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

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

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

      fromView: false, //若是查看  不显示更改按钮

      openTitle: "", //当前选择

      ourDatas: [], //所有数据
      ourLayer: null, //图层合集

      notNow: true, //如果修改，不显示确认按钮

      polygon: [], //面的点集合
      source: null,
      layermian: new VectorLayer({
        //面实例
        zIndex: 22,
        source: new VectorSource()
      })
    };
  },
  computed: {
    openDrawChiose() {
      // console.log(
      //   "this.openDrawLine:",
      //   this.openDrawLine,
      //   "this.openDrawPoint:",
      //   this.openDrawPoint
      // );
      if (this.openDrawLine) {
        return "openDrawLine";
      } else if (this.openDrawPoint) {
        return "openDrawPoint";
      } else {
        return "notBut---";
      }
    }
  },
  // watch: {
  //   openDrawChiose() {
  //     console.log(this.openDrawChiose, "openDrawChiose");
  //   },
  // },
  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"
    //   })
    // });
    // let mapLayer = 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", // 行政区划
    //       }),
    //     });
    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" // 行政区划
          })
        })
      ],

      // 注意地图控件的写法
      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();
    this.source = new VectorSource({ wrapX: false });
    // 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.setCenter([115.9032747077233, 28.67433116990186]);

    //
    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: {
    move(val) {
      this.view.setCenter([val[0].lng, val[0].lat]);
    },
    closeDraw() {
      ol2d.removeLayer(this.layermian);
      this.layermian = null;
      this.layermian = new VectorLayer({
        //重置
        //面实例
        zIndex: 22,
        source: new VectorSource()
      });
      if (this.draw) {
        // console.log(this.ourLayer, 1111);
        // this.ourLayer.source.clear();
        // this.source.clear();
        ol2d.removeInteraction(this.draw);
        this.polygon = [];
        this.tipTitle = null;
        this.showTip = false;
        this.draw = null;
        this.$store.commit("setpolygon", []); //用vuex传最终数据
      }
    },
    // 开始绘制多边形
    drawStart() {
      let that = this;
      this.polygon = [];
      this.closeDraw();
      // if (this.isDraw) {
      //   this.isDraw = false;
      //   this.draw = new Draw({
      //     source: this.source,
      //     type: this.typeSelected
      //   });
      //   this.map.addInteraction(this.draw);
      //   this.draw.on("drawend", function(evt) {
      //     that.drawingEnd(evt);
      //   });
      // } else {
      //   this.source.clear();
      //   this.map.removeInteraction(this.draw);
      //   this.isDraw = true;
      //   this.polygon = [];
      //   this.polygonPersons = [];
      // }
      this.tipTitle = "单击左键或右键开始绘画";
      $("#map") //提示器
        .off("mousemove")
        .mousemove(function(e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });
      this.draw = new Draw({
        source: this.source,
        type: this.typeSelected,
        // isPoint: true,
        coordinate: function(res) {
          // console.log(res, 1);
          that.tipTitle = "可继续，或选择最终位置双击结束";
        },
        coordinateOverPoint: function(res) {
          // console.log(res, 2);
          // if (isHaveOne) {
          //   return;
          // }
          // that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
          // that.addIconMarker(res.coordinate);
          // isHaveOne = true;
        },
        coordinateOver: function(res) {
          // console.log(res, 5);
          // 结束绘画 处理数据
          that.tipTitle = null;
          that.showTip = false;
          // let d = that.doData(that.coordinates);
          // that.addLinesDraw(d);
        }
      });
      ol2d.addInteraction(this.draw);
      this.draw.on("drawend", function(evt) {
        // console.log(evt, 3);
        that.drawingEnd(evt);
      });
    },

    // 构建多边形结束
    drawingEnd(evt) {
      let that = this;
      const geo = evt.feature.getGeometry();
      const t = geo.getType();
      if (t === "Polygon") {
        // 获取坐标点
        const points = geo.getCoordinates();
        points[0].map(item => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        // console.log(that.polygon, 1111);
        that.$store.commit("setpolygon", that.polygon); //用vuex传最终数据
        //重新画面
        that.addLines(that.polygon, "mian");
        // for (let i = 0; i < this.persons.length; i++) {
        //   let boxFlag = this.isRegion(
        //     this.persons[i].x,
        //     this.persons[i].y,
        //     this.polygon
        //   );
        // }
        // this.$message({
        //   type: "success",
        //   message: `区域内有${this.polygonPersons.length}人`
        // });
        // console.warn(
        //   this.polygonPersons,
        //   `区域内有${this.polygonPersons.length}人`
        // );
        // debugger;
        ol2d.removeInteraction(this.draw);
      }
    },
    clearUseMapData() {
      if (this.openDrawPoint) {
        this.$store.commit("setPointData", ""); //用vuex清空最终数据
      } else if (this.openDrawLine) {
        this.$store.commit("setRotesData", ""); //用vuex清空最终数据
      }
      this.useMapData();
    },
    onceOnlodad(ourDatas) {
      this.ourDatas = ourDatas;
      console.log(ourDatas);
    },
    //old
    //加载底层路线和图标
    Renders(ourDatas) {
      // for (let i in ourDatas) {
      //   console.log(ourDatas[i].value, "------", i);
      // }
      this.deleteElement();
      for (let k in ourDatas) {
        if (ourDatas[k].isLine) {
          if (!ourDatas[k].value) {
            // this.deleteElement("line", ourDatas[k].id);
          } else {
            this.addLines(ourDatas[k], "line");
          }
        } else {
          if (!ourDatas[k].value) {
            // this.deleteElement("point", ourDatas[k].id);
          } else {
            this.addPoint(ourDatas[k], "point");
          }
        }
      }
      this.drawLayerRoom(); //重置绘画层
    },
    // 若没有value数据，删除地图上的元素
    deleteElement(name, id) {
      // console.log(name, id);
      // this.ourLayer[name + id].getSource().clear();
      for (let k in this.ourLayer) {
        this.ourLayer[k].getSource().clear();
      }
    },
    //加载点
    addPoint(data, name) {
      //创建图层
      let layer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource()
        }),
        iconFeature = new OlFeature({
          geometry: new OlGeomPoint(data.value) //绘制图形（点）
        }),
        iconFeatureTitle = new OlFeature({
          geometry: new OlGeomPoint(data.value) //绘制图形（点）
        }),
        that = this;
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            src: "img/dingwei/dingwei5.png"
          })
        })
      );
      iconFeatureTitle.setStyle(
        new OlStyleStyle({
          text: new OlStyleText({
            text: data.name,
            font: "14px sans-serif", // CSS 字体设置
            scale: 1, //比例
            offsetY: -40,
            fill: new OlStyleFill({
              color: "#1296DB"
            })
          })
        })
      );
      layer.getSource().addFeature(iconFeature);
      layer.getSource().addFeature(iconFeatureTitle);
      //保存图层
      this.ourLayer[name + data.id] = layer;
      ol2d.addLayer(that.ourLayer[name + data.id]);
      // console.log(this.ourLayer, 77777);
    },
    addLines(data, name, notdo = false) {
      //创建图层
      //绘画线路
      // var entityData = "";
      var entityArr = [];
      // entityData = data.value.match(/\(([^)]*)\)/);
      // 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])
      //     ]);
      //   }
      // }
      if (notdo) {
        entityArr = data;
        console.log(entityArr, "notdo");
      } else {
        for (let kd in data) {
          entityArr.push([Number(data[kd].lng), Number(data[kd].lat)]);
        }
      }
      // console.log(entityArr);
      var lineCoords = entityArr; // 线里点的集合
      // console.log(lineCoords);
      var feature_LineString = new Feature({
        //线面板
        geometry: new LineString(lineCoords)
      });
      feature_LineString.setStyle(
        //线样式
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, 1)"
          }),
          //边线颜色
          stroke: new Stroke({
            color: "rgb(18,150,219)",
            width: 4
          })
        })
      );
      //线名称
      // let lineFeatureTitle = new OlFeature({
      //   geometry: new OlGeomPoint(lineCoords[0]) //绘制图形（点）
      // });
      // lineFeatureTitle.setStyle(
      //   new OlStyleStyle({
      //     text: new OlStyleText({
      //       text: data.name,
      //       font: "14px sans-serif", // CSS 字体设置
      //       scale: 1, //比例
      //       offsetY: -10,
      //       fill: new OlStyleFill({
      //         color: "#1296DB"
      //       })
      //     })
      //   })
      // );
      // layer.getSource().addFeature(lineFeatureTitle);
      this.layermian.getSource().addFeature(feature_LineString);

      //面
      //解析面数据
      let mianData = [lineCoords];
      // console.log(mianData);
      // return;
      var feature_Polygon = new Feature({
        //面面板
        geometry: new Polygon(mianData)
      });
      feature_Polygon.setStyle(
        new Style({
          //填充色
          fill: new Fill({
            color: "rgba(255, 255, 255, .7)" //填充颜色，不透明度0
          }),
          //边线颜色
          stroke: new Stroke({
            // color: "rgb(18,150,219)", //面的边界线颜色
            color: "rgba(255, 255, 255, .5)", //面的边界线颜色
            width: 10 //边界线宽
          })
        })
      );
      this.layermian.getSource().addFeature(feature_Polygon);
      //保存图层
      ol2d.addLayer(this.layermian);
      // console.log(this.ourLayer, 88888);
    },

    //上面是初始化·················

    //下面是选择点或线路开始按钮
    init(val, num, value) {
      this.openTitle = val;
      if (value) {
        this.notNow = false;
      } else {
        this.notNow = true;
      }
      this.nowIndex = num;
      if (val.indexOf("路径") != -1) {
        // console.log("加载路径按钮");
        this.controlBut("openDrawLine", this.notNow);
      } else {
        // console.log("加载标点按钮");
        this.controlBut("openDrawPoint", this.notNow);
      }
    },
    controlBut(openName, notNow) {
      this.closeOurBut();
      this[openName] = true;
      $("#" + openName).show();
      $("#openTitle").show();
      if (!notNow) {
        $("#dataConfirm").show(100);
      }
    },
    closeOurBut(open) {
      $("#dataConfirm").hide();
      $("#openDrawPoint").hide();
      $("#openDrawLine").hide();
      $("#openTitle").hide();
      this.openDrawLine = false;
      this.openDrawPoint = false;
      if (open) {
        this.openTitle = "";
        this.$parent.closeOpenedMap(); //开放按钮
      }
    },
    //取消按钮
    stopDrawOur() {
      this.closeOurBut(true);
    },
    //确认数据
    useMapData() {
      //返回用数据
      // 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";
      }
      this.$parent.backMapDataOurData(val, this.nowIndex);
      // 返回后关闭操作按钮
      this.closeOurBut();
      //清除绘画图层
      this.drawLayerRoom();
    },
    //提示位置
    setTipPosition(x, y, n, m) {
      this.position.w = x + n;
      this.position.h = y + m;
    },
    //实时添加最上图层，为了编辑或新建路径能在最上
    drawLayerRoom() {
      let that = this;
      //添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
      if (that.peopleLineAddlayer) {
        that.peopleLineAddlayer.getSource().clear();
        that.peopleLineAddlayer = null;
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource()
        });
      } else {
        that.peopleLineAddlayer = new VectorLayer({
          zIndex: 22,
          source: new VectorSource()
        });
      }
      ol2d.addLayer(this.peopleLineAddlayer);
    },

    //选择绘画路线------↓
    getTypeSelected() {
      let that = this;
      this.beginDraw = true;
      this.draw && ol2d.removeInteraction(this.draw);
      //再根据typeSelect的值绘制新的Interaction
      this.drawLayerRoom(); //重置绘画层
      this.addInteraction();
    },
    addInteraction() {
      let value = this.typeSelected,
        that = this;
      this.tipTitle = "单击左键或右键开始绘画";
      $("#map") //提示器
        .off("mousemove")
        .mousemove(function(e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });
      this.coordinates = [];
      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 = "可继续，或选择最终位置双击结束";
          },
          coordinateOver: function(res) {
            // 结束绘画 处理数据
            let d = that.doData(that.coordinates);
            that.addLinesDraw(d);
            that.$store.commit("setRotesData", d); //用vuex传最终数据
          }
        });
        ol2d.addInteraction(this.draw);
      }
    },
    //处理数据
    doData(val) {
      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;
      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 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: "red",
            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;
      }
    },
    //绘画路线------↑
    //绘画点-------↓
    getTypeSelectedPoint() {
      this.tipTitle = "单击左键选择位置";
      let that = this;
      let isHaveOne = false;
      this.drawLayerRoom(); //重置绘画层
      $("#map")
        .off("mousemove")
        .mousemove(function(e) {
          if (!that.showTip) {
            that.showTip = true;
          }
          that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
        });

      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传最终数据
            that.addIconMarker(res.coordinate);
            isHaveOne = true;
          }
        });
        ol2d.addInteraction(this.draw);
      }
    },
    addIconMarker(intlat) {
      let that = this;
      let iconFeature = new OlFeature({
        geometry: new OlGeomPoint(intlat) //绘制图形（点）
      });
      iconFeature.setStyle(
        new OlStyleStyle({
          image: new OlStyleIcon({
            scale: 0.5,
            offset: [0, 5],
            offsetOrigin: "bottom",
            //透明度
            opacity: 1,
            //图片路径
            src: "img/dingwei/dingwei6.png"
          })
        })
      );
      that.peopleLineAddlayer.getSource().addFeature(iconFeature);
      this.butTitlePoint = "重新标点";
      if (!this.fromView) {
        $("#dataConfirm").show(100);
      }
      if (this.draw != null) {
        this.draw.controlDrawing(true);
        $("#map").unbind("mousemove");
        this.tipTitle = "";
        this.showTip = false;
      }
    }
    //绘制点------↑
  }
};
</script>

<style scoped lang="scss">
#map {
  position: relative;
  width: 100%;
  height: 100%;
  // .controlMap {

  // }
  #dataConfirm {
    position: absolute;
    top: 43px;
    // left: calc(50% + 82px);
    left: 564px;
    z-index: 3 !important;
  }
}
</style>

 src/components/map1/Draw.js

New file
@@ -0,0 +1,1163 @@
var __extends = (this && this.__extends) || (function() {
    var extendStatics = function(d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] }
                instanceof Array && function(d, b) { d.__proto__ = b; }) ||
            function(d, b) { for (var p in b)
                    if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function(d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);

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

 src/components/map1/main.vue


 src/components/map1/main1.vue

New file
@@ -0,0 +1,596 @@
<!--
 * @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: 100%">
    <div class="controlMap">
      <el-button-group>
        <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>
    </div>
    <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
  </div>
</template>
<script>
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 "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { ImageStatic, Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";
import Draw from "ol/interaction/Draw";
import { Point } from "ol/geom";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";


import { Vector } from "ol/source";
// import Draw from "./Draw";
import LineString from "ol/geom/LineString.js";
import img from "@/assets/img/car.png";

export default {
  name: "Map",
  components: {
    tip,
  },
  data() {
    return {
      peopleLineAddlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      //多边形Layer
      polygonlayer: new VectorLayer({
        // 图标图层
        zIndex: 22,
        source: new VectorSource(),
      }),
      vectorSource: new VectorSource(),
      features: [],
      feature: null,
      // 存储新增点，线，面，数据的地方
      persons: [],
      polygon: [],
      polygonPersons: [],
      // polygonData: [],
      // polygonFlag: false,
      // editToolbar: null,
      // addPolygonEntitys: null,

      typeSelected: "Polygon",
      drawLayer: null,
      draw: null,
      drawSource:null,
      coordinates: [],
      coordinatesStr: "",
      beginDraw: false,
      butTitle: "开始绘画",
      view: "",
      isDraw: true, // 是否绘制
      showTip: false,
      tipTitle: "",
      position: {
        w: 200,
        h: 10,
      },
    };
  },
  
  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", // 行政区划
          }),
        }),
      ],

      // 注意地图控件的写法
      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();

    // view.setCenter([115.85883507433789, 28.708432053474827])
    view.setCenter([115.9032747077233, 28.67433116990186]);

    //设置放大层级
    view.setZoom(13);
    this.view = view;

    // const drawSource = new VectorSource();

    // const drawLayer = new VectorLayer({

    //     source: drawSource

    // });

    // this.drawSource = drawSource;

    // ol2d.addLayer(drawLayer);

    ol2d.addLayer(this.peopleLineAddlayer);
    ol2d.addLayer(this.polygonlayer);

    //监听鼠标位置
    var that = this;
    //
    that.addNewLine();
    var obj = {
        fenceId: '12',
        name: '围栏3',
        center: '',
        radius: '',
        type: 'polyline',
        points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'
    }
    this.showFence(obj);
  },
  watch: {
    persons(val) {
      if (val) {
        this.setFeature();
      }
    },
  },
  methods: {
    goTudefault(x, y) {
      this.view.setCenter([x, y]);
      this.view.setZoom(14.5);
    },
    // 点
    setFeature() {
      let that = this;
      that.features = [];
      that.vectorSource.clear();
      that.persons.map((item) => {
        that.feature = new Feature({
          geometry: new Point([item.x, item.y]),
          name: item.name,
        });
        // 设置Feature的样式，使用小旗子图标
        that.feature.setStyle(
          new Style({
            image: new Icon({
              anchor: [0, 1],
              src: img,
            }),
            text: new Text({
              // 位置
              textAlign: "center",
              // 基准线
              textBaseline: "middle",
              // 文字样式
              font: "normal 20px 微软雅黑",
              // 文本内容
              text: item.name,
              // 文本填充样式（即文字颜色）
              fill: new Fill({ color: "#aa3300" }),
              stroke: new Stroke({ color: "#ffcc33", width: 2 }),
            }),
          })
        );
        that.features.push(that.feature);
      });
      that.vectorSource.addFeatures(that.features);
    },
    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({
        image: new Icon({
          scale: scale,
          opacity: 1,
          src: icon,
          // src: require('../../assets/Mark.png')
        }),
      });

      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;

      // 添加一个绘制的线使用的layer
      this.drawLayer = new VectorLayer({
        //layer所对应的source
        source: new Vector(),
      });
      //把layer加入到地图中
      this.map.addLayer(this.drawLayer);
    },
    //转换坐标点（多）
    transPoints(points) {
        let arr = points.split(';');
        let point = [];
        arr.forEach(item => {
            let newPoint = item.split(',');
            point.push(newPoint)
        })
        let _points = point.map(item => {
            item = [parseFloat(item[0]), parseFloat(item[1])];
            item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
            return item;
        })
        return _points;
    },
     //回显围栏
    showFence(obj) {
        let {
            fenceId,
            name,
            type,
            center,
            radius,
            points
        } = obj;
        if (type == 'polygon') {
            this.showPolygon(fenceId, points, name)
        }
    },
     /**
     *
     * @param {*} fenceId 围栏id
     * @param {*} points 多边形坐标点
     * @param {*} name 围栏名
     */
    showPolygon(fenceId, points, name) {
        let _points = this.transPoints(points)
        _points = [_points]
        //多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号
        var polygonFeature = new ol.Feature({ //路线
            geometry: new ol.geom.Polygon(_points)

        });
        debugger;
        polygonFeature.setId(fenceId)
        this.source.addFeature(polygonFeature);
        console.log(this.source.getFeatures())
    },
    //开始绘制
    getTypeSelected() {
      this.beginDraw = true;
      this.draw && this.map.removeInteraction(this.draw);
      this.peopleLineAddlayer.getSource().clear();
      this.polygonlayer.getSource().clear();
      //再根据typeSelect的值绘制新的Interaction
      // this.addInteraction();
      this.drawStart();
    },
    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);
      //   });

      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);
            that.tipTitle = "可继续，或选择最终位置双击结束";
          },
          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);
      }
    },
     // 开始绘制多边形
    drawStart(type) {
      type = 'Polygon';
      let that = this;
      var draw;
      if (this.isDraw) {
        this.isDraw = false;
        draw = new Draw({
          source: this.source,
          type: type,
        });
        this.map.addInteraction(this.draw);
        draw.on("drawend", function (evt) {
          that.drawingEnd(evt);
        });
      } else {
        this.source.clear();
        this.map.removeInteraction(this.draw);
        this.isDraw = true;
        this.polygon = [];
        this.polygonPersons = [];
      }
    },
 
    // 构建多边形结束
    drawingEnd(evt) {
      let that = this;
      const geo = evt.feature.getGeometry();
      const t = geo.getType();
      if (t === "Polygon") {
        // 获取坐标点
        const points = geo.getCoordinates();
        points[0].map((item) => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        for (let i = 0; i < this.persons.length; i++) {
          this.polygonPersons.push(this.persons[i]);
        }
        this.isDraw = false;
      }
    },
    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 += ")";
      // console.log(str, 111);
      return str;
    },
    addLinesDraw(val) {
      var that = this;
      that.peopleLineAddlayer.getSource().clear();
      that.polygonlayer.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.polygonlayer.getSource().addFeature(feature_LineString);
      if (that.draw != null) {
        that.beginDraw = false;
        that.butTitle = "重新绘画";
        that.draw.abortDrawing_();
        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% - 80px);
    z-index: 2 !important;
  }
}
</style>

 src/components/map1/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/router/axios.js

@@ -8,34 +8,42 @@
import axios from 'axios';
import store from '@/store/';
import router from '@/router/router';
import { serialize } from '@/util/util';
import { getToken } from '@/util/auth';
import {
  serialize
} from '@/util/util';
import {
  getToken
} from '@/util/auth';
// import { Message } from 'element-ui';
import { MessageBox } from 'element-ui';
import {
  MessageBox
} from 'element-ui';
import website from '@/config/website';
import { Base64 } from 'js-base64';
import {
  Base64
} from 'js-base64';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

//默认超时时间
axios.defaults.timeout = 60000;
//返回其他状态码
axios.defaults.validateStatus = function(status) {
    return status >= 200 && status <= 500;
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500;
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
// NProgress 配置
NProgress.configure({
    showSpinner: false
  showSpinner: false
});
//http request拦截
axios.interceptors.request.use(config => {
            //开启 progress bar
            NProgress.start();
            const meta = (config.meta || {});
            const isToken = meta.isToken === false;
            config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
  //开启 progress bar
  NProgress.start();
  const meta = (config.meta || {});
  const isToken = meta.isToken === false;
  config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
  //让每个请求携带token
  if (getToken() && !isToken) {
    config.headers[website.tokenHeader] = 'bearer ' + getToken()
@@ -63,7 +71,9 @@
  //如果在白名单里则自行catch逻辑处理
  if (statusWhiteList.includes(status)) return Promise.reject(res);
  //如果是401则跳转到登录页面
  if (status === 401) store.dispatch('FedLogOut').then(() => router.push({path: '/login'}));
  if (status === 401) store.dispatch('FedLogOut').then(() => router.push({
    path: '/login'
  }));
  // 如果请求为非200否者默认统一处理
  if (status !== 200 & status !== 201) {
    // Message({
@@ -80,4 +90,4 @@
  return Promise.reject(new Error(error));
});

export default axios;
export default axios;

 src/router/views/index.js

@@ -1,1037 +1,1050 @@
import Layout from '@/page/index/'

export default [{
        path: '/wel',
        component: Layout,
        redirect: '/wel/index',
        children: [{
            path: 'index',
            name: '首页',
            meta: {
                i18n: 'dashboard'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/wel/index')
        }, {
            path: 'dashboard',
            name: '控制台',
            meta: {
                i18n: 'dashboard',
                menu: false,
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
        }]
    path: '/wel',
    component: Layout,
    redirect: '/wel/index',
    children: [{
      path: 'index',
      name: '首页',
      meta: {
        i18n: 'dashboard'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/wel/index')
    }, {
        path: '/test',
        component: Layout,
        redirect: '/test/index',
        children: [{
            path: 'index',
            name: '测试页',
            meta: {
                i18n: 'test'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/util/test')
        }]
      path: 'dashboard',
      name: '控制台',
      meta: {
        i18n: 'dashboard',
        menu: false,
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
    }]
  }, {
    path: '/test',
    component: Layout,
    redirect: '/test/index',
    children: [{
      path: 'index',
      name: '测试页',
      meta: {
        i18n: 'test'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/test')
    }]
  }, {
    path: '/dict-horizontal',
    component: Layout,
    redirect: '/dict-horizontal/index',
    children: [{
      path: 'index',
      name: '字典管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
    }]
  }, {
    path: '/dict-vertical',
    component: Layout,
    redirect: '/dict-vertical/index',
    children: [{
      path: 'index',
      name: '字典管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
    }]
  }, {
    path: '/info',
    component: Layout,
    redirect: '/info/index',
    children: [{
      path: 'index',
      name: '个人信息',
      meta: {
        i18n: 'info'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
    }]
  }, {
    path: '/work/process/leave',
    component: Layout,
    redirect: '/work/process/leave/form',
    children: [{
      path: 'form/:processDefinitionId',
      name: '请假流程',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
    }, {
        path: '/dict-horizontal',
        component: Layout,
        redirect: '/dict-horizontal/index',
        children: [{
            path: 'index',
            name: '字典管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
        }]
      path: 'handle/:taskId/:processInstanceId/:businessId',
      name: '处理请假流程',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
    }, {
        path: '/dict-vertical',
        component: Layout,
        redirect: '/dict-vertical/index',
        children: [{
            path: 'index',
            name: '字典管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
        }]
      path: 'detail/:processInstanceId/:businessId',
      name: '请假流程详情',
      meta: {
        i18n: 'work'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
    }]
  }, {
    path: '/securityAnalysis',
    component: Layout,
    redirect: '/securityAnalysis/index',
    children: [{
      path: 'index',
      name: '保安单位情况智能分析',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityAnalysis/index')
    }]
  }, {
    path: '/recruitmentManagement',
    component: Layout,
    redirect: '/recruitmentManagement/index',
    children: [{
      path: 'index',
      name: '招聘管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/recruitmentManagement/index')
    }]
  }, {
    path: '/securityUnit',
    component: Layout,
    redirect: '/securityUnit/index',
    children: [{
      path: 'index',
      name: '单位信息',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityUnit/index')
    }]
  }, {
    path: '/securityGuard',
    component: Layout,
    redirect: '/securityGuard/securityGuard',
    children: [{
      path: 'index',
      name: '保安员管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
    }]
  }, {
    path: '/securityGuardOnce',
    component: Layout,
    redirect: '/securityGuard/securityGuardOnce',
    children: [{
      path: 'index',
      name: '保安员查询',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuardOnce')
    }]
  }, {
    path: '/securityGuardDetail',
    component: Layout,
    redirect: '/securityGuardDetail/index',
    children: [{
      path: 'index',
      name: '保安员详情',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuardDetail')
    }]
  }, {
    path: '/resource',
    component: Layout,
    redirect: '/resource/attach',
    children: [{
      path: 'attach',
      name: '附件上传',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/attach')
    }]
  }, {
    path: '/securityUnitChild',
    component: Layout,
    redirect: '/securityUnitChild/index',
    children: [{
      path: 'index',
      name: '单位详情',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityUnitChild/index')
    }]
  }, {
    path: '/securityGuard',
    component: Layout,
    redirect: '/securityGuard/securityGuard',
    children: [{
      path: 'index',
      name: '保安员管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
    }]
  },
  // {
  //     path: '/dispatch/dispatch',
  //     component: Layout,
  //     redirect: '/dispatch/dispatch',
  //     children: [{
  //         path: 'index',
  //         name: '派遣服务管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
  //     }]
  // },
  {
    path: '/desk',
    component: Layout,
    redirect: '/desk/notice',
    children: [{
      path: 'index',
      name: '通知公告',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/desk/notice')
    }]
  },
  {
    path: '/talk',
    component: Layout,
    redirect: '/talk/talk',
    children: [{
      path: 'index',
      name: '心理咨询',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/talk/talk')
    }]
  },
  {
    path: '/workreport',
    component: Layout,
    redirect: '/workreport/workreport',
    children: [{
      path: 'workreport',
      name: '发起的汇报',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/workreport/workreport')
    }]
  },
  {
    path: '/workreport',
    component: Layout,
    redirect: '/workreport/workreply',
    children: [{
      path: 'workreply',
      name: '接收的汇报',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/workreport/workreply')
    }]
  }, {
    path: '/resource',
    component: Layout,
    redirect: '/resource/attachCopy',
    children: [{
      path: 'attachCopy',
      name: '保安单位附件上传',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/attachCopy')
    }]
  },
  // {
  //     path: '/dispatch',
  //     component: Layout,
  //     redirect: '/dispatch/dispatch',
  //     children: [{
  //         path: 'dispatch',
  //         name: '派遣单位管理',
  //         meta: {
  //             i18n: 'dispatch'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
  //     }, {
  //         path: 'dispatchChildoperable',
  //         name: '派遣记录管理',
  //         meta: {
  //             i18n: 'dispatch'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatchChildoperable')
  //     }]
  // },
  // {
  //     path: '/dispatchChild',
  //     component: Layout,
  //     redirect: '/dispatchChild/index',
  //     children: [{
  //         path: 'index',
  //         name: '派遣服务记录',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/dispatchChild/index')
  //     }]
  // },
  // {
  //     path: '/equipments',
  //     component: Layout,
  //     redirect: '/equipments/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安公司装备管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/equipments/index')
  //     }]
  // }, {
  //     path: '/car',
  //     component: Layout,
  //     redirect: '/car/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安公司车辆管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/car/index')
  //     }]
  // }, {
  //     path: '/gun',
  //     component: Layout,
  //     redirect: '/gun/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安公司枪支管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/gun/index')
  //     }]
  // },
  // {
  //     path: '/securityEquipment',
  //     component: Layout,
  //     redirect: '/securityEquipment',
  //     children: [{
  //         path: 'equipments',
  //         name: '装备管理',
  //         meta: {
  //             i18n: 'securityEquipment'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/equipments')
  //     }, {
  //         path: 'car',
  //         name: '车辆管理',
  //         meta: {
  //             i18n: 'car'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/car')
  //     }, {
  //         path: 'gun',
  //         name: '车辆管理',
  //         meta: {
  //             i18n: 'gun'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/gun')
  //     }]
  // },
  // {
  //     path: '/trainingRegistration',
  //     component: Layout,
  //     redirect: '/trainingRegistration/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安培训报名管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import ( /* webpackChunkName: "views" */ '@/views/trainingRegistration/index')
  //     }]
  // },
  {
    path: '/securityAnalysis',
    component: Layout,
    redirect: '/securityAnalysis/index',
    children: [{
      path: 'index',
      name: '保安单位情况智能分析',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityAnalysis/index')
    }]
  }, {
    path: '/recruitmentManagement',
    component: Layout,
    redirect: '/recruitmentManagement/index',
    children: [{
      path: 'index',
      name: '招聘管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/recruitmentManagement/index')
    }]
  }, {
    path: '/ownerFeedback',
    component: Layout,
    redirect: '/ownerFeedback/index',
    children: [{
      path: 'index',
      name: '业主反馈',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/ownerFeedback/owner')
    }]
  }, {
    path: '/securityUnit',
    component: Layout,
    redirect: '/securityUnit/index',
    children: [{
      path: 'index',
      name: '保安单位信息',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityUnit/index')
    }]
  }, {
    path: '/securityGuard',
    component: Layout,
    redirect: '/securityGuard/securityGuard',
    children: [{
      path: 'index',
      name: '保安员查询',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
    }]
  }, {
    path: '/securityGuardDetail',
    component: Layout,
    redirect: '/securityGuardDetail/index',
    children: [{
      path: 'index',
      name: '保安员详情',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuardDetail')
    }]
  }, {
    path: '/resource',
    component: Layout,
    redirect: '/resource/attach',
    children: [{
      path: 'attach',
      name: '附件上传',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/attach')
    }]
  }, {
    path: '/securityUnitChild',
    component: Layout,
    redirect: '/securityUnitChild/index',
    children: [{
      path: 'index',
      name: '保安单位详情',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityUnitChild/index')
    }]
  }, {
    path: '/securityGuard',
    component: Layout,
    redirect: '/securityGuard/securityGuard',
    children: [{
      path: 'index',
      name: '保安员管理',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
    }]
  },
  // {
  //     path: '/dispatch/dispatch',
  //     component: Layout,
  //     redirect: '/dispatch/dispatch',
  //     children: [{
  //         path: 'index',
  //         name: '派遣服务管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
  //     }]
  // },
  {
    path: '/desk',
    component: Layout,
    redirect: '/desk/notice',
    children: [{
      path: 'index',
      name: '通知公告',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/desk/notice')
    }]
  }, {
    path: '/dispatch',
    component: Layout,
    redirect: '/dispatch/dispatch',
    children: [{
      path: 'dispatch',
      name: '派遣单位管理',
      meta: {
        i18n: 'dispatch'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
    }, {
        path: '/info',
        component: Layout,
        redirect: '/info/index',
        children: [{
            path: 'index',
            name: '个人信息',
            meta: {
                i18n: 'info'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/system/userinfo')
        }]
      path: 'dispatchChildoperable',
      name: '派遣记录管理',
      meta: {
        i18n: 'dispatch'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatchChildoperable')
    }]
  }, {
    path: '/dispatchChild',
    component: Layout,
    redirect: '/dispatchChild/index',
    children: [{
      path: 'index',
      name: '派遣服务记录',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/dispatchChild/index')
    }]
  }, {
    path: '/applyexam',
    redirect: '/applyexam/papers',
    component: Layout,
    children: [{
      path: 'papers',
      name: '准考证信息',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/applyexam/papers')
    }]
  },
  // {
  //     path: '/equipments',
  //     component: Layout,
  //     redirect: '/equipments/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安公司装备管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/equipments/index')
  //     }]
  // }, {
  //     path: '/car',
  //     component: Layout,
  //     redirect: '/car/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安公司车辆管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/car/index')
  //     }]
  // }, {
  //     path: '/gun',
  //     component: Layout,
  //     redirect: '/gun/index',
  //     children: [{
  //         path: 'index',
  //         name: '保安公司枪支管理',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/gun/index')
  //     }]
  // },
  // {
  //     path: '/securityEquipment',
  //     component: Layout,
  //     redirect: '/securityEquipment',
  //     children: [{
  //         path: 'equipments',
  //         name: '装备管理',
  //         meta: {
  //             i18n: 'securityEquipment'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/equipments')
  //     }, {
  //         path: 'car',
  //         name: '车辆管理',
  //         meta: {
  //             i18n: 'car'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/car')
  //     }, {
  //         path: 'gun',
  //         name: '车辆管理',
  //         meta: {
  //             i18n: 'gun'
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/gun')
  //     }]
  // },
  {
    path: '/trainingRegistration',
    component: Layout,
    peixun: true,
    redirect: '/trainingRegistration/index',
    children: [{
      path: 'index',
      name: '培训报名列表',
      meta: {
        i18n: 'dict'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/trainingRegistration/index')
    }]
  },
  // {
  //     path: '/trainExam',
  //     component: Layout,
  //     redirect: '/trainExam/index',
  //     children: [{
  //         path: 'index',
  //         name: '考试申请',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import ( /* webpackChunkName: "views" */ '@/views/trainExam/index')
  //     }]
  // },
  // {
  //     path: '/applyexam',
  //     redirect: '/applyexam/index',
  //     component: Layout,
  //     children: [{
  //         path: 'index',
  //         name: '报名考试',
  //         meta: {
  //             i18n: 'index',
  //         },
  //         component: () =>
  //             import( /* webpackChunkName: "views" */ '@/views/applyexam/index')
  //     }]
  // },
  {
    path: '/applydetailed',
    redirect: '/applydetailed/index',
    component: Layout,
    children: [{
      path: 'index',
      name: '报名清册',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/applydetailed/index')
    }]
  },
  {
    path: '/trainApply',
    redirect: '/trainApply/index',
    component: Layout,
    children: [{
      path: 'index',
      name: '报名清册',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/trainApply/index')
    }]
  },
  {
    path: '/startexam',
    redirect: '/startexam/index',
    component: Layout,
    children: [{
      path: 'index',
      name: '开始考试',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/startexam/index')
    }]
  },
  {
    path: '/titleDetails',
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/exam/topicDetails')
  },
  {
    path: '',
    component: Layout,
    children: [{
      path: '/exam/subjects/:id',
      component: () =>
        import('@/views/exam/examSubjects'),
      name: '题目管理',
      title: '题目管理',
      noCache: true
    }]
  },
  {
    path: '',
    component: Layout,
    children: [{
      path: '/startexam/:id',
      component: () =>
        import('@/views/startexam/index'),
      name: '开始考试',
      title: '开始考试',
      noCache: true
    }]
  },
  // {
  //     path: '/traincompany',
  //     component: Layout,
  //     redirect: '/traincompany/index',
  //     children: [{
  //         path: 'index',
  //         name: '培训公司查询',
  //         meta: {
  //             i18n: 'dict'
  //         },
  //         component: () =>
  //             import ( /* webpackChunkName: "views" */ '@/views/traincompany/index')
  //     }]
  // },
  {
    path: '/dispatchChildoperableSee',
    component: Layout,
    redirect: '/dispatchChildoperableSee/index',
    children: [{
      path: 'index',
      name: '派遣记录',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatchChildoperableSee')
    }]
  },
  {
    path: '/expression',
    component: Layout,
    redirect: '/expression/index',
    children: [{
      path: 'index',
      name: '表现记录',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/people/expression')
    }]
  }, {
    path: '/job',
    component: Layout,
    redirect: '/job/index',
    children: [{
      path: 'index',
      name: '从业记录',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/people/job')
    }]
  }, {
    path: '/resource',
    redirect: '/resource/uploadNotice',
    component: Layout,
    children: [{
      path: 'uploadNotice',
      name: '通知公告>附件上传',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/uploadNotice')
    }]
  },
  {
    path: '/applydetailed',
    redirect: '/applydetailed/papers',
    component: Layout,
    children: [{
      path: 'papers',
      name: '报名清册信息',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/applydetailed/papers')
    }]
  },
  {
    path: '/exam',
    redirect: '/exam/papers',
    component: Layout,
    children: [{
      path: 'papers',
      name: '保安证',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/exam/papers')
    }]
  }, {
    path: '/resource',
    redirect: '/resource/uploadPolicyRelease',
    component: Layout,
    children: [{
      path: 'uploadPolicyRelease',
      name: '政策发布>附件上传',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/uploadPolicyRelease')
    }]
  }, {
    path: '/securityMan',
    redirect: '/securityMan/index',
    component: Layout,
    children: [{
      path: 'index',
      name: '保安员信息',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityMan/index')
    }]
  }, {
    path: '/attachOnce',
    redirect: '/resource/attachOnce',
    component: Layout,
    children: [{
      path: 'index',
      name: '附件查阅',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/attachOnce')
    }]
  }, {
    path: '/resource',
    redirect: '/resource/uploadNotification',
    component: Layout,
    children: [{
      path: 'uploadNotification',
      name: '通知通报>附件上传',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/resource/uploadNotification')
    }]
  }, {
    path: '/trainExam',
    component: Layout,
    children: [{
      path: 'check',
      name: '培训考试审核',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/trainExam/index')
    }, {
        path: '/work/process/leave',
        component: Layout,
        redirect: '/work/process/leave/form',
        children: [{
            path: 'form/:processDefinitionId',
            name: '请假流程',
            meta: {
                i18n: 'work'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
        }, {
            path: 'handle/:taskId/:processInstanceId/:businessId',
            name: '处理请假流程',
            meta: {
                i18n: 'work'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
        }, {
            path: 'detail/:processInstanceId/:businessId',
            name: '请假流程详情',
            meta: {
                i18n: 'work'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
        }]
    }, {
        path: '/securityAnalysis',
        component: Layout,
        redirect: '/securityAnalysis/index',
        children: [{
            path: 'index',
            name: '保安单位情况智能分析',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityAnalysis/index')
        }]
    }, {
        path: '/recruitmentManagement',
        component: Layout,
        redirect: '/recruitmentManagement/index',
        children: [{
            path: 'index',
            name: '招聘管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/recruitmentManagement/index')
        }]
    }, {
        path: '/securityUnit',
        component: Layout,
        redirect: '/securityUnit/index',
        children: [{
            path: 'index',
            name: '单位信息',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityUnit/index')
        }]
    }, {
        path: '/securityGuard',
        component: Layout,
        redirect: '/securityGuard/securityGuard',
        children: [{
            path: 'index',
            name: '保安员管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
        }]
    }, {
        path: '/securityGuardOnce',
        component: Layout,
        redirect: '/securityGuard/securityGuardOnce',
        children: [{
            path: 'index',
            name: '保安员查询',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuardOnce')
        }]
    }, {
        path: '/securityGuardDetail',
        component: Layout,
        redirect: '/securityGuardDetail/index',
        children: [{
            path: 'index',
            name: '保安员详情',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuardDetail')
        }]
    }, {
        path: '/resource',
        component: Layout,
        redirect: '/resource/attach',
        children: [{
            path: 'attach',
            name: '附件上传',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/attach')
        }]
    }, {
        path: '/securityUnitChild',
        component: Layout,
        redirect: '/securityUnitChild/index',
        children: [{
            path: 'index',
            name: '单位详情',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityUnitChild/index')
        }]
    }, {
        path: '/securityGuard',
        component: Layout,
        redirect: '/securityGuard/securityGuard',
        children: [{
            path: 'index',
            name: '保安员管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
        }]
      path: 'query',
      name: '培训申请管理',
      meta: {
        i18n: 'index',
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/trainExam/index')
    }]
  },
  {
    path: 'modifiedGrades',
    name: '修改成绩管理',
    meta: {
      i18n: 'modifiedGrades'
    },
    // {
    //     path: '/dispatch/dispatch',
    //     component: Layout,
    //     redirect: '/dispatch/dispatch',
    //     children: [{
    //         path: 'index',
    //         name: '派遣服务管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
    //     }]
    // },
    {
        path: '/desk',
        component: Layout,
        redirect: '/desk/notice',
        children: [{
            path: 'index',
            name: '通知公告',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/desk/notice')
        }]
    },
    {
        path: '/talk',
        component: Layout,
        redirect: '/talk/talk',
        children: [{
            path: 'index',
            name: '心理咨询',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/talk/talk')
        }]
    },
    {
        path: '/workreport',
        component: Layout,
        redirect: '/workreport/workreport',
        children: [{
            path: 'workreport',
            name: '发起的汇报',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/workreport/workreport')
        }]
    },
    {
        path: '/workreport',
        component: Layout,
        redirect: '/workreport/workreply',
        children: [{
            path: 'workreply',
            name: '接收的汇报',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/workreport/workreply')
        }]
    }, {
        path: '/resource',
        component: Layout,
        redirect: '/resource/attachCopy',
        children: [{
            path: 'attachCopy',
            name: '保安单位附件上传',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/attachCopy')
        }]
    },
    // {
    //     path: '/dispatch',
    //     component: Layout,
    //     redirect: '/dispatch/dispatch',
    //     children: [{
    //         path: 'dispatch',
    //         name: '派遣单位管理',
    //         meta: {
    //             i18n: 'dispatch'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
    //     }, {
    //         path: 'dispatchChildoperable',
    //         name: '派遣记录管理',
    //         meta: {
    //             i18n: 'dispatch'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatchChildoperable')
    //     }]
    // },
    // {
    //     path: '/dispatchChild',
    //     component: Layout,
    //     redirect: '/dispatchChild/index',
    //     children: [{
    //         path: 'index',
    //         name: '派遣服务记录',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/dispatchChild/index')
    //     }]
    // },
    // {
    //     path: '/equipments',
    //     component: Layout,
    //     redirect: '/equipments/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安公司装备管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/equipments/index')
    //     }]
    // }, {
    //     path: '/car',
    //     component: Layout,
    //     redirect: '/car/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安公司车辆管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/car/index')
    //     }]
    // }, {
    //     path: '/gun',
    //     component: Layout,
    //     redirect: '/gun/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安公司枪支管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/gun/index')
    //     }]
    // },
    // {
    //     path: '/securityEquipment',
    //     component: Layout,
    //     redirect: '/securityEquipment',
    //     children: [{
    //         path: 'equipments',
    //         name: '装备管理',
    //         meta: {
    //             i18n: 'securityEquipment'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/equipments')
    //     }, {
    //         path: 'car',
    //         name: '车辆管理',
    //         meta: {
    //             i18n: 'car'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/car')
    //     }, {
    //         path: 'gun',
    //         name: '车辆管理',
    //         meta: {
    //             i18n: 'gun'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/gun')
    //     }]
    // },
    // {
    //     path: '/trainingRegistration',
    //     component: Layout,
    //     redirect: '/trainingRegistration/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安培训报名管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import ( /* webpackChunkName: "views" */ '@/views/trainingRegistration/index')
    //     }]
    // },
    {
        path: '/securityAnalysis',
        component: Layout,
        redirect: '/securityAnalysis/index',
        children: [{
            path: 'index',
            name: '保安单位情况智能分析',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityAnalysis/index')
        }]
    }, {
        path: '/recruitmentManagement',
        component: Layout,
        redirect: '/recruitmentManagement/index',
        children: [{
            path: 'index',
            name: '招聘管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/recruitmentManagement/index')
        }]
    }, {
        path: '/ownerFeedback',
        component: Layout,
        redirect: '/ownerFeedback/index',
        children: [{
            path: 'index',
            name: '业主反馈',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/ownerFeedback/owner')
        }]
    }, {
        path: '/securityUnit',
        component: Layout,
        redirect: '/securityUnit/index',
        children: [{
            path: 'index',
            name: '保安单位信息',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityUnit/index')
        }]
    }, {
        path: '/securityGuard',
        component: Layout,
        redirect: '/securityGuard/securityGuard',
        children: [{
            path: 'index',
            name: '保安员查询',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
        }]
    }, {
        path: '/securityGuardDetail',
        component: Layout,
        redirect: '/securityGuardDetail/index',
        children: [{
            path: 'index',
            name: '保安员详情',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuardDetail')
        }]
    }, {
        path: '/resource',
        component: Layout,
        redirect: '/resource/attach',
        children: [{
            path: 'attach',
            name: '附件上传',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/attach')
        }]
    }, {
        path: '/securityUnitChild',
        component: Layout,
        redirect: '/securityUnitChild/index',
        children: [{
            path: 'index',
            name: '保安单位详情',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityUnitChild/index')
        }]
    }, {
        path: '/securityGuard',
        component: Layout,
        redirect: '/securityGuard/securityGuard',
        children: [{
            path: 'index',
            name: '保安员管理',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/securityGuard')
        }]
    },
    // {
    //     path: '/dispatch/dispatch',
    //     component: Layout,
    //     redirect: '/dispatch/dispatch',
    //     children: [{
    //         path: 'index',
    //         name: '派遣服务管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
    //     }]
    // },
    {
        path: '/desk',
        component: Layout,
        redirect: '/desk/notice',
        children: [{
            path: 'index',
            name: '通知公告',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/desk/notice')
        }]
    }, {
        path: '/dispatch',
        component: Layout,
        redirect: '/dispatch/dispatch',
        children: [{
            path: 'dispatch',
            name: '派遣单位管理',
            meta: {
                i18n: 'dispatch'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/dispatch/dispatch')
        }, {
            path: 'dispatchChildoperable',
            name: '派遣记录管理',
            meta: {
                i18n: 'dispatch'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/dispatch/dispatchChildoperable')
        }]
    }, {
        path: '/dispatchChild',
        component: Layout,
        redirect: '/dispatchChild/index',
        children: [{
            path: 'index',
            name: '派遣服务记录',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/dispatchChild/index')
        }]
    }, {
        path: '/applyexam',
        redirect: '/applyexam/papers',
        component: Layout,
        children: [{
            path: 'papers',
            name: '准考证信息',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/applyexam/papers')
        }]
    },
    // {
    //     path: '/equipments',
    //     component: Layout,
    //     redirect: '/equipments/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安公司装备管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/equipments/index')
    //     }]
    // }, {
    //     path: '/car',
    //     component: Layout,
    //     redirect: '/car/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安公司车辆管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/car/index')
    //     }]
    // }, {
    //     path: '/gun',
    //     component: Layout,
    //     redirect: '/gun/index',
    //     children: [{
    //         path: 'index',
    //         name: '保安公司枪支管理',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/gun/index')
    //     }]
    // },
    // {
    //     path: '/securityEquipment',
    //     component: Layout,
    //     redirect: '/securityEquipment',
    //     children: [{
    //         path: 'equipments',
    //         name: '装备管理',
    //         meta: {
    //             i18n: 'securityEquipment'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/equipments')
    //     }, {
    //         path: 'car',
    //         name: '车辆管理',
    //         meta: {
    //             i18n: 'car'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/car')
    //     }, {
    //         path: 'gun',
    //         name: '车辆管理',
    //         meta: {
    //             i18n: 'gun'
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityEquipment/gun')
    //     }]
    // },
    {
        path: '/trainingRegistration',
        component: Layout,
        peixun: true,
        redirect: '/trainingRegistration/index',
        children: [{
            path: 'index',
            name: '培训报名列表',
            meta: {
                i18n: 'dict'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/trainingRegistration/index')
        }]
    },
    // {
    //     path: '/trainExam',
    //     component: Layout,
    //     redirect: '/trainExam/index',
    //     children: [{
    //         path: 'index',
    //         name: '考试申请',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import ( /* webpackChunkName: "views" */ '@/views/trainExam/index')
    //     }]
    // },
    // {
    //     path: '/applyexam',
    //     redirect: '/applyexam/index',
    //     component: Layout,
    //     children: [{
    //         path: 'index',
    //         name: '报名考试',
    //         meta: {
    //             i18n: 'index',
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/applyexam/index')
    //     }]
    // },
    {
        path: '/applydetailed',
        redirect: '/applydetailed/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '报名清册',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/applydetailed/index')
        }]
    },
    {
        path: '/trainApply',
        redirect: '/trainApply/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '报名清册',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/trainApply/index')
        }]
    },
    {
        path: '/startexam',
        redirect: '/startexam/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '开始考试',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/startexam/index')
        }]
    },
    {
        path: '/titleDetails',
        component: () =>
            import ( /* webpackChunkName: "views" */ '@/views/exam/topicDetails')
    },
    {
        path: '',
        component: Layout,
        children: [{
            path: '/exam/subjects/:id',
            component: () =>
                import ('@/views/exam/examSubjects'),
            name: '题目管理',
            title: '题目管理',
            noCache: true
        }]
    },
    {
        path: '',
        component: Layout,
        children: [{
            path: '/startexam/:id',
            component: () =>
                import ('@/views/startexam/index'),
            name: '开始考试',
            title: '开始考试',
            noCache: true
        }]
    },
    // {
    //     path: '/traincompany',
    //     component: Layout,
    //     redirect: '/traincompany/index',
    //     children: [{
    //         path: 'index',
    //         name: '培训公司查询',
    //         meta: {
    //             i18n: 'dict'
    //         },
    //         component: () =>
    //             import ( /* webpackChunkName: "views" */ '@/views/traincompany/index')
    //     }]
    // },
    {
        path: '/dispatchChildoperableSee',
        component: Layout,
        redirect: '/dispatchChildoperableSee/index',
        children: [{
            path: 'index',
            name: '派遣记录',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/dispatch/dispatchChildoperableSee')
        }]
    },
    {
        path: '/expression',
        component: Layout,
        redirect: '/expression/index',
        children: [{
            path: 'index',
            name: '表现记录',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/people/expression')
        }]
    }, {
        path: '/job',
        component: Layout,
        redirect: '/job/index',
        children: [{
            path: 'index',
            name: '从业记录',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/people/job')
        }]
    }, {
        path: '/resource',
        redirect: '/resource/uploadNotice',
        component: Layout,
        children: [{
            path: 'uploadNotice',
            name: '通知公告>附件上传',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/uploadNotice')
        }]
    },
    {
        path: '/applydetailed',
        redirect: '/applydetailed/papers',
        component: Layout,
        children: [{
            path: 'papers',
            name: '报名清册信息',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/applydetailed/papers')
        }]
    },
    {
        path: '/exam',
        redirect: '/exam/papers',
        component: Layout,
        children: [{
            path: 'papers',
            name: '保安证',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/exam/papers')
        }]
    }, {
        path: '/resource',
        redirect: '/resource/uploadPolicyRelease',
        component: Layout,
        children: [{
            path: 'uploadPolicyRelease',
            name: '政策发布>附件上传',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/uploadPolicyRelease')
        }]
    }, {
        path: '/securityMan',
        redirect: '/securityMan/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '保安员信息',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityMan/index')
        }]
    }, {
        path: '/attachOnce',
        redirect: '/resource/attachOnce',
        component: Layout,
        children: [{
            path: 'index',
            name: '附件查阅',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/attachOnce')
        }]
    }, {
        path: '/resource',
        redirect: '/resource/uploadNotification',
        component: Layout,
        children: [{
            path: 'uploadNotification',
            name: '通知通报>附件上传',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/resource/uploadNotification')
        }]
    }, {
        path: '/trainExam',
        component: Layout,
        children: [{
            path: 'check',
            name: '培训考试审核',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/trainExam/index')
        }, {
            path: 'query',
            name: '培训申请管理',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/trainExam/index')
        }]
    },
    {
        path: 'modifiedGrades',
        name: '修改成绩管理',
        meta: {
            i18n: 'modifiedGrades'
        },
        component: () =>
            import ( /* webpackChunkName: "views" */ '@/views/trainExam/modifiedGrades')
    },
    {
        path: '/accreditationRecords',
        component: Layout,
        redirect: '/accreditationRecords/accreditationRecords',
        children: [{
            path: 'index',
            name: '制证管理',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/accreditationRecords/accreditationRecords')
        }]
    },
    {
        path: '/certificateOfPrint',
        component: Layout,
        redirect: '/certificateOfPrint/index',
        children: [{
            path: 'index',
            name: '纸质证书制作',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityGuard/certificateOfPrint')
        }]
    },
    {
        path: '/userSManual',
        component: Layout,
        redirect: '/userSManual/index',
        children: [{
            path: 'index',
            name: '用户手册',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/page/index/top/userSManual')
        }]
    },
    {
        path: '/drive',
        component: Layout,
        redirect: '/drive/index',
        children: [{
            path: 'index',
            name: '驱动下载',
            meta: {
                i18n: 'index'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/page/index/top/drive')
        }]
    },
]
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/trainExam/modifiedGrades')
  },
  {
    path: '/accreditationRecords',
    component: Layout,
    redirect: '/accreditationRecords/accreditationRecords',
    children: [{
      path: 'index',
      name: '制证管理',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/accreditationRecords/accreditationRecords')
    }]
  },
  {
    path: '/certificateOfPrint',
    component: Layout,
    redirect: '/certificateOfPrint/index',
    children: [{
      path: 'index',
      name: '纸质证书制作',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/securityGuard/certificateOfPrint')
    }]
  },
  {
    path: '/userSManual',
    component: Layout,
    redirect: '/userSManual/index',
    children: [{
      path: 'index',
      name: '用户手册',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/page/index/top/userSManual')
    }]
  },
  {
    path: '/drive',
    component: Layout,
    redirect: '/drive/index',
    children: [{
      path: 'index',
      name: '驱动下载',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/page/index/top/drive')
    }]
  }, {
    path: '/rail',
    component: Layout,
    redirect: '/rail/index',
    children: [{
      path: 'index',
      name: '电子围栏测试',
      meta: {
        i18n: 'index'
      },
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/rail/rail')
    }]
  },
]

 src/store/getters.js

@@ -33,6 +33,9 @@
  windowHeight: state => state.control.windowHeight,
  table_height: state => state.control.table_height,
  screenSize: state => state.control.screenSize,
  screenHeight: state => state.control.screenHeight
  screenHeight: state => state.control.screenHeight,
  //面
  polygons: state => state.control.polygons,

};
export default getters;

 src/store/modules/control.js

@@ -44,7 +44,9 @@
      searchIndex: 6, //收缩展示数量
      searchIcon: true, //搜索是否收缩
      height: window.screen.height //初始高度
    }
    },
    //面的集和点
    polygons: [],
  },
  actions: {
    WHchangeHight({
@@ -246,6 +248,9 @@
    }
  },
  mutations: {
    setpolygon: (state, data) => {
      state.polygons = data;
    },
    setWindowSize: (state, data) => {
      state.windowWidth = data.innerWidth;
      state.windowHeight = data.innerHeight;

 src/views/rail/getMapDataInThere.vue

New file
@@ -0,0 +1,543 @@
<template>
  <div class="getMapData" :key="Refresh">
    <MapInThere ref="getMapDataRefs" />
    <div class="notDatas" v-show="isCheck">
      <div style="color:red">*</div>
      未绘画区域
    </div>
    <div class="controlMapWindowTitle">
      <el-button-group>
        <el-button type="primary" icon="el-icon-finished" @click="drawFace"
          >绘画区域</el-button
        >
        <el-button type="danger" @click="giveUp" icon="el-icon-close"
          >取消</el-button
        >
      </el-button-group>
    </div>
    <!-- <div class="controlMapWindow">
      <div class="controlMapWindowTitle">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-finished"
            @click="openDrawLineMethod"
            :disabled="fromView"
            >新增路线</el-button
          >
          <el-button
            type="primary"
            @click="openDrawPointMethod"
            icon="el-icon-coordinate"
            :disabled="fromView"
            >新增标点</el-button
          >
        </el-button-group>
      </div>
      <div class="controlMapWindowmain">
        <transition-group
          :name="animateName"
          :enter-active-class="animateEnter"
          :leave-active-class="animateLeave"
        >
          <div
            class="getMapData__once"
            v-for="(item, index) in ourDatas"
            :key="index"
          >
            <div class="getMapData_once_label">
              <el-tag> {{ item.label }}</el-tag>
            </div>
            <el-input
              :class="[
                'getMapData_once_name',
                item.notPath == 2 ? 'notPath' : '',
              ]"
              @blur="myRules(index)"
              v-model="item.name"
              placeholder="请输入路径名称"
              :disabled="fromView"
            ></el-input>
            <transition
              :name="animateNames"
              :enter-active-class="animateEnters"
              :leave-active-class="animateLeaves"
            >
              <div class="notPathTitile" v-show="item.notPath == 2">
                请输入名称或选择路径
              </div>
            </transition>
            <el-button
              class="getMapData_once_get"
              :type="item.value ? 'success' : 'primary'"
              :title="item.value ? '重新选择' : '点击选择'"
              :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
              @click="openMap(item.label, index, item.value)"
              :disabled="MapDataShow || fromView"
            ></el-button>
            <el-button
              class="getMapData_once_endBut"
              icon="el-icon-delete"
              circle
              @click="deleteRowOurs(index)"
              :disabled="MapDataShow || fromView"
            ></el-button>
          </div>
        </transition-group>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MapInThere from "@/components/map/mainInThere.vue";
export default {
  name: "getMapData",
  components: {
    MapInThere
  },
  computed: {
    ...mapGetters(["rotesData", "pointData", "polygons"])
  },
  watch: {
    ourDatas: {
      handler(val) {
        // console.log("深度监听：", val);
        this.checkDom("getMapDataRefs", dom => {
          dom.onceOnlodad(val);
        });
      },
      deep: true
    },
    polygons() {
      console.log(this.polygons);
      if (this.polygons.length > 0) {
        this.isCheck = false;
      }
    }
  },
  data() {
    return {
      Refresh: false,
      // routers: [
      //   {
      //     label: "路径1",
      //     value: "",
      //     routerName: "",
      //     notPath: true,
      //   },
      // ],
      // potions: [
      //   {
      //     label: "标点1",
      //     value: "",
      //     potionName: "",
      //     notPath: true,
      //   },
      // ],
      //动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeIn",
      animateLeave: "animated fadeOut",
      //未输入动画效果
      animateName: "custom-classes-transition",
      animateEnter: "animated fadeInDown",
      animateLeave: "animated fadeOut",
      openTitle: "路径1",
      MapDataShow: false,
      fromView: false,
      ourDatas: [
        // {
        //   label: "路径2",
        //   value:
        //     "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
        //   name: "xxx2",
        //   notPath: false,
        //   isLine: true,
        //   id: 2,
        // },
        // {
        //   label: "路径3",
        //   value:
        //     "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
        //   name: "xxx3",
        //   notPath: false,
        //   isLine: true,
        //   id: 3,
        // },
        // {
        //   label: "标点4",
        //   value: [114.03887343706977, 27.63000553765213],
        //   name: "喜迎校庆选点1",
        //   notPath: false,
        //   isLine: false,
        //   id: 4,
        // },
      ],
      nowId: 0,
      isCheck: false
    };
  },
  mounted() {
    // this.$emit("setMapData", [this.routers, this.potions]);
    // let that = this;
    // if (that.ourDatas.length != 0) {
    //   for (let k in that.ourDatas) {
    //     that.ourDatas[k].id = +k + 1;
    //   }
    // }
    // this.checkDom("getMapDataRefs", dom => {
    //   dom.addLines(that.polygons);
    // });
    // this.nowId = +this.ourDatas.length + 1;
    if (this.polygons.length > 0) {
      this.doThat(this.polygons);
    }
  },
  methods: {
    doThat(val) {
      this.checkDom("getMapDataRefs", dom => {
        dom.addLines(val);
        // 移动位置
        dom.move(val);
      });
    },
    drawFace() {
      // console.log(this.$refs.getMapDataRefs);
      this.$refs.getMapDataRefs.drawStart();
    },
    giveUp() {
      // console.log(234);
      this.$refs.getMapDataRefs.closeDraw();
    },
    openDrawLineMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "路径" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: true,
        id: +id
      });
    },
    openDrawPointMethod() {
      let id = this.nowId++;
      this.ourDatas.push({
        label: "标点" + +id,
        value: "",
        name: "",
        notPath: false,
        isLine: false,
        id: +id
      });
    },
    deleteRowOurs(index) {
      this.ourDatas.splice(index, 1);
    },
    backMapDataOurData(val, index) {
      if (val == "line") {
        this.ourDatas[index].value = this.rotesData;
      } else if (val == "point") {
        this.ourDatas[index].value = this.pointData;
      } else if (val == "notData") {
        this.ourDatas[index].value = "";
      }
      //单个验证
      this.myRules(index);
    },
    //以上是添加数据集方法
    //选择map数据
    openMap(val, num, value) {
      this.MapDataShow = true;
      this.openTitle = val;
      this.$refs.getMapDataRefs.init(val, num, value);
    },
    closeOpenedMap() {
      this.MapDataShow = false;
      // this.openTitle = "";
    },
    //下面是旧代码
    editInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
    },
    viewInit(val) {
      //查看情况逆转String成为当页可使用数据,并做动作
      this.reverseMapData(val);
      this.fromView = true; //查看数据不可改
    },
    reverseMapData(val, label) {
      //解释数据
      let rname = val[0][0].split(";"),
        r = val[0][1].split(";"),
        pname = val[1][0].split(";"),
        p = val[1][1].split(";");
      this.ourDatas = [];
      for (let k in r) {
        this.ourDatas.push({
          label: "路径" + (+k + 1),
          value: r[k],
          name: rname[k],
          notPath: false,
          isLine: true,
          id: this.ourDatas.length
        });
      }
      for (let k in p) {
        let potion = p[k].split(",");
        this.ourDatas.push({
          label: "标点" + (+k + 1),
          value: [+potion[0], +potion[1]],
          name: pname[k],
          notPath: false,
          isLine: false,
          id: this.ourDatas.length
        });
      }
      this.nowId = +this.ourDatas.length + 1;
    },
    myRules(index) {
      //单个验证
      if (this.ourDatas[index].name && this.ourDatas[index].value) {
        this.ourDatas[index].notPath = false;
      } else {
        this.ourDatas[index].notPath = 2;
      }
    },
    //自定义验证
    myRulesUse() {
      //把一个数组拆开两个来对应之前的数据
      let ourData = this.ourDatas;
      let lineBefor = [];
      let pointBefor = [];
      for (let o in ourData) {
        if (ourData[o].isLine) {
          lineBefor.push(ourData[o]);
        } else {
          pointBefor.push(ourData[o]);
        }
      }
      let line = this.changeMapData(lineBefor, "name");
      let point = this.changeMapData(pointBefor, "name");
      // console.log(line, point);
      if (line[0] == "namenot" || point[0] == "namenot") {
        //需要显示验证失败合集
        let errorId = [];
        if (line[0] == "namenot") {
          errorId.push(...line[1]);
        }
        if (point[0] == "namenot") {
          errorId.push(...point[1]);
        }
        // console.log(errorId, "errorId");
        for (let x in this.ourDatas) {
          // console.log(this.ourDatas[x], "x");
          let flog = true;
          for (let k in errorId) {
            if (errorId[k] == this.ourDatas[x].id) {
              flog = false;
            }
          }
          if (flog) {
            this.ourDatas[x].notPath = false;
          } else {
            this.ourDatas[x].notPath = 2;
          }
        }
        return false;
      } else {
        // console.log("通过");
        for (let i in this.ourDatas) {
          this.ourDatas[i].notPath = false;
        }
        return [line, point];
      }
    },
    //规则
    changeMapData(item, names) {
      let name = "",
        value = "",
        notData = [];
      let itemLength = item.length - 1;
      // console.log(item, names, 7777);
      for (let k in item) {
        let inItem = item[k];
        for (let kin in inItem) {
          if (
            inItem[kin] == "" &&
            kin != "notPath" &&
            kin != "isLine" &&
            kin != "id"
          ) {
            // console.log(kin);
            notData.push(inItem.id);
            break;
          }
          if (kin == names) {
            name += inItem[kin];
            if (k != itemLength) {
              name += ";";
            }
          }
          if (kin == "value") {
            value += inItem[kin];
            if (k != itemLength) {
              value += ";";
            }
          }
        }
      }
      return notData.length > 0 ? [names + "not", notData] : [name, value];
    },
    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;
}
.getMapData {
  width: 100%;
  height: 100%;
  position: relative;
  .controlMapWindowTitle {
    position: absolute;
    left: calc(50% - 42px);
    top: 0;
  }
  // .controlMapWindow {
  //   width: 320px;
  //   height: calc(100% - 20px);
  //   // border: 1px solid red;
  //   // box-shadow: 2px 0 15px 2px #acacac;
  //   position: absolute;
  //   left: 10px;
  //   top: 10px;
  //   background-color: #fff;
  //   border-radius: 0 15px 15px 0;
  //   padding: 10px 10px;
  //   overflow: hidden;
  //   // .controlMapWindowTitle {
  //   //   height: 40px;
  //   //   width: 100%;
  //   //   margin-bottom: 5px;
  //   //   @extend .flexCenter;
  //   // }
  //   .controlMapWindowmain {
  //     width: 100%;
  //     height: calc(100% - 45px);
  //     overflow-x: hidden;
  //     overflow-y: scroll;
  //     .getMapData_left {
  //       width: 50%;
  //       height: 40px;
  //       box-sizing: border-box;
  //     }
  //     .getMapData_right {
  //       width: 50%;
  //       height: 40px;
  //       box-sizing: border-box;
  //     }
  //     .getMapData__once {
  //       width: 100%;
  //       height: 40px;
  //       margin-bottom: 10px;
  //       position: relative;
  //       @extend .flexCenter;
  //       flex-direction: row;
  //       .getMapData_once_label {
  //         padding-left: 15px;
  //         width: 90px;
  //         height: 100%;
  //         @extend .flexCenter;
  //         justify-content: space-around;
  //       }
  //       .getMapData_once_name {
  //         width: calc(100% - 130px);
  //       }
  //       .getMapData_once_get {
  //         padding: 6px 16px;
  //         font-size: 20px;
  //       }
  //       .notPathTitile {
  //         position: absolute;
  //         left: 90px;
  //         bottom: -20px;
  //         color: red;
  //         font-size: 1px;
  //       }
  //     }
  //   }
  // }
  // 验证
  .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;
}

.notDatas {
  width: auto;
  height: auto;
  position: absolute;
  top: 5px;
  left: 100px;
  background-color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  div {
    display: inline;
  }
}
</style>

 src/views/rail/rail.vue

@@ -3,11 +3,12 @@
    :class="[
      'securityUnit',
      $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
      $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
    ]"
  >
    <avue-crud
      class="tablesss"
      :before-open="beforeOpen"
      :option="option"
      :data="data"
      :page.sync="page"
@@ -35,31 +36,41 @@
          >删 除
        </el-button>
      </template>
      <template slot-scope="{ type, row }" slot="menu">
      <template slot-scope="{ type, row, index }" slot="menu">
        <el-button
          :type="type"
          size="small"
          icon="el-icon-folder-checked"
          :disabled="row.applyStatus == 4"
          @click="handleAudit(row)"
          @click="handleAudit(row, index)"
          >查看围栏
        </el-button>
      </template>
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="lineForm">
        <div class="mapClassMain" style="width: 1000px; height: 400px">
        <!-- <div class="mapClassMain" style="width: 1000px; height: 400px">
          <Map ref="modalForm" />
        </div>
        </div> -->
        <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
      </template>
    </avue-crud>

  </basic-container>
</template>

<script>
import { getList, add, update, remove, getRailTree } from "@/api/rail/rail";
import getMapDataInThere from "./getMapDataInThere.vue";

import { mapGetters } from "vuex";
export default {
  components: {
    // Map,
    getMapDataInThere
  },
  data() {
    return {
      loading: true,
@@ -68,7 +79,7 @@
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize,
        ...this.$store.state.control.changePageSize
      },
      form: {},
      query: {},
@@ -101,10 +112,10 @@
              {
                required: true,
                message: "请输入围栏名称",
                trigger: "click",
              },
                trigger: "click"
              }
            ],
            overHidden: true,
            overHidden: true
          },
          {
            label: "类型",
@@ -117,39 +128,39 @@
            dicData: [
              {
                label: "本单位",
                value: 1,
                value: 1
              },
              {
                label: "分公司",
                value: 2,
                value: 2
              },
              {
                label: "服务单位",
                value: 3,
              },
                value: 3
              }
            ],
            rules: [
              {
                required: true,
                message: "请选择类型",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "企业名称",
            prop: "companyName",
            display:false,
            display: false,
            minWidth: 160,
            span: 24,
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "click",
              },
                trigger: "click"
              }
            ],
            overHidden: true,
            overHidden: true
          },
          {
            label: "企业名称",
@@ -157,21 +168,19 @@
            span: 12,
            labelWidth: 145,
            type: "tree",
            hide:true,
            hide: true,
            props: {
              label: "title",
              value: "id",
              value: "id"
            },
            rules: [
              {
                required: true,
                message: "请输入企业名称",
                trigger: "blur",
              },
                trigger: "blur"
              }
            ],
            dicData: [
              
            ]
            dicData: []
          },
          {
            label: "创建日期",
@@ -180,14 +189,14 @@
            type: "date",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            display:false,
            display: false,
            rules: [
              {
                required: true,
                message: "请选择创建日期",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "路线展示",
@@ -198,65 +207,125 @@
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true,
          },
            addDisplay: true
          }
        ],
        ...this.$store.state.control.clearOtherBut,
      },
        ...this.$store.state.control.clearOtherBut
      }
    };
  },
  created() {
    this.getRailLazyTree();
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    ...mapGetters(["userInfo", "permission", "polygons"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.rail_add, false),
        addBtn: this.vaildData(this.permission.rail_add, true),
        viewBtn: this.vaildData(this.permission.rail_view, false),
        delBtn: this.vaildData(this.permission.rail_delete, false),
        editBtn: this.vaildData(this.permission.rail_edit, false),
        editBtn: this.vaildData(this.permission.rail_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    }
  },
  watch: {
    "form.type": {
      handler(val) {
        var companyIdcolumn = this.findObject(this.option.column, "companyId");
        if(val==1){
            companyIdcolumn.dicData = this.dicData1;
        if (val == 1) {
          companyIdcolumn.dicData = this.dicData1;
        }
        if(val==2){
            companyIdcolumn.dicData = this.dicData2;
        if (val == 2) {
          companyIdcolumn.dicData = this.dicData2;
        }
        if(val==3){
            companyIdcolumn.dicData = this.dicData3;
        if (val == 3) {
          companyIdcolumn.dicData = this.dicData3;
        }
      },
      immediate: true,
    },
      immediate: true
    }
  },
  mounted() {
    this.$store.commit("setWindowSizeHeightAdd");
  },
  methods: {
    beforeOpen(done, type) {
      // console.log(type);
      if (type == "edit") {
        // this.$refs.getMapData.doThat(this.polygons);
        done();
      } else if (type == "add") {
        this.$store.commit("setpolygon", []); //用vuex传最终数据
        done();
      }
    },
    handleAudit(row, index) {
      // console.log(row);
      let usePolygons = row.coordinate
        .split("POLYGON((")[1]
        .split("))")[0]
        .split(",");
      for (let k in usePolygons) {
        usePolygons[k] = {
          lng: +usePolygons[k].split(" ")[0],
          lat: +usePolygons[k].split(" ")[1]
        };
      }
      // console.log(usePolygons);
      this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
      // return;
      this.$refs.crud.rowEdit(row, index);
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    //dom获取、
    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();
    },
    //获取单位树数据
    getRailLazyTree() {
      let that = this;
      getRailTree(1,this.userInfo.dept_id).then((res) => {
      getRailTree(1, this.userInfo.dept_id).then(res => {
        that.dicData1 = res.data.data;
      });
      getRailTree(2,this.userInfo.dept_id).then((res) => {
      getRailTree(2, this.userInfo.dept_id).then(res => {
        that.dicData2 = res.data.data;
      });
      getRailTree(3,this.userInfo.dept_id).then((res) => {
      getRailTree(3, this.userInfo.dept_id).then(res => {
        that.dicData3 = res.data.data;
      });
    },
@@ -271,18 +340,42 @@
      this.onLoad(this.page, this.query);
    },
    rowSave(form, done, loading) {
      add(form).then((res) => {
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
        return;
      }
      let pol = this.polygons;
      // console.log(pol);
      let polLength = this.polygons.length - 1;
      let usePolygons = "";
      for (let k in pol) {
        usePolygons += pol[k].lng + "," + pol[k].lat;
        if (k != polLength) {
          usePolygons += ";";
        }
      }
      // console.log(form);
      let data = {
        name: form.name,
        type: form.type,
        companyId: form.companyId,
        coordinate: usePolygons
      };
      // return;
      add(data).then(res => {
        if (res.data.success) {
          this.$message({
            message: "操作成功",
            type: "success",
            type: "success"
          });
          this.refreshChange();
          done();
        } else {
          this.$message({
            message: "操作失败",
            type: "warning",
            type: "warning"
          });
          done();
        }
@@ -299,16 +392,36 @@
      this.onLoad(this.page);
    },
    rowUpdate(row, index, done, loading) {
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
        return;
      }
      let pol = this.polygons;
      // console.log(pol);
      let polLength = this.polygons.length - 1;
      let usePolygons = "";
      for (let k in pol) {
        usePolygons += pol[k].lng + "," + pol[k].lat;
        if (k != polLength) {
          usePolygons += ";";
        }
      }
      row.coordinate = usePolygons;
      // console.log(row);
      // loading();
      // return;
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          done();
        },
        (error) => {
        error => {
          window.console.log(error);
          loading();
        }
@@ -318,7 +431,7 @@
      this.$confirm("确定删除当前合同信息数据?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          console.log(row);
@@ -328,7 +441,7 @@
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
        });
    },
@@ -343,10 +456,10 @@
      this.$confirm("确定批量将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids).then((res) => {
          return remove(this.ids).then(res => {
            this.refreshChange();
          });
        })
@@ -354,11 +467,11 @@
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
            message: "操作成功!"
          });
          this.$refs.crudrec.toggleSelection();
        })
        .catch((res) => {});
        .catch(res => {});
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
@@ -376,7 +489,7 @@
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
@@ -384,8 +497,8 @@
        this.$store.commit("setWindowSizeHeightAdd");
        this.loading = false;
      });
    },
  },
    }
  }
};
</script>

@@ -445,4 +558,11 @@
    cursor: pointer;
  }
}

#getMapData {
  width: calc(100% + 90px);
  position: relative;
  left: -90px;
  height: 400px;
}
</style>

 vue.config.js

@@ -29,8 +29,10 @@
    proxy: {
      "/api": {
        // 本地服务接口地址
        target: 'http://localhost:81',
        // target: 'http://192.168.0.114:81',//钟日健W
        // target: 'http://localhost:81',
        // target: 'http://192.168.0.114:81', //钟日健W
        target: 'http://192.168.0.193:32248/api', //钟日健W备份
        // target: 'http://192.168.0.222:81', //自己W
        // target: 'http://localhost:81', //原W
        // target: 'http://192.168.0.108:81',//原W
        // target: 'http://192.168.0.107:81',//唐N

			@@ -4,7 +4,7 @@
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
			<meta http-equiv="X-UA-Compatible" content="chrome=1" />
			<meta name="renderer" content="webkit">
			<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
			<meta name="apple-mobile-web-app-capable" content="yes">
			@@ -18,6 +18,12 @@
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.8.12/index.css">
			<script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
			<script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>

			<!-- 地图 -->
			<script type="text/javascript" src="js/jquery.min.js"></script>
			<script src="libs/Cesium/Cesium.js"></script>
			<script type="text/javascript" src="js/drawTree.js"></script>

			<link rel="icon" href="<%= BASE_URL %>favicon.png">
			<title>保安服务企业管理</title>
			<style>
			@@ -53,7 +59,7 @@
			padding: 1em 0;
			}

			.avue-home__footer > a {
			.avue-home__footer>a {
			font-size: 12px;
			color: #ABABAB;
			text-decoration: none;
			@@ -75,41 +81,42 @@
			color: #ABABAB;
			font-size: 12px;
			}

			</style>
			</head>

			<body>
			<noscript>
			<strong>
			很抱歉，如果没有 JavaScript 支持，Saber 将不能正常工作。请启用浏览器的 JavaScript 然后继续。
			</strong>
			</noscript>
			<div id="app">
			<div class="avue-home">
			<div class="avue-home__main">
			<img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
			<div class="avue-home__title">
			正在加载资源
			<noscript>
			<strong>
			很抱歉，如果没有 JavaScript 支持，Saber 将不能正常工作。请启用浏览器的 JavaScript 然后继续。
			</strong>
			</noscript>
			<div id="app">
			<div class="avue-home">
			<div class="avue-home__main">
			<img class="avue-home__loading" src="<%= BASE_URL %>svg/loading-spin.svg" alt="loading">
			<div class="avue-home__title">
			正在加载资源
			</div>
			<div class="avue-home__sub-title d">
			初次加载资源可能需要较多时间请耐心等待
			</div>
			</div>
			<div class="avue-home__sub-title d">
			初次加载资源可能需要较多时间请耐心等待
			</div>
			</div>
			<div class="avue-home__footer">
			<!-- <a href="https://bladex.vip" target="_blank">
			<div class="avue-home__footer">
			<!-- <a href="https://bladex.vip" target="_blank">
			https://bladex.vip </a> -->
			</div>
			</div>
			</div>
			</div>
			<!-- built files will be auto injected -->
			<script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/vue/2.6.10/vue.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/vuex/3.1.1/vuex.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/avue/2.8.12/avue.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/echarts/echarts.min.js" charset="utf-8"></script>
			<!-- built files will be auto injected -->
			<script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/vue/2.6.10/vue.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/vuex/3.1.1/vuex.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/avue/2.8.12/avue.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/echarts/echarts.min.js" charset="utf-8"></script>
			</body>

			</html>

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;

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>

New file
			@@ -0,0 +1,794 @@
			<!--
			* @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 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-group>
			<div id="openTitle" style="display: none">当前选择：{{ openTitle }}</div>
			<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" @click="stopDrawOur" icon="el-icon-delete"
			>取消</el-button
			>
			</el-button-group>
			<el-button-group id="openDrawPoint" style="display: none">
			<el-button
			type="primary"
			icon="el-icon-edit"
			@click="getTypeSelectedPoint"
			:disabled="beginDraw"
			>{{ butTitlePoint }}</el-button
			>
			<el-button type="primary" @click="stopDrawOur" icon="el-icon-delete"
			>取消</el-button
			>
			</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
			>
			<el-button
			type="danger"
			@click="clearUseMapData"
			icon="el-icon-refresh-right"
			>清空</el-button
			>
			</el-button-group>
			<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 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(),
			}),
			peopleLineAddlayer: null,

			// 存储新增点，线，面，数据的地方
			// 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, //若是查看不显示更改按钮

			openTitle: "", //当前选择

			ourDatas: [], //所有数据
			ourLayer: {}, //图层合集

			notNow: true, //如果修改，不显示确认按钮
			};
			},
			computed: {
			openDrawChiose() {
			// console.log(
			// "this.openDrawLine:",
			// this.openDrawLine,
			// "this.openDrawPoint:",
			// this.openDrawPoint
			// );
			if (this.openDrawLine) {
			return "openDrawLine";
			} else if (this.openDrawPoint) {
			return "openDrawPoint";
			} else {
			return "notBut---";
			}
			},
			},
			// watch: {
			// openDrawChiose() {
			// console.log(this.openDrawChiose, "openDrawChiose");
			// },
			// },
			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: {
			clearUseMapData() {
			if (this.openDrawPoint) {
			this.$store.commit("setPointData", ""); //用vuex清空最终数据
			} else if (this.openDrawLine) {
			this.$store.commit("setRotesData", ""); //用vuex清空最终数据
			}
			this.useMapData();
			},
			onceOnlodad(ourDatas) {
			this.ourDatas = ourDatas;
			this.Renders(ourDatas);
			},
			//加载底层路线和图标
			Renders(ourDatas) {
			// for (let i in ourDatas) {
			// console.log(ourDatas[i].value, "------", i);
			// }
			this.deleteElement();
			for (let k in ourDatas) {
			if (ourDatas[k].isLine) {
			if (!ourDatas[k].value) {
			// this.deleteElement("line", ourDatas[k].id);
			} else {
			this.addLines(ourDatas[k], "line");
			}
			} else {
			if (!ourDatas[k].value) {
			// this.deleteElement("point", ourDatas[k].id);
			} else {
			this.addPoint(ourDatas[k], "point");
			}
			}
			}
			this.drawLayerRoom(); //重置绘画层
			},
			// 若没有value数据，删除地图上的元素
			deleteElement(name, id) {
			// console.log(name, id);
			// this.ourLayer[name + id].getSource().clear();
			for (let k in this.ourLayer) {
			this.ourLayer[k].getSource().clear();
			}
			},
			//加载点
			addPoint(data, name) {
			//创建图层
			let layer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource(),
			}),
			iconFeature = new OlFeature({
			geometry: new OlGeomPoint(data.value), //绘制图形（点）
			}),
			iconFeatureTitle = new OlFeature({
			geometry: new OlGeomPoint(data.value), //绘制图形（点）
			}),
			that = this;
			iconFeature.setStyle(
			new OlStyleStyle({
			image: new OlStyleIcon({
			scale: 0.5,
			offset: [0, 5],
			offsetOrigin: "bottom",
			src: "img/dingwei/dingwei5.png",
			}),
			})
			);
			iconFeatureTitle.setStyle(
			new OlStyleStyle({
			text: new OlStyleText({
			text: data.name,
			font: "14px sans-serif", // CSS 字体设置
			scale: 1, //比例
			offsetY: -40,
			fill: new OlStyleFill({
			color: "#1296DB",
			}),
			}),
			})
			);
			layer.getSource().addFeature(iconFeature);
			layer.getSource().addFeature(iconFeatureTitle);
			//保存图层
			this.ourLayer[name + data.id] = layer;
			ol2d.addLayer(that.ourLayer[name + data.id]);
			// console.log(this.ourLayer, 77777);
			},
			addLines(data, name) {
			//创建图层
			let layer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource(),
			}),
			that = this;
			//绘画线路
			var entityData = "";
			var entityArr = [];
			entityData = data.value.match(/\(([^)]*)\)/);
			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; // 线里点的集合
			// console.log(lineCoords);
			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(18,150,219)",
			width: 5,
			}),
			})
			);
			//线名称
			let lineFeatureTitle = new OlFeature({
			geometry: new OlGeomPoint(lineCoords[0]), //绘制图形（点）
			});
			lineFeatureTitle.setStyle(
			new OlStyleStyle({
			text: new OlStyleText({
			text: data.name,
			font: "14px sans-serif", // CSS 字体设置
			scale: 1, //比例
			offsetY: -10,
			fill: new OlStyleFill({
			color: "#1296DB",
			}),
			}),
			})
			);
			layer.getSource().addFeature(lineFeatureTitle);
			layer.getSource().addFeature(feature_LineString);
			//保存图层
			this.ourLayer[name + data.id] = layer;
			ol2d.addLayer(that.ourLayer[name + data.id]);
			// console.log(this.ourLayer, 88888);
			},

			//上面是初始化·················

			//下面是选择点或线路开始按钮
			init(val, num, value) {
			this.openTitle = val;
			if (value) {
			this.notNow = false;
			} else {
			this.notNow = true;
			}
			this.nowIndex = num;
			if (val.indexOf("路径") != -1) {
			// console.log("加载路径按钮");
			this.controlBut("openDrawLine", this.notNow);
			} else {
			// console.log("加载标点按钮");
			this.controlBut("openDrawPoint", this.notNow);
			}
			},
			controlBut(openName, notNow) {
			this.closeOurBut();
			this[openName] = true;
			$("#" + openName).show();
			$("#openTitle").show();
			if (!notNow) {
			$("#dataConfirm").show(100);
			}
			},
			closeOurBut(open) {
			$("#dataConfirm").hide();
			$("#openDrawPoint").hide();
			$("#openDrawLine").hide();
			$("#openTitle").hide();
			this.openDrawLine = false;
			this.openDrawPoint = false;
			if (open) {
			this.openTitle = "";
			this.$parent.closeOpenedMap(); //开放按钮
			}
			},
			//取消按钮
			stopDrawOur() {
			this.closeOurBut(true);
			},
			//确认数据
			useMapData() {
			//返回用数据
			// 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";
			}
			this.$parent.backMapDataOurData(val, this.nowIndex);
			// 返回后关闭操作按钮
			this.closeOurBut();
			//清除绘画图层
			this.drawLayerRoom();
			},
			//提示位置
			setTipPosition(x, y, n, m) {
			this.position.w = x + n;
			this.position.h = y + m;
			},
			//实时添加最上图层，为了编辑或新建路径能在最上
			drawLayerRoom() {
			let that = this;
			//添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
			if (that.peopleLineAddlayer) {
			that.peopleLineAddlayer.getSource().clear();
			that.peopleLineAddlayer = null;
			that.peopleLineAddlayer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource(),
			});
			} else {
			that.peopleLineAddlayer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource(),
			});
			}
			ol2d.addLayer(this.peopleLineAddlayer);
			},

			//选择绘画路线------↓
			getTypeSelected() {
			let that = this;
			this.beginDraw = true;
			this.draw && ol2d.removeInteraction(this.draw);
			//再根据typeSelect的值绘制新的Interaction
			this.drawLayerRoom(); //重置绘画层
			this.addInteraction();
			},
			addInteraction() {
			let value = this.typeSelected,
			that = this;
			this.tipTitle = "单击左键或右键开始绘画";
			$("#map") //提示器
			.off("mousemove")
			.mousemove(function (e) {
			if (!that.showTip) {
			that.showTip = true;
			}
			that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
			});
			this.coordinates = [];
			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 = "可继续，或选择最终位置双击结束";
			},
			coordinateOver: function (res) {
			// 结束绘画处理数据
			let d = that.doData(that.coordinates);
			that.addLinesDraw(d);
			that.$store.commit("setRotesData", d); //用vuex传最终数据
			},
			});
			ol2d.addInteraction(this.draw);
			}
			},
			//处理数据
			doData(val) {
			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;
			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 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: "red",
			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;
			}
			},
			//绘画路线------↑
			//绘画点-------↓
			getTypeSelectedPoint() {
			this.tipTitle = "单击左键选择位置";
			let that = this;
			let isHaveOne = false;
			this.drawLayerRoom(); //重置绘画层
			$("#map")
			.off("mousemove")
			.mousemove(function (e) {
			if (!that.showTip) {
			that.showTip = true;
			}
			that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
			});

			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传最终数据
			that.addIconMarker(res.coordinate);
			isHaveOne = true;
			},
			});
			ol2d.addInteraction(this.draw);
			}
			},
			addIconMarker(intlat) {
			let that = this;
			let iconFeature = new OlFeature({
			geometry: new OlGeomPoint(intlat), //绘制图形（点）
			});
			iconFeature.setStyle(
			new OlStyleStyle({
			image: new OlStyleIcon({
			scale: 0.5,
			offset: [0, 5],
			offsetOrigin: "bottom",
			//透明度
			opacity: 1,
			//图片路径
			src: "img/dingwei/dingwei6.png",
			}),
			})
			);
			that.peopleLineAddlayer.getSource().addFeature(iconFeature);
			this.butTitlePoint = "重新标点";
			if (!this.fromView) {
			$("#dataConfirm").show(100);
			}
			if (this.draw != null) {
			this.draw.controlDrawing(true);
			$("#map").unbind("mousemove");
			this.tipTitle = "";
			this.showTip = false;
			}
			},
			//绘制点------↑
			},
			};
			</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>

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>

New file
			@@ -0,0 +1,903 @@
			<!--
			* @Descripttion:
			* @version:
			* @Author: song
			* @Date: 2021-04-08 15:14:57
			* @LastEditors: song
			* @LastEditTime: 2021-04-24 11:59:43
			-->
			<template>
			<div id="map">
			<tip v-if="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 Polygon from "ol/geom/Polygon.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()
			}),
			peopleLineAddlayer: null,

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

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

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

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

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

			fromView: false, //若是查看不显示更改按钮

			openTitle: "", //当前选择

			ourDatas: [], //所有数据
			ourLayer: null, //图层合集

			notNow: true, //如果修改，不显示确认按钮

			polygon: [], //面的点集合
			source: null,
			layermian: new VectorLayer({
			//面实例
			zIndex: 22,
			source: new VectorSource()
			})
			};
			},
			computed: {
			openDrawChiose() {
			// console.log(
			// "this.openDrawLine:",
			// this.openDrawLine,
			// "this.openDrawPoint:",
			// this.openDrawPoint
			// );
			if (this.openDrawLine) {
			return "openDrawLine";
			} else if (this.openDrawPoint) {
			return "openDrawPoint";
			} else {
			return "notBut---";
			}
			}
			},
			// watch: {
			// openDrawChiose() {
			// console.log(this.openDrawChiose, "openDrawChiose");
			// },
			// },
			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"
			// })
			// });
			// let mapLayer = 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", // 行政区划
			// }),
			// });
			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" // 行政区划
			})
			})
			],

			// 注意地图控件的写法
			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();
			this.source = new VectorSource({ wrapX: false });
			// 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.setCenter([115.9032747077233, 28.67433116990186]);

			//
			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: {
			move(val) {
			this.view.setCenter([val[0].lng, val[0].lat]);
			},
			closeDraw() {
			ol2d.removeLayer(this.layermian);
			this.layermian = null;
			this.layermian = new VectorLayer({
			//重置
			//面实例
			zIndex: 22,
			source: new VectorSource()
			});
			if (this.draw) {
			// console.log(this.ourLayer, 1111);
			// this.ourLayer.source.clear();
			// this.source.clear();
			ol2d.removeInteraction(this.draw);
			this.polygon = [];
			this.tipTitle = null;
			this.showTip = false;
			this.draw = null;
			this.$store.commit("setpolygon", []); //用vuex传最终数据
			}
			},
			// 开始绘制多边形
			drawStart() {
			let that = this;
			this.polygon = [];
			this.closeDraw();
			// if (this.isDraw) {
			// this.isDraw = false;
			// this.draw = new Draw({
			// source: this.source,
			// type: this.typeSelected
			// });
			// this.map.addInteraction(this.draw);
			// this.draw.on("drawend", function(evt) {
			// that.drawingEnd(evt);
			// });
			// } else {
			// this.source.clear();
			// this.map.removeInteraction(this.draw);
			// this.isDraw = true;
			// this.polygon = [];
			// this.polygonPersons = [];
			// }
			this.tipTitle = "单击左键或右键开始绘画";
			$("#map") //提示器
			.off("mousemove")
			.mousemove(function(e) {
			if (!that.showTip) {
			that.showTip = true;
			}
			that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
			});
			this.draw = new Draw({
			source: this.source,
			type: this.typeSelected,
			// isPoint: true,
			coordinate: function(res) {
			// console.log(res, 1);
			that.tipTitle = "可继续，或选择最终位置双击结束";
			},
			coordinateOverPoint: function(res) {
			// console.log(res, 2);
			// if (isHaveOne) {
			// return;
			// }
			// that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
			// that.addIconMarker(res.coordinate);
			// isHaveOne = true;
			},
			coordinateOver: function(res) {
			// console.log(res, 5);
			// 结束绘画处理数据
			that.tipTitle = null;
			that.showTip = false;
			// let d = that.doData(that.coordinates);
			// that.addLinesDraw(d);
			}
			});
			ol2d.addInteraction(this.draw);
			this.draw.on("drawend", function(evt) {
			// console.log(evt, 3);
			that.drawingEnd(evt);
			});
			},

			// 构建多边形结束
			drawingEnd(evt) {
			let that = this;
			const geo = evt.feature.getGeometry();
			const t = geo.getType();
			if (t === "Polygon") {
			// 获取坐标点
			const points = geo.getCoordinates();
			points[0].map(item => {
			that.polygon.push({ lng: item[0], lat: item[1] });
			});
			// console.log(that.polygon, 1111);
			that.$store.commit("setpolygon", that.polygon); //用vuex传最终数据
			//重新画面
			that.addLines(that.polygon, "mian");
			// for (let i = 0; i < this.persons.length; i++) {
			// let boxFlag = this.isRegion(
			// this.persons[i].x,
			// this.persons[i].y,
			// this.polygon
			// );
			// }
			// this.$message({
			// type: "success",
			// message: `区域内有${this.polygonPersons.length}人`
			// });
			// console.warn(
			// this.polygonPersons,
			// `区域内有${this.polygonPersons.length}人`
			// );
			// debugger;
			ol2d.removeInteraction(this.draw);
			}
			},
			clearUseMapData() {
			if (this.openDrawPoint) {
			this.$store.commit("setPointData", ""); //用vuex清空最终数据
			} else if (this.openDrawLine) {
			this.$store.commit("setRotesData", ""); //用vuex清空最终数据
			}
			this.useMapData();
			},
			onceOnlodad(ourDatas) {
			this.ourDatas = ourDatas;
			console.log(ourDatas);
			},
			//old
			//加载底层路线和图标
			Renders(ourDatas) {
			// for (let i in ourDatas) {
			// console.log(ourDatas[i].value, "------", i);
			// }
			this.deleteElement();
			for (let k in ourDatas) {
			if (ourDatas[k].isLine) {
			if (!ourDatas[k].value) {
			// this.deleteElement("line", ourDatas[k].id);
			} else {
			this.addLines(ourDatas[k], "line");
			}
			} else {
			if (!ourDatas[k].value) {
			// this.deleteElement("point", ourDatas[k].id);
			} else {
			this.addPoint(ourDatas[k], "point");
			}
			}
			}
			this.drawLayerRoom(); //重置绘画层
			},
			// 若没有value数据，删除地图上的元素
			deleteElement(name, id) {
			// console.log(name, id);
			// this.ourLayer[name + id].getSource().clear();
			for (let k in this.ourLayer) {
			this.ourLayer[k].getSource().clear();
			}
			},
			//加载点
			addPoint(data, name) {
			//创建图层
			let layer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource()
			}),
			iconFeature = new OlFeature({
			geometry: new OlGeomPoint(data.value) //绘制图形（点）
			}),
			iconFeatureTitle = new OlFeature({
			geometry: new OlGeomPoint(data.value) //绘制图形（点）
			}),
			that = this;
			iconFeature.setStyle(
			new OlStyleStyle({
			image: new OlStyleIcon({
			scale: 0.5,
			offset: [0, 5],
			offsetOrigin: "bottom",
			src: "img/dingwei/dingwei5.png"
			})
			})
			);
			iconFeatureTitle.setStyle(
			new OlStyleStyle({
			text: new OlStyleText({
			text: data.name,
			font: "14px sans-serif", // CSS 字体设置
			scale: 1, //比例
			offsetY: -40,
			fill: new OlStyleFill({
			color: "#1296DB"
			})
			})
			})
			);
			layer.getSource().addFeature(iconFeature);
			layer.getSource().addFeature(iconFeatureTitle);
			//保存图层
			this.ourLayer[name + data.id] = layer;
			ol2d.addLayer(that.ourLayer[name + data.id]);
			// console.log(this.ourLayer, 77777);
			},
			addLines(data, name, notdo = false) {
			//创建图层
			//绘画线路
			// var entityData = "";
			var entityArr = [];
			// entityData = data.value.match(/\(([^)]*)\)/);
			// 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])
			// ]);
			// }
			// }
			if (notdo) {
			entityArr = data;
			console.log(entityArr, "notdo");
			} else {
			for (let kd in data) {
			entityArr.push([Number(data[kd].lng), Number(data[kd].lat)]);
			}
			}
			// console.log(entityArr);
			var lineCoords = entityArr; // 线里点的集合
			// console.log(lineCoords);
			var feature_LineString = new Feature({
			//线面板
			geometry: new LineString(lineCoords)
			});
			feature_LineString.setStyle(
			//线样式
			new Style({
			//填充色
			fill: new Fill({
			color: "rgba(255, 255, 255, 1)"
			}),
			//边线颜色
			stroke: new Stroke({
			color: "rgb(18,150,219)",
			width: 4
			})
			})
			);
			//线名称
			// let lineFeatureTitle = new OlFeature({
			// geometry: new OlGeomPoint(lineCoords[0]) //绘制图形（点）
			// });
			// lineFeatureTitle.setStyle(
			// new OlStyleStyle({
			// text: new OlStyleText({
			// text: data.name,
			// font: "14px sans-serif", // CSS 字体设置
			// scale: 1, //比例
			// offsetY: -10,
			// fill: new OlStyleFill({
			// color: "#1296DB"
			// })
			// })
			// })
			// );
			// layer.getSource().addFeature(lineFeatureTitle);
			this.layermian.getSource().addFeature(feature_LineString);

			//面
			//解析面数据
			let mianData = [lineCoords];
			// console.log(mianData);
			// return;
			var feature_Polygon = new Feature({
			//面面板
			geometry: new Polygon(mianData)
			});
			feature_Polygon.setStyle(
			new Style({
			//填充色
			fill: new Fill({
			color: "rgba(255, 255, 255, .7)" //填充颜色，不透明度0
			}),
			//边线颜色
			stroke: new Stroke({
			// color: "rgb(18,150,219)", //面的边界线颜色
			color: "rgba(255, 255, 255, .5)", //面的边界线颜色
			width: 10 //边界线宽
			})
			})
			);
			this.layermian.getSource().addFeature(feature_Polygon);
			//保存图层
			ol2d.addLayer(this.layermian);
			// console.log(this.ourLayer, 88888);
			},

			//上面是初始化·················

			//下面是选择点或线路开始按钮
			init(val, num, value) {
			this.openTitle = val;
			if (value) {
			this.notNow = false;
			} else {
			this.notNow = true;
			}
			this.nowIndex = num;
			if (val.indexOf("路径") != -1) {
			// console.log("加载路径按钮");
			this.controlBut("openDrawLine", this.notNow);
			} else {
			// console.log("加载标点按钮");
			this.controlBut("openDrawPoint", this.notNow);
			}
			},
			controlBut(openName, notNow) {
			this.closeOurBut();
			this[openName] = true;
			$("#" + openName).show();
			$("#openTitle").show();
			if (!notNow) {
			$("#dataConfirm").show(100);
			}
			},
			closeOurBut(open) {
			$("#dataConfirm").hide();
			$("#openDrawPoint").hide();
			$("#openDrawLine").hide();
			$("#openTitle").hide();
			this.openDrawLine = false;
			this.openDrawPoint = false;
			if (open) {
			this.openTitle = "";
			this.$parent.closeOpenedMap(); //开放按钮
			}
			},
			//取消按钮
			stopDrawOur() {
			this.closeOurBut(true);
			},
			//确认数据
			useMapData() {
			//返回用数据
			// 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";
			}
			this.$parent.backMapDataOurData(val, this.nowIndex);
			// 返回后关闭操作按钮
			this.closeOurBut();
			//清除绘画图层
			this.drawLayerRoom();
			},
			//提示位置
			setTipPosition(x, y, n, m) {
			this.position.w = x + n;
			this.position.h = y + m;
			},
			//实时添加最上图层，为了编辑或新建路径能在最上
			drawLayerRoom() {
			let that = this;
			//添加绘画图层--为了在最上层--所以每次绘画要重新添加图层
			if (that.peopleLineAddlayer) {
			that.peopleLineAddlayer.getSource().clear();
			that.peopleLineAddlayer = null;
			that.peopleLineAddlayer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource()
			});
			} else {
			that.peopleLineAddlayer = new VectorLayer({
			zIndex: 22,
			source: new VectorSource()
			});
			}
			ol2d.addLayer(this.peopleLineAddlayer);
			},

			//选择绘画路线------↓
			getTypeSelected() {
			let that = this;
			this.beginDraw = true;
			this.draw && ol2d.removeInteraction(this.draw);
			//再根据typeSelect的值绘制新的Interaction
			this.drawLayerRoom(); //重置绘画层
			this.addInteraction();
			},
			addInteraction() {
			let value = this.typeSelected,
			that = this;
			this.tipTitle = "单击左键或右键开始绘画";
			$("#map") //提示器
			.off("mousemove")
			.mousemove(function(e) {
			if (!that.showTip) {
			that.showTip = true;
			}
			that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
			});
			this.coordinates = [];
			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 = "可继续，或选择最终位置双击结束";
			},
			coordinateOver: function(res) {
			// 结束绘画处理数据
			let d = that.doData(that.coordinates);
			that.addLinesDraw(d);
			that.$store.commit("setRotesData", d); //用vuex传最终数据
			}
			});
			ol2d.addInteraction(this.draw);
			}
			},
			//处理数据
			doData(val) {
			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;
			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 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: "red",
			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;
			}
			},
			//绘画路线------↑
			//绘画点-------↓
			getTypeSelectedPoint() {
			this.tipTitle = "单击左键选择位置";
			let that = this;
			let isHaveOne = false;
			this.drawLayerRoom(); //重置绘画层
			$("#map")
			.off("mousemove")
			.mousemove(function(e) {
			if (!that.showTip) {
			that.showTip = true;
			}
			that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
			});

			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传最终数据
			that.addIconMarker(res.coordinate);
			isHaveOne = true;
			}
			});
			ol2d.addInteraction(this.draw);
			}
			},
			addIconMarker(intlat) {
			let that = this;
			let iconFeature = new OlFeature({
			geometry: new OlGeomPoint(intlat) //绘制图形（点）
			});
			iconFeature.setStyle(
			new OlStyleStyle({
			image: new OlStyleIcon({
			scale: 0.5,
			offset: [0, 5],
			offsetOrigin: "bottom",
			//透明度
			opacity: 1,
			//图片路径
			src: "img/dingwei/dingwei6.png"
			})
			})
			);
			that.peopleLineAddlayer.getSource().addFeature(iconFeature);
			this.butTitlePoint = "重新标点";
			if (!this.fromView) {
			$("#dataConfirm").show(100);
			}
			if (this.draw != null) {
			this.draw.controlDrawing(true);
			$("#map").unbind("mousemove");
			this.tipTitle = "";
			this.showTip = false;
			}
			}
			//绘制点------↑
			}
			};
			</script>

			<style scoped lang="scss">
			#map {
			position: relative;
			width: 100%;
			height: 100%;
			// .controlMap {

			// }
			#dataConfirm {
			position: absolute;
			top: 43px;
			// left: calc(50% + 82px);
			left: 564px;
			z-index: 3 !important;
			}
			}
			</style>

New file
			@@ -0,0 +1,596 @@
			<!--
			* @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: 100%">
			<div class="controlMap">
			<el-button-group>
			<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>
			</div>
			<tip v-show="showTip" :title="tipTitle" :position="position"></tip>
			</div>
			</template>
			<script>
			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 "ol/ol.css";
			import { Map, View, Feature } from "ol";
			import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
			import { ImageStatic, Vector as VectorSource } from "ol/source";
			import { getCenter } from "ol/extent";
			import { Projection } from "ol/proj";
			import Draw from "ol/interaction/Draw";
			import { Point } from "ol/geom";
			import { Icon, Style, Text, Fill, Stroke } from "ol/style";


			import { Vector } from "ol/source";
			// import Draw from "./Draw";
			import LineString from "ol/geom/LineString.js";
			import img from "@/assets/img/car.png";

			export default {
			name: "Map",
			components: {
			tip,
			},
			data() {
			return {
			peopleLineAddlayer: new VectorLayer({
			// 图标图层
			zIndex: 22,
			source: new VectorSource(),
			}),
			//多边形Layer
			polygonlayer: new VectorLayer({
			// 图标图层
			zIndex: 22,
			source: new VectorSource(),
			}),
			vectorSource: new VectorSource(),
			features: [],
			feature: null,
			// 存储新增点，线，面，数据的地方
			persons: [],
			polygon: [],
			polygonPersons: [],
			// polygonData: [],
			// polygonFlag: false,
			// editToolbar: null,
			// addPolygonEntitys: null,

			typeSelected: "Polygon",
			drawLayer: null,
			draw: null,
			drawSource:null,
			coordinates: [],
			coordinatesStr: "",
			beginDraw: false,
			butTitle: "开始绘画",
			view: "",
			isDraw: true, // 是否绘制
			showTip: false,
			tipTitle: "",
			position: {
			w: 200,
			h: 10,
			},
			};
			},

			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", // 行政区划
			}),
			}),
			],

			// 注意地图控件的写法
			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();

			// view.setCenter([115.85883507433789, 28.708432053474827])
			view.setCenter([115.9032747077233, 28.67433116990186]);

			//设置放大层级
			view.setZoom(13);
			this.view = view;

			// const drawSource = new VectorSource();

			// const drawLayer = new VectorLayer({

			// source: drawSource

			// });

			// this.drawSource = drawSource;

			// ol2d.addLayer(drawLayer);

			ol2d.addLayer(this.peopleLineAddlayer);
			ol2d.addLayer(this.polygonlayer);

			//监听鼠标位置
			var that = this;
			//
			that.addNewLine();
			var obj = {
			fenceId: '12',
			name: '围栏3',
			center: '',
			radius: '',
			type: 'polyline',
			points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'
			}
			this.showFence(obj);
			},
			watch: {
			persons(val) {
			if (val) {
			this.setFeature();
			}
			},
			},
			methods: {
			goTudefault(x, y) {
			this.view.setCenter([x, y]);
			this.view.setZoom(14.5);
			},
			// 点
			setFeature() {
			let that = this;
			that.features = [];
			that.vectorSource.clear();
			that.persons.map((item) => {
			that.feature = new Feature({
			geometry: new Point([item.x, item.y]),
			name: item.name,
			});
			// 设置Feature的样式，使用小旗子图标
			that.feature.setStyle(
			new Style({
			image: new Icon({
			anchor: [0, 1],
			src: img,
			}),
			text: new Text({
			// 位置
			textAlign: "center",
			// 基准线
			textBaseline: "middle",
			// 文字样式
			font: "normal 20px 微软雅黑",
			// 文本内容
			text: item.name,
			// 文本填充样式（即文字颜色）
			fill: new Fill({ color: "#aa3300" }),
			stroke: new Stroke({ color: "#ffcc33", width: 2 }),
			}),
			})
			);
			that.features.push(that.feature);
			});
			that.vectorSource.addFeatures(that.features);
			},
			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({
			image: new Icon({
			scale: scale,
			opacity: 1,
			src: icon,
			// src: require('../../assets/Mark.png')
			}),
			});

			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;

			// 添加一个绘制的线使用的layer
			this.drawLayer = new VectorLayer({
			//layer所对应的source
			source: new Vector(),
			});
			//把layer加入到地图中
			this.map.addLayer(this.drawLayer);
			},
			//转换坐标点（多）
			transPoints(points) {
			let arr = points.split(';');
			let point = [];
			arr.forEach(item => {
			let newPoint = item.split(',');
			point.push(newPoint)
			})
			let _points = point.map(item => {
			item = [parseFloat(item[0]), parseFloat(item[1])];
			item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
			return item;
			})
			return _points;
			},
			//回显围栏
			showFence(obj) {
			let {
			fenceId,
			name,
			type,
			center,
			radius,
			points
			} = obj;
			if (type == 'polygon') {
			this.showPolygon(fenceId, points, name)
			}
			},
			/**
			*
			* @param {*} fenceId 围栏id
			* @param {*} points 多边形坐标点
			* @param {*} name 围栏名
			*/
			showPolygon(fenceId, points, name) {
			let _points = this.transPoints(points)
			_points = [_points]
			//多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号
			var polygonFeature = new ol.Feature({ //路线
			geometry: new ol.geom.Polygon(_points)

			});
			debugger;
			polygonFeature.setId(fenceId)
			this.source.addFeature(polygonFeature);
			console.log(this.source.getFeatures())
			},
			//开始绘制
			getTypeSelected() {
			this.beginDraw = true;
			this.draw && this.map.removeInteraction(this.draw);
			this.peopleLineAddlayer.getSource().clear();
			this.polygonlayer.getSource().clear();
			//再根据typeSelect的值绘制新的Interaction
			// this.addInteraction();
			this.drawStart();
			},
			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);
			// });

			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);
			that.tipTitle = "可继续，或选择最终位置双击结束";
			},
			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);
			}
			},
			// 开始绘制多边形
			drawStart(type) {
			type = 'Polygon';
			let that = this;
			var draw;
			if (this.isDraw) {
			this.isDraw = false;
			draw = new Draw({
			source: this.source,
			type: type,
			});
			this.map.addInteraction(this.draw);
			draw.on("drawend", function (evt) {
			that.drawingEnd(evt);
			});
			} else {
			this.source.clear();
			this.map.removeInteraction(this.draw);
			this.isDraw = true;
			this.polygon = [];
			this.polygonPersons = [];
			}
			},

			// 构建多边形结束
			drawingEnd(evt) {
			let that = this;
			const geo = evt.feature.getGeometry();
			const t = geo.getType();
			if (t === "Polygon") {
			// 获取坐标点
			const points = geo.getCoordinates();
			points[0].map((item) => {
			that.polygon.push({ lng: item[0], lat: item[1] });
			});
			for (let i = 0; i < this.persons.length; i++) {
			this.polygonPersons.push(this.persons[i]);
			}
			this.isDraw = false;
			}
			},
			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 += ")";
			// console.log(str, 111);
			return str;
			},
			addLinesDraw(val) {
			var that = this;
			that.peopleLineAddlayer.getSource().clear();
			that.polygonlayer.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.polygonlayer.getSource().addFeature(feature_LineString);
			if (that.draw != null) {
			that.beginDraw = false;
			that.butTitle = "重新绘画";
			that.draw.abortDrawing_();
			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% - 80px);
			z-index: 2 !important;
			}
			}
			</style>

			@@ -8,34 +8,42 @@
			import axios from 'axios';
			import store from '@/store/';
			import router from '@/router/router';
			import { serialize } from '@/util/util';
			import { getToken } from '@/util/auth';
			import {
			serialize
			} from '@/util/util';
			import {
			getToken
			} from '@/util/auth';
			// import { Message } from 'element-ui';
			import { MessageBox } from 'element-ui';
			import {
			MessageBox
			} from 'element-ui';
			import website from '@/config/website';
			import { Base64 } from 'js-base64';
			import {
			Base64
			} from 'js-base64';
			import NProgress from 'nprogress';
			import 'nprogress/nprogress.css';

			//默认超时时间
			axios.defaults.timeout = 60000;
			//返回其他状态码
			axios.defaults.validateStatus = function(status) {
			return status >= 200 && status <= 500;
			axios.defaults.validateStatus = function (status) {
			return status >= 200 && status <= 500;
			};
			//跨域请求，允许保存cookie
			axios.defaults.withCredentials = true;
			// NProgress 配置
			NProgress.configure({
			showSpinner: false
			showSpinner: false
			});
			//http request拦截
			axios.interceptors.request.use(config => {
			//开启 progress bar
			NProgress.start();
			const meta = (config.meta \|\| {});
			const isToken = meta.isToken === false;
			config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
			//开启 progress bar
			NProgress.start();
			const meta = (config.meta \|\| {});
			const isToken = meta.isToken === false;
			config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
			//让每个请求携带token
			if (getToken() && !isToken) {
			config.headers[website.tokenHeader] = 'bearer ' + getToken()
			@@ -63,7 +71,9 @@
			//如果在白名单里则自行catch逻辑处理
			if (statusWhiteList.includes(status)) return Promise.reject(res);
			//如果是401则跳转到登录页面
			if (status === 401) store.dispatch('FedLogOut').then(() => router.push({path: '/login'}));
			if (status === 401) store.dispatch('FedLogOut').then(() => router.push({
			path: '/login'
			}));
			// 如果请求为非200否者默认统一处理
			if (status !== 200 & status !== 201) {
			// Message({
			@@ -80,4 +90,4 @@
			return Promise.reject(new Error(error));
			});

			export default axios;
			export default axios;

			@@ -33,6 +33,9 @@
			windowHeight: state => state.control.windowHeight,
			table_height: state => state.control.table_height,
			screenSize: state => state.control.screenSize,
			screenHeight: state => state.control.screenHeight
			screenHeight: state => state.control.screenHeight,
			//面
			polygons: state => state.control.polygons,

			};
			export default getters;

			@@ -44,7 +44,9 @@
			searchIndex: 6, //收缩展示数量
			searchIcon: true, //搜索是否收缩
			height: window.screen.height //初始高度
			}
			},
			//面的集和点
			polygons: [],
			},
			actions: {
			WHchangeHight({
			@@ -246,6 +248,9 @@
			}
			},
			mutations: {
			setpolygon: (state, data) => {
			state.polygons = data;
			},
			setWindowSize: (state, data) => {
			state.windowWidth = data.innerWidth;
			state.windowHeight = data.innerHeight;

New file
			@@ -0,0 +1,543 @@
			<template>
			<div class="getMapData" :key="Refresh">
			<MapInThere ref="getMapDataRefs" />
			<div class="notDatas" v-show="isCheck">
			<div style="color:red">*</div>
			未绘画区域
			</div>
			<div class="controlMapWindowTitle">
			<el-button-group>
			<el-button type="primary" icon="el-icon-finished" @click="drawFace"
			>绘画区域</el-button
			>
			<el-button type="danger" @click="giveUp" icon="el-icon-close"
			>取消</el-button
			>
			</el-button-group>
			</div>
			<!-- <div class="controlMapWindow">
			<div class="controlMapWindowTitle">
			<el-button-group>
			<el-button
			type="primary"
			icon="el-icon-finished"
			@click="openDrawLineMethod"
			:disabled="fromView"
			>新增路线</el-button
			>
			<el-button
			type="primary"
			@click="openDrawPointMethod"
			icon="el-icon-coordinate"
			:disabled="fromView"
			>新增标点</el-button
			>
			</el-button-group>
			</div>
			<div class="controlMapWindowmain">
			<transition-group
			:name="animateName"
			:enter-active-class="animateEnter"
			:leave-active-class="animateLeave"
			>
			<div
			class="getMapData__once"
			v-for="(item, index) in ourDatas"
			:key="index"
			>
			<div class="getMapData_once_label">
			<el-tag> {{ item.label }}</el-tag>
			</div>
			<el-input
			:class="[
			'getMapData_once_name',
			item.notPath == 2 ? 'notPath' : '',
			]"
			@blur="myRules(index)"
			v-model="item.name"
			placeholder="请输入路径名称"
			:disabled="fromView"
			></el-input>
			<transition
			:name="animateNames"
			:enter-active-class="animateEnters"
			:leave-active-class="animateLeaves"
			>
			<div class="notPathTitile" v-show="item.notPath == 2">
			请输入名称或选择路径
			</div>
			</transition>
			<el-button
			class="getMapData_once_get"
			:type="item.value ? 'success' : 'primary'"
			:title="item.value ? '重新选择' : '点击选择'"
			:icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
			@click="openMap(item.label, index, item.value)"
			:disabled="MapDataShow \|\| fromView"
			></el-button>
			<el-button
			class="getMapData_once_endBut"
			icon="el-icon-delete"
			circle
			@click="deleteRowOurs(index)"
			:disabled="MapDataShow \|\| fromView"
			></el-button>
			</div>
			</transition-group>
			</div>
			</div> -->
			</div>
			</template>

			<script>
			import { mapGetters } from "vuex";
			import MapInThere from "@/components/map/mainInThere.vue";
			export default {
			name: "getMapData",
			components: {
			MapInThere
			},
			computed: {
			...mapGetters(["rotesData", "pointData", "polygons"])
			},
			watch: {
			ourDatas: {
			handler(val) {
			// console.log("深度监听：", val);
			this.checkDom("getMapDataRefs", dom => {
			dom.onceOnlodad(val);
			});
			},
			deep: true
			},
			polygons() {
			console.log(this.polygons);
			if (this.polygons.length > 0) {
			this.isCheck = false;
			}
			}
			},
			data() {
			return {
			Refresh: false,
			// routers: [
			// {
			// label: "路径1",
			// value: "",
			// routerName: "",
			// notPath: true,
			// },
			// ],
			// potions: [
			// {
			// label: "标点1",
			// value: "",
			// potionName: "",
			// notPath: true,
			// },
			// ],
			//动画效果
			animateName: "custom-classes-transition",
			animateEnter: "animated fadeIn",
			animateLeave: "animated fadeOut",
			//未输入动画效果
			animateName: "custom-classes-transition",
			animateEnter: "animated fadeInDown",
			animateLeave: "animated fadeOut",
			openTitle: "路径1",
			MapDataShow: false,
			fromView: false,
			ourDatas: [
			// {
			// label: "路径2",
			// value:
			// "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
			// name: "xxx2",
			// notPath: false,
			// isLine: true,
			// id: 2,
			// },
			// {
			// label: "路径3",
			// value:
			// "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
			// name: "xxx3",
			// notPath: false,
			// isLine: true,
			// id: 3,
			// },
			// {
			// label: "标点4",
			// value: [114.03887343706977, 27.63000553765213],
			// name: "喜迎校庆选点1",
			// notPath: false,
			// isLine: false,
			// id: 4,
			// },
			],
			nowId: 0,
			isCheck: false
			};
			},
			mounted() {
			// this.$emit("setMapData", [this.routers, this.potions]);
			// let that = this;
			// if (that.ourDatas.length != 0) {
			// for (let k in that.ourDatas) {
			// that.ourDatas[k].id = +k + 1;
			// }
			// }
			// this.checkDom("getMapDataRefs", dom => {
			// dom.addLines(that.polygons);
			// });
			// this.nowId = +this.ourDatas.length + 1;
			if (this.polygons.length > 0) {
			this.doThat(this.polygons);
			}
			},
			methods: {
			doThat(val) {
			this.checkDom("getMapDataRefs", dom => {
			dom.addLines(val);
			// 移动位置
			dom.move(val);
			});
			},
			drawFace() {
			// console.log(this.$refs.getMapDataRefs);
			this.$refs.getMapDataRefs.drawStart();
			},
			giveUp() {
			// console.log(234);
			this.$refs.getMapDataRefs.closeDraw();
			},
			openDrawLineMethod() {
			let id = this.nowId++;
			this.ourDatas.push({
			label: "路径" + +id,
			value: "",
			name: "",
			notPath: false,
			isLine: true,
			id: +id
			});
			},
			openDrawPointMethod() {
			let id = this.nowId++;
			this.ourDatas.push({
			label: "标点" + +id,
			value: "",
			name: "",
			notPath: false,
			isLine: false,
			id: +id
			});
			},
			deleteRowOurs(index) {
			this.ourDatas.splice(index, 1);
			},
			backMapDataOurData(val, index) {
			if (val == "line") {
			this.ourDatas[index].value = this.rotesData;
			} else if (val == "point") {
			this.ourDatas[index].value = this.pointData;
			} else if (val == "notData") {
			this.ourDatas[index].value = "";
			}
			//单个验证
			this.myRules(index);
			},
			//以上是添加数据集方法
			//选择map数据
			openMap(val, num, value) {
			this.MapDataShow = true;
			this.openTitle = val;
			this.$refs.getMapDataRefs.init(val, num, value);
			},
			closeOpenedMap() {
			this.MapDataShow = false;
			// this.openTitle = "";
			},
			//下面是旧代码
			editInit(val) {
			//查看情况逆转String成为当页可使用数据,并做动作
			this.reverseMapData(val);
			},
			viewInit(val) {
			//查看情况逆转String成为当页可使用数据,并做动作
			this.reverseMapData(val);
			this.fromView = true; //查看数据不可改
			},
			reverseMapData(val, label) {
			//解释数据
			let rname = val[0][0].split(";"),
			r = val[0][1].split(";"),
			pname = val[1][0].split(";"),
			p = val[1][1].split(";");
			this.ourDatas = [];
			for (let k in r) {
			this.ourDatas.push({
			label: "路径" + (+k + 1),
			value: r[k],
			name: rname[k],
			notPath: false,
			isLine: true,
			id: this.ourDatas.length
			});
			}
			for (let k in p) {
			let potion = p[k].split(",");
			this.ourDatas.push({
			label: "标点" + (+k + 1),
			value: [+potion[0], +potion[1]],
			name: pname[k],
			notPath: false,
			isLine: false,
			id: this.ourDatas.length
			});
			}
			this.nowId = +this.ourDatas.length + 1;
			},
			myRules(index) {
			//单个验证
			if (this.ourDatas[index].name && this.ourDatas[index].value) {
			this.ourDatas[index].notPath = false;
			} else {
			this.ourDatas[index].notPath = 2;
			}
			},
			//自定义验证
			myRulesUse() {
			//把一个数组拆开两个来对应之前的数据
			let ourData = this.ourDatas;
			let lineBefor = [];
			let pointBefor = [];
			for (let o in ourData) {
			if (ourData[o].isLine) {
			lineBefor.push(ourData[o]);
			} else {
			pointBefor.push(ourData[o]);
			}
			}
			let line = this.changeMapData(lineBefor, "name");
			let point = this.changeMapData(pointBefor, "name");
			// console.log(line, point);
			if (line[0] == "namenot" \|\| point[0] == "namenot") {
			//需要显示验证失败合集
			let errorId = [];
			if (line[0] == "namenot") {
			errorId.push(...line[1]);
			}
			if (point[0] == "namenot") {
			errorId.push(...point[1]);
			}
			// console.log(errorId, "errorId");
			for (let x in this.ourDatas) {
			// console.log(this.ourDatas[x], "x");
			let flog = true;
			for (let k in errorId) {
			if (errorId[k] == this.ourDatas[x].id) {
			flog = false;
			}
			}
			if (flog) {
			this.ourDatas[x].notPath = false;
			} else {
			this.ourDatas[x].notPath = 2;
			}
			}
			return false;
			} else {
			// console.log("通过");
			for (let i in this.ourDatas) {
			this.ourDatas[i].notPath = false;
			}
			return [line, point];
			}
			},
			//规则
			changeMapData(item, names) {
			let name = "",
			value = "",
			notData = [];
			let itemLength = item.length - 1;
			// console.log(item, names, 7777);
			for (let k in item) {
			let inItem = item[k];
			for (let kin in inItem) {
			if (
			inItem[kin] == "" &&
			kin != "notPath" &&
			kin != "isLine" &&
			kin != "id"
			) {
			// console.log(kin);
			notData.push(inItem.id);
			break;
			}
			if (kin == names) {
			name += inItem[kin];
			if (k != itemLength) {
			name += ";";
			}
			}
			if (kin == "value") {
			value += inItem[kin];
			if (k != itemLength) {
			value += ";";
			}
			}
			}
			}
			return notData.length > 0 ? [names + "not", notData] : [name, value];
			},
			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;
			}
			.getMapData {
			width: 100%;
			height: 100%;
			position: relative;
			.controlMapWindowTitle {
			position: absolute;
			left: calc(50% - 42px);
			top: 0;
			}
			// .controlMapWindow {
			// width: 320px;
			// height: calc(100% - 20px);
			// // border: 1px solid red;
			// // box-shadow: 2px 0 15px 2px #acacac;
			// position: absolute;
			// left: 10px;
			// top: 10px;
			// background-color: #fff;
			// border-radius: 0 15px 15px 0;
			// padding: 10px 10px;
			// overflow: hidden;
			// // .controlMapWindowTitle {
			// // height: 40px;
			// // width: 100%;
			// // margin-bottom: 5px;
			// // @extend .flexCenter;
			// // }
			// .controlMapWindowmain {
			// width: 100%;
			// height: calc(100% - 45px);
			// overflow-x: hidden;
			// overflow-y: scroll;
			// .getMapData_left {
			// width: 50%;
			// height: 40px;
			// box-sizing: border-box;
			// }
			// .getMapData_right {
			// width: 50%;
			// height: 40px;
			// box-sizing: border-box;
			// }
			// .getMapData__once {
			// width: 100%;
			// height: 40px;
			// margin-bottom: 10px;
			// position: relative;
			// @extend .flexCenter;
			// flex-direction: row;
			// .getMapData_once_label {
			// padding-left: 15px;
			// width: 90px;
			// height: 100%;
			// @extend .flexCenter;
			// justify-content: space-around;
			// }
			// .getMapData_once_name {
			// width: calc(100% - 130px);
			// }
			// .getMapData_once_get {
			// padding: 6px 16px;
			// font-size: 20px;
			// }
			// .notPathTitile {
			// position: absolute;
			// left: 90px;
			// bottom: -20px;
			// color: red;
			// font-size: 1px;
			// }
			// }
			// }
			// }
			// 验证
			.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;
			}

			.notDatas {
			width: auto;
			height: auto;
			position: absolute;
			top: 5px;
			left: 100px;
			background-color: #fff;
			border-radius: 5px;
			padding: 2px 8px;
			div {
			display: inline;
			}
			}
			</style>

			@@ -3,11 +3,12 @@
			:class="[
			'securityUnit',
			$store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
			$store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
			$store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
			]"
			>
			<avue-crud
			class="tablesss"
			:before-open="beforeOpen"
			:option="option"
			:data="data"
			:page.sync="page"
			@@ -35,31 +36,41 @@
			>删除
			</el-button>
			</template>
			<template slot-scope="{ type, row }" slot="menu">
			<template slot-scope="{ type, row, index }" slot="menu">
			<el-button
			:type="type"
			size="small"
			icon="el-icon-folder-checked"
			:disabled="row.applyStatus == 4"
			@click="handleAudit(row)"
			@click="handleAudit(row, index)"
			>查看围栏
			</el-button>
			</template>
			<!-- 地图插入 -->
			<template slot-scope="{ type, disabled }" slot="lineForm">
			<div class="mapClassMain" style="width: 1000px; height: 400px">
			<!-- <div class="mapClassMain" style="width: 1000px; height: 400px">
			<Map ref="modalForm" />
			</div>
			</div> -->
			<getMapDataInThere
			ref="getMapData"
			id="getMapData"
			@setMapData="setMapData"
			></getMapDataInThere>
			</template>
			</avue-crud>

			</basic-container>
			</template>

			<script>
			import { getList, add, update, remove, getRailTree } from "@/api/rail/rail";
			import getMapDataInThere from "./getMapDataInThere.vue";

			import { mapGetters } from "vuex";
			export default {
			components: {
			// Map,
			getMapDataInThere
			},
			data() {
			return {
			loading: true,
			@@ -68,7 +79,7 @@
			pageSize: 10,
			currentPage: 1,
			total: 0,
			...this.$store.state.control.changePageSize,
			...this.$store.state.control.changePageSize
			},
			form: {},
			query: {},
			@@ -101,10 +112,10 @@
			{
			required: true,
			message: "请输入围栏名称",
			trigger: "click",
			},
			trigger: "click"
			}
			],
			overHidden: true,
			overHidden: true
			},
			{
			label: "类型",
			@@ -117,39 +128,39 @@
			dicData: [
			{
			label: "本单位",
			value: 1,
			value: 1
			},
			{
			label: "分公司",
			value: 2,
			value: 2
			},
			{
			label: "服务单位",
			value: 3,
			},
			value: 3
			}
			],
			rules: [
			{
			required: true,
			message: "请选择类型",
			trigger: "blur",
			},
			],
			trigger: "blur"
			}
			]
			},
			{
			label: "企业名称",
			prop: "companyName",
			display:false,
			display: false,
			minWidth: 160,
			span: 24,
			rules: [
			{
			required: true,
			message: "请输入企业名称",
			trigger: "click",
			},
			trigger: "click"
			}
			],
			overHidden: true,
			overHidden: true
			},
			{
			label: "企业名称",
			@@ -157,21 +168,19 @@
			span: 12,
			labelWidth: 145,
			type: "tree",
			hide:true,
			hide: true,
			props: {
			label: "title",
			value: "id",
			value: "id"
			},
			rules: [
			{
			required: true,
			message: "请输入企业名称",
			trigger: "blur",
			},
			trigger: "blur"
			}
			],
			dicData: [

			]
			dicData: []
			},
			{
			label: "创建日期",
			@@ -180,14 +189,14 @@
			type: "date",
			format: "yyyy-MM-dd HH:mm:ss",
			valueFormat: "yyyy-MM-dd HH:mm:ss",
			display:false,
			display: false,
			rules: [
			{
			required: true,
			message: "请选择创建日期",
			trigger: "blur",
			},
			],
			trigger: "blur"
			}
			]
			},
			{
			label: "路线展示",
			@@ -198,65 +207,125 @@
			display: true,
			span: 24,
			formslot: true,
			addDisplay: true,
			},
			addDisplay: true
			}
			],
			...this.$store.state.control.clearOtherBut,
			},
			...this.$store.state.control.clearOtherBut
			}
			};
			},
			created() {
			this.getRailLazyTree();
			},
			computed: {
			...mapGetters(["userInfo", "permission"]),
			...mapGetters(["userInfo", "permission", "polygons"]),
			permissionList() {
			return {
			addBtn: this.vaildData(this.permission.rail_add, false),
			addBtn: this.vaildData(this.permission.rail_add, true),
			viewBtn: this.vaildData(this.permission.rail_view, false),
			delBtn: this.vaildData(this.permission.rail_delete, false),
			editBtn: this.vaildData(this.permission.rail_edit, false),
			editBtn: this.vaildData(this.permission.rail_edit, false)
			};
			},
			ids() {
			let ids = [];
			this.selectionList.forEach((ele) => {
			this.selectionList.forEach(ele => {
			ids.push(ele.id);
			});
			return ids.join(",");
			},
			}
			},
			watch: {
			"form.type": {
			handler(val) {
			var companyIdcolumn = this.findObject(this.option.column, "companyId");
			if(val==1){
			companyIdcolumn.dicData = this.dicData1;
			if (val == 1) {
			companyIdcolumn.dicData = this.dicData1;
			}
			if(val==2){
			companyIdcolumn.dicData = this.dicData2;
			if (val == 2) {
			companyIdcolumn.dicData = this.dicData2;
			}
			if(val==3){
			companyIdcolumn.dicData = this.dicData3;
			if (val == 3) {
			companyIdcolumn.dicData = this.dicData3;
			}
			},
			immediate: true,
			},
			immediate: true
			}
			},
			mounted() {
			this.$store.commit("setWindowSizeHeightAdd");
			},
			methods: {
			beforeOpen(done, type) {
			// console.log(type);
			if (type == "edit") {
			// this.$refs.getMapData.doThat(this.polygons);
			done();
			} else if (type == "add") {
			this.$store.commit("setpolygon", []); //用vuex传最终数据
			done();
			}
			},
			handleAudit(row, index) {
			// console.log(row);
			let usePolygons = row.coordinate
			.split("POLYGON((")[1]
			.split("))")[0]
			.split(",");
			for (let k in usePolygons) {
			usePolygons[k] = {
			lng: +usePolygons[k].split(" ")[0],
			lat: +usePolygons[k].split(" ")[1]
			};
			}
			// console.log(usePolygons);
			this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
			// return;
			this.$refs.crud.rowEdit(row, index);
			},
			setMapData(val) {
			this.LineData = val[0];
			this.PointData = val[1];
			},
			//dom获取、
			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();
			},
			//获取单位树数据
			getRailLazyTree() {
			let that = this;
			getRailTree(1,this.userInfo.dept_id).then((res) => {
			getRailTree(1, this.userInfo.dept_id).then(res => {
			that.dicData1 = res.data.data;
			});
			getRailTree(2,this.userInfo.dept_id).then((res) => {
			getRailTree(2, this.userInfo.dept_id).then(res => {
			that.dicData2 = res.data.data;
			});
			getRailTree(3,this.userInfo.dept_id).then((res) => {
			getRailTree(3, this.userInfo.dept_id).then(res => {
			that.dicData3 = res.data.data;
			});
			},
			@@ -271,18 +340,42 @@
			this.onLoad(this.page, this.query);
			},
			rowSave(form, done, loading) {
			add(form).then((res) => {
			if (this.polygons.length == 0) {
			//没有面的数据
			this.$refs.getMapData.isCheck = true;
			loading();
			return;
			}
			let pol = this.polygons;
			// console.log(pol);
			let polLength = this.polygons.length - 1;
			let usePolygons = "";
			for (let k in pol) {
			usePolygons += pol[k].lng + "," + pol[k].lat;
			if (k != polLength) {
			usePolygons += ";";
			}
			}
			// console.log(form);
			let data = {
			name: form.name,
			type: form.type,
			companyId: form.companyId,
			coordinate: usePolygons
			};
			// return;
			add(data).then(res => {
			if (res.data.success) {
			this.$message({
			message: "操作成功",
			type: "success",
			type: "success"
			});
			this.refreshChange();
			done();
			} else {
			this.$message({
			message: "操作失败",
			type: "warning",
			type: "warning"
			});
			done();
			}
			@@ -299,16 +392,36 @@
			this.onLoad(this.page);
			},
			rowUpdate(row, index, done, loading) {
			if (this.polygons.length == 0) {
			//没有面的数据
			this.$refs.getMapData.isCheck = true;
			loading();
			return;
			}
			let pol = this.polygons;
			// console.log(pol);
			let polLength = this.polygons.length - 1;
			let usePolygons = "";
			for (let k in pol) {
			usePolygons += pol[k].lng + "," + pol[k].lat;
			if (k != polLength) {
			usePolygons += ";";
			}
			}
			row.coordinate = usePolygons;
			// console.log(row);
			// loading();
			// return;
			update(row).then(
			() => {
			this.onLoad(this.page);
			this.$message({
			type: "success",
			message: "操作成功!",
			message: "操作成功!"
			});
			done();
			},
			(error) => {
			error => {
			window.console.log(error);
			loading();
			}
			@@ -318,7 +431,7 @@
			this.$confirm("确定删除当前合同信息数据?", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			type: "warning"
			})
			.then(() => {
			console.log(row);
			@@ -328,7 +441,7 @@
			this.onLoad(this.page);
			this.$message({
			type: "success",
			message: "操作成功!",
			message: "操作成功!"
			});
			});
			},
			@@ -343,10 +456,10 @@
			this.$confirm("确定批量将选择数据删除?", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			type: "warning"
			})
			.then(() => {
			return remove(this.ids).then((res) => {
			return remove(this.ids).then(res => {
			this.refreshChange();
			});
			})
			@@ -354,11 +467,11 @@
			this.onLoad(this.page);
			this.$message({
			type: "success",
			message: "操作成功!",
			message: "操作成功!"
			});
			this.$refs.crudrec.toggleSelection();
			})
			.catch((res) => {});
			.catch(res => {});
			},
			refreshChange() {
			this.onLoad(this.page, this.query);
			@@ -376,7 +489,7 @@
			page.currentPage,
			page.pageSize,
			Object.assign(params, this.query)
			).then((res) => {
			).then(res => {
			const data = res.data.data;
			this.page.total = data.total;
			this.data = data.records;
			@@ -384,8 +497,8 @@
			this.$store.commit("setWindowSizeHeightAdd");
			this.loading = false;
			});
			},
			},
			}
			}
			};
			</script>

			@@ -445,4 +558,11 @@
			cursor: pointer;
			}
			}

			#getMapData {
			width: calc(100% + 90px);
			position: relative;
			left: -90px;
			height: 400px;
			}
			</style>

			@@ -29,8 +29,10 @@
			proxy: {
			"/api": {
			// 本地服务接口地址
			target: 'http://localhost:81',
			// target: 'http://192.168.0.114:81',//钟日健W
			// target: 'http://localhost:81',
			// target: 'http://192.168.0.114:81', //钟日健W
			target: 'http://192.168.0.193:32248/api', //钟日健W备份
			// target: 'http://192.168.0.222:81', //自己W
			// target: 'http://localhost:81', //原W
			// target: 'http://192.168.0.108:81',//原W
			// target: 'http://192.168.0.107:81',//唐N