zhny_web.git - Gitblit

parent: 911275a1 | patch | commit | ignore whitespace

Administrator

2022-05-10 4f802e460cb63cfcb891202747a848d647928a87

新增农场管理页面

6 files modified

9 files added

	package.json	109 ●●●●● patch \| view \| raw \| blame \| history
	public/index.html	202 ●●●●● 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/api/farm/farm.js	57 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/Draw.js	1314 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/main.vue	719 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/mainInThere.vue	722 ●●●●● patch \| view \| raw \| blame \| history
	src/components/map/tip.vue	25 ●●●●● patch \| view \| raw \| blame \| history
	src/main.js	35 ●●●●● patch \| view \| raw \| blame \| history
	src/router/views/index.js	217 ●●●●● patch \| view \| raw \| blame \| history
	src/store/getters.js	56 ●●●●● patch \| view \| raw \| blame \| history
	src/store/modules/common.js	188 ●●●●● patch \| view \| raw \| blame \| history
	src/views/farm/farm.vue	282 ●●●●● patch \| view \| raw \| blame \| history
	src/views/farm/getMapDataInThere.vue	543 ●●●●● patch \| view \| raw \| blame \| history

 package.json

@@ -1,54 +1,57 @@
{
  "name": "saber-admin",
  "version": "2.9.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyz": "npm_config_report=true npm run build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "avue-plugin-ueditor": "^0.1.4",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "element-ui": "^2.15.6",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-service": "^3.1.4",
    "chai": "^4.1.2",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.0.5",
    "vue-template-compiler": "^2.5.17",
    "webpack-bundle-analyzer": "^3.0.3"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}
    "name": "saber-admin",
    "version": "2.9.1",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "analyz": "npm_config_report=true npm run build",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e"
    },
    "dependencies": {
        "avue-plugin-ueditor": "^0.1.4",
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "classlist-polyfill": "^1.2.0",
        "crypto-js": "^4.0.0",
        "element-ui": "^2.15.6",
        "jquery": "^3.6.0",
        "js-base64": "^2.5.1",
        "js-cookie": "^2.2.0",
        "ol": "^6.5.0",
        "olcs": "^2.12.0",
        "js-md5": "^0.7.3",
        "mockjs": "^1.0.1-beta3",
        "node-gyp": "^5.0.6",
        "nprogress": "^0.2.0",
        "portfinder": "^1.0.23",
        "script-loader": "^0.7.2",
        "vue": "^2.6.10",
        "vue-axios": "^2.1.2",
        "vue-i18n": "^8.7.0",
        "vue-router": "^3.0.1",
        "vuex": "^3.1.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.1.1",
        "@vue/cli-plugin-eslint": "^3.1.5",
        "@vue/cli-service": "^3.1.4",
        "chai": "^4.1.2",
        "node-sass": "^6.0.1",
        "sass-loader": "^10.0.5",
        "vue-template-compiler": "^2.5.17",
        "webpack-bundle-analyzer": "^3.0.3"
    },
    "lint-staged": {
        "*.js": [
            "vue-cli-service lint",
            "git add"
        ],
        "*.vue": [
            "vue-cli-service lint",
            "git add"
        ]
    }
}

 public/index.html

@@ -2,114 +2,120 @@
<html>

<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 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">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.15.6/theme-chalk/index.css">
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/index.css">
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/avue/iconfont.css">
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/saber/iconfont.css">
  <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.5/index.css">
  <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
  <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
  <link rel="icon" href="<%= BASE_URL %>favicon.png">
  <title>Saber企业平台</title>
  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    <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 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">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.15.6/theme-chalk/index.css">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/index.css">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/avue/iconfont.css">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/saber/iconfont.css">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.5/index.css">
    <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
    <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>

    .avue-home {
      background-color: #303133;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    <!-- 地图 -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="libs/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="js/drawTree.js"></script>

    .avue-home__main {
      user-select: none;
      width: 100%;
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .avue-home__footer {
      width: 100%;
      flex-grow: 0;
      text-align: center;
      padding: 1em 0;
    }

    .avue-home__footer > a {
      font-size: 12px;
      color: #ABABAB;
      text-decoration: none;
    }

    .avue-home__loading {
      height: 32px;
      width: 32px;
      margin-bottom: 20px;
    }

    .avue-home__title {
      color: #FFF;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .avue-home__sub-title {
      color: #ABABAB;
      font-size: 12px;
    }
  </style>
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <title>Saber企业平台</title>
    <style>
        html,
        body,
        #app {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        .avue-home {
            background-color: #303133;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .avue-home__main {
            user-select: none;
            width: 100%;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        
        .avue-home__footer {
            width: 100%;
            flex-grow: 0;
            text-align: center;
            padding: 1em 0;
        }
        
        .avue-home__footer>a {
            font-size: 12px;
            color: #ABABAB;
            text-decoration: none;
        }
        
        .avue-home__loading {
            height: 32px;
            width: 32px;
            margin-bottom: 20px;
        }
        
        .avue-home__title {
            color: #FFF;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .avue-home__sub-title {
            color: #ABABAB;
            font-size: 12px;
        }
    </style>
</head>

<body>
<noscript>
    <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__footer">
      <a href="https://bladex.vip" target="_blank">
    <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__footer">
                <a href="https://bladex.vip" target="_blank">
        https://bladex.vip </a>
            </div>
        </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.6/index.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/avue/2.9.5/avue.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/nutflow/wf-design-base/index.umd.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.6/index.js" charset="utf-8"></script>
    <script src="<%= BASE_URL %>cdn/avue/2.9.5/avue.min.js" charset="utf-8"></script>
    <script src="<%= BASE_URL %>cdn/nutflow/wf-design-base/index.umd.min.js" charset="utf-8"></script>
</body>

</html>
</html>

 public/js/drawTree.js

New file
Diff too large

 public/js/jquery.min.js

New file
Diff too large

 src/api/farm/farm.js

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

export const getList = (current, size, params) => {
    return request({
        url: '/api/farm/page',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}
export const remove = (ids) => {
    return request({
        url: '/api/farm/remove',
        method: 'post',
        params: {
            ids,
        }
    })
}

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

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

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

 src/components/map/Draw.js

New file
@@ -0,0 +1,1314 @@
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);
          // 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_) {
          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/main.vue

New file
@@ -0,0 +1,719 @@
<!--
 * @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)">
    <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 {
  defaults as OlControlDefaults,
  defaults,
} from "ol/control.js";

import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Vector } from "ol/source";
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 OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";

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:
              "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([
      ]),
      target: "map",
      view: new OlView({
        center: [0, 0],
        zoom: 2,
        projection: "EPSG:4326"
      })
    });
    window.ol2d = ol2d;

    var view = ol2d.getView();
    view.setCenter([114.03858862, 27.63088262]);

    view.setZoom(18);
    this.view = view;

    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);
        });

      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/mainInThere.vue

New file
@@ -0,0 +1,722 @@
<!--
 * @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 "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 Draw from "./Draw";

import Feature from "ol/Feature.js";
import LineString from "ol/geom/LineString.js";
import Polygon from "ol/geom/Polygon.js";
import { Style, Fill, Stroke } from "ol/style.js";
import OlFeature from "ol/Feature";
import OlGeomPoint from "ol/geom/Point";
import OlStyleStyle from "ol/style/Style";
import OlStyleIcon from "ol/style/Icon";
// // 用来添加相关文字描述的
import OlStyleText from "ol/style/Text";
import OlStyleFill from "ol/style/Fill";

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---";
      }
    }
  },
  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([
      ]),
      target: "map",
      view: new OlView({
        center: [0, 0],
        zoom: 13,
        projection: "EPSG:4326"
      })
    });
    window.ol2d = ol2d;

    var view = ol2d.getView();
    this.source = new VectorSource({ wrapX: false });
    view.setCenter([115.9032747077233, 28.67433116990186]);

    this.view = view;
  },
  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) {
        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();
      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,
        coordinate: function(res) {
          that.tipTitle = "可继续，或选择最终位置双击结束";
        },
        coordinateOverPoint: function(res) {
        },
        coordinateOver: function(res) {
          // 结束绘画 处理数据
          that.tipTitle = null;
          that.showTip = false;
        }
      });
      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");
        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) {
      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]);
    },
    addLines(data, name, notdo = false) {
      //创建图层
      //绘画线路
      // var entityData = "";
      var entityArr = [];
      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(0,153,255)",
            width: 3
          })
        })
      );
      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, .5)" //填充颜色，不透明度0
          }),
          //边线颜色
          stroke: new Stroke({
            // color: "rgb(18,150,219)", //面的边界线颜色
            color: "rgba(255, 255, 255, .5)", //面的边界线颜色
            width: 9 //边界线宽
          })
        })
      );
      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/map/tip.vue

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

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

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

 src/main.js

@@ -5,14 +5,14 @@
import router from './router/router';
import './permission'; // 权限
import './error'; // 日志
import './cache';//页面缓存
import './cache'; //页面缓存
import store from './store';
import {loadStyle} from './util/util'
import { loadStyle } from './util/util'
import * as urls from '@/config/env';
import Element from 'element-ui';
import {
  iconfontUrl,
  iconfontVersion
    iconfontUrl,
    iconfontVersion
} from '@/config/env';
import i18n from './lang'; // Internationalization
import './styles/common.scss';
@@ -26,19 +26,22 @@
// 业务组件
import tenantPackage from './views/system/tenantpackage';

import Map from './components/map/main';
Vue.component('Map', Map);

// 注册全局crud驱动
window.$crudCommon = crudCommon;
// 加载Vue拓展
Vue.use(router);
Vue.use(VueAxios, axios);
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
    i18n: (key, value) => i18n.t(key, value)
});
Vue.use(window.AVUE, {
  size: 'small',
  tableSize: 'small',
  calcHeight: 65,
  i18n: (key, value) => i18n.t(key, value)
    size: 'small',
    tableSize: 'small',
    calcHeight: 65,
    i18n: (key, value) => i18n.t(key, value)
});
// 注册全局容器
Vue.component('basicContainer', basicContainer);
@@ -49,7 +52,7 @@
Vue.component('tenantPackage', tenantPackage);
// 加载相关url地址
Object.keys(urls).forEach(key => {
  Vue.prototype[key] = urls[key];
    Vue.prototype[key] = urls[key];
});
// 加载NutFlow
Vue.use(window.WfDesignBase);
@@ -57,14 +60,14 @@
Vue.prototype.website = website;
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
  loadStyle(iconfontUrl.replace('$key', ele));
    loadStyle(iconfontUrl.replace('$key', ele));
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app');
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app');

 src/router/views/index.js

@@ -1,106 +1,121 @@
import Layout from '@/page/index/'

export default [{
  path: '/wel',
  component: Layout,
  redirect: '/wel/index',
  children: [{
    path: 'index',
    name: '首页',
    meta: {
      i18n: 'dashboard'
        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: '/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: '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')
        }]
    },
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/wel/index')
  }, {
    path: 'dashboard',
    name: '控制台',
    meta: {
      i18n: 'dashboard',
      menu: false,
    {
        path: '/farm',
        component: Layout,
        redirect: '/farm/index',
        children: [{
            path: 'index',
            name: '农场信息管理',
            meta: {
                i18n: 'farm'
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/farm/farm')
        }]
    },
    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: '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')
  }]
}]
]

 src/store/getters.js

@@ -1,29 +1,31 @@
const getters = {
  tag: state => state.tags.tag,
  language: state => state.common.language,
  website: state => state.common.website,
  userInfo: state => state.user.userInfo,
  colorName: state => state.common.colorName,
  themeName: state => state.common.themeName,
  isShade: state => state.common.isShade,
  isCollapse: state => state.common.isCollapse,
  keyCollapse: (state, getters) => getters.screen > 1 ? getters.isCollapse : false,
  screen: state => state.common.screen,
  isLock: state => state.common.isLock,
  isFullScren: state => state.common.isFullScren,
  isMenu: state => state.common.isMenu,
  lockPasswd: state => state.common.lockPasswd,
  tagList: state => state.tags.tagList,
  tagWel: state => state.tags.tagWel,
  token: state => state.user.token,
  roles: state => state.user.roles,
  permission: state => state.user.permission,
  menu: state => state.user.menu,
  menuId: state => state.user.menuId,
  menuAll: state => state.user.menuAll,
  logsList: state => state.logs.logsList,
  logsLen: state => state.logs.logsList.length || 0,
  logsFlag: (state, getters) => getters.logsLen === 0,
  flowRoutes: state => state.dict.flowRoutes,
    tag: state => state.tags.tag,
    language: state => state.common.language,
    website: state => state.common.website,
    userInfo: state => state.user.userInfo,
    colorName: state => state.common.colorName,
    themeName: state => state.common.themeName,
    isShade: state => state.common.isShade,
    isCollapse: state => state.common.isCollapse,
    keyCollapse: (state, getters) => getters.screen > 1 ? getters.isCollapse : false,
    screen: state => state.common.screen,
    isLock: state => state.common.isLock,
    isFullScren: state => state.common.isFullScren,
    isMenu: state => state.common.isMenu,
    lockPasswd: state => state.common.lockPasswd,
    tagList: state => state.tags.tagList,
    tagWel: state => state.tags.tagWel,
    token: state => state.user.token,
    roles: state => state.user.roles,
    permission: state => state.user.permission,
    menu: state => state.user.menu,
    menuId: state => state.user.menuId,
    menuAll: state => state.user.menuAll,
    logsList: state => state.logs.logsList,
    logsLen: state => state.logs.logsList.length || 0,
    logsFlag: (state, getters) => getters.logsLen === 0,
    flowRoutes: state => state.dict.flowRoutes,
    //面
    polygons: state => state.common.polygons,
}
export default getters
export default getters

 src/store/modules/common.js

@@ -1,99 +1,103 @@
import {
  setStore,
  getStore,
  removeStore
    setStore,
    getStore,
    removeStore
} from '@/util/store'
import website from '@/config/website'

const common = {

  state: {
    language: getStore({name: 'language'}) || 'zh',
    isCollapse: false,
    isFullScren: false,
    isMenu: true,
    isShade: false,
    screen: -1,
    isLock: getStore({name: 'isLock'}) || false,
    showTag: true,
    showDebug: true,
    showCollapse: true,
    showSearch: true,
    showLock: true,
    showFullScren: true,
    showTheme: true,
    showMenu: true,
    showColor: true,
    colorName: getStore({name: 'colorName'}) || '#409EFF',
    themeName: getStore({name: 'themeName'}) || 'theme-default',
    lockPasswd: getStore({name: 'lockPasswd'}) || '',
    website: website,
  },
  mutations: {
    SET_LANGUAGE: (state, language) => {
      state.language = language
      setStore({
        name: 'language',
        content: state.language
      })
    state: {
        language: getStore({ name: 'language' }) || 'zh',
        isCollapse: false,
        isFullScren: false,
        isMenu: true,
        isShade: false,
        screen: -1,
        isLock: getStore({ name: 'isLock' }) || false,
        showTag: true,
        showDebug: true,
        showCollapse: true,
        showSearch: true,
        showLock: true,
        showFullScren: true,
        showTheme: true,
        showMenu: true,
        showColor: true,
        colorName: getStore({ name: 'colorName' }) || '#409EFF',
        themeName: getStore({ name: 'themeName' }) || 'theme-default',
        lockPasswd: getStore({ name: 'lockPasswd' }) || '',
        website: website,
        //面的集和点
        polygons: [],
    },
    SET_SHADE: (state, active) => {
      state.isShade = active;
    },
    SET_COLLAPSE: (state) => {
      state.isCollapse = !state.isCollapse;
    },
    SET_FULLSCREN: (state) => {
      state.isFullScren = !state.isFullScren;
    },
    SET_IS_MENU: (state, menu) => {
      state.isMenu = menu;
    },
    SET_LOCK: (state) => {
      state.isLock = true;
      setStore({
        name: 'isLock',
        content: state.isLock,
        type: 'session'
      })
    },
    SET_SCREEN: (state, screen) => {
      state.screen = screen;
    },
    SET_COLOR_NAME: (state, colorName) => {
      state.colorName = colorName;
      setStore({
        name: 'colorName',
        content: state.colorName,
      })
    },
    SET_THEME_NAME: (state, themeName) => {
      state.themeName = themeName;
      setStore({
        name: 'themeName',
        content: state.themeName,
      })
    },
    SET_LOCK_PASSWD: (state, lockPasswd) => {
      state.lockPasswd = lockPasswd;
      setStore({
        name: 'lockPasswd',
        content: state.lockPasswd,
        type: 'session'
      })
    },
    CLEAR_LOCK: (state) => {
      state.isLock = false;
      state.lockPasswd = '';
      removeStore({
        name: 'lockPasswd',
        type: 'session'
      });
      removeStore({
        name: 'isLock',
        type: 'session'
      });
    },
  }
    mutations: {
        setpolygon: (state, data) => {
            state.polygons = data;
        },
        SET_LANGUAGE: (state, language) => {
            state.language = language
            setStore({
                name: 'language',
                content: state.language
            })
        },
        SET_SHADE: (state, active) => {
            state.isShade = active;
        },
        SET_COLLAPSE: (state) => {
            state.isCollapse = !state.isCollapse;
        },
        SET_FULLSCREN: (state) => {
            state.isFullScren = !state.isFullScren;
        },
        SET_IS_MENU: (state, menu) => {
            state.isMenu = menu;
        },
        SET_LOCK: (state) => {
            state.isLock = true;
            setStore({
                name: 'isLock',
                content: state.isLock,
                type: 'session'
            })
        },
        SET_SCREEN: (state, screen) => {
            state.screen = screen;
        },
        SET_COLOR_NAME: (state, colorName) => {
            state.colorName = colorName;
            setStore({
                name: 'colorName',
                content: state.colorName,
            })
        },
        SET_THEME_NAME: (state, themeName) => {
            state.themeName = themeName;
            setStore({
                name: 'themeName',
                content: state.themeName,
            })
        },
        SET_LOCK_PASSWD: (state, lockPasswd) => {
            state.lockPasswd = lockPasswd;
            setStore({
                name: 'lockPasswd',
                content: state.lockPasswd,
                type: 'session'
            })
        },
        CLEAR_LOCK: (state) => {
            state.isLock = false;
            state.lockPasswd = '';
            removeStore({
                name: 'lockPasswd',
                type: 'session'
            });
            removeStore({
                name: 'isLock',
                type: 'session'
            });
        },
    }
}
export default common
export default common

 src/views/farm/farm.vue

New file
@@ -0,0 +1,282 @@
<template>
  <div class="dispatch">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 基本信息 -->
      <el-tab-pane label="基本信息" name="tab1">
        <basic-container>
          <avue-form
            ref="form"
            v-model="objBase"
            :option="optionBase"
            @submit="submitBase"
          >
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="position">
              <getMapDataInThere
                ref="getMapData"
                id="getMapData"
                @setMapData="setMapData"
              ></getMapDataInThere>
            </template>
          </avue-form>
        </basic-container>
      </el-tab-pane>
      <!-- 检测报告信息 -->
      <el-tab-pane :label="tab2label" name="tab2"> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import getMapDataInThere from "./getMapDataInThere.vue";
import { update, getDetails } from "@/api/farm/farm";
// import manager from "./manager.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    getMapDataInThere,
  },
  data() {
    return {
      tab2label: "检测报告/认证证书信息",
      activeName: "tab1",
      objBase: {},
      optionBase: {
        emptyBtn: false,
        submitText: "保存",
        gutter: 30,
        group: [
          {
            icon: "",
            label: "农场基本信息",
            collapse: true,
            prop: "group1",
            column: [
              {
                label: "",
                labelWidth: 20,
                type: "title",
                prop: "title",
                span: 24,
                styles: {
                  fontSize: "24px",
                },
              },
              {
                label: "农场名称",
                prop: "farmName",
                span: 12,
                labelWidth: 145,
                rules: [
                  {
                    required: true,
                    message: "请输入农场名称",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "农场地址",
                prop: "farmAddress",
                span: 12,
                labelWidth: 145,
                width: 110,
                rules: [
                  {
                    required: true,
                    message: "请输入农场地址",
                    trigger: "click",
                  },
                ],
              },
              {
                label: "农场面积",
                prop: "farmArea",
                span: 12,
                labelWidth: 145,
                width: 110,
                rules: [
                  {
                    required: true,
                    message: "请输入农场面积",
                    trigger: "click",
                  },
                ],
              },
            ],
          },
          {
            icon: "",
            label: "农场介绍",
            prop: "group2",
            column: [
              {
                label: "口号",
                prop: "slogan",
                span: 12,
                labelWidth: 145,
                rules: [
                  {
                    required: true,
                    message: "请输入口号",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "介绍",
                type: "textarea",
                prop: "introduce",
                span: 24,
                labelWidth: 145,
                rules: [
                  {
                    required: true,
                    message: "请输入介绍",
                    trigger: "blur",
                  },
                ],
              },
              {
                label: "农场环境图片",
                prop: "picture",
                type: "upload",
                listType: "picture-img",
                span: 24,
                propsHttp: {
                  res: "data",
                },
                canvasOption: {
                  text: "",
                  ratio: 1.0,
                },
                labelWidth: 145,
                tip: "只能上传jpg/png格式图片，且不超过2Mb",
                action: "/api/blade-resource/oss/endpoint/put-files",
                disabled: false,
              },
              {
                label: "农场位置",
                prop: "position",
                className: "mapClass",
                span: 24,
                formslot: true,
                labelWidth: 145,
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons"]),
  },
  methods: {
    initData() {
      //用vuex传最终数据，加载地图
      //   this.$store.commit("setpolygon", []);
      this.getDetail();
    },
    //获取农场基本信息
    getDetail(){
        var that = this;
        getDetails(this.userInfo.user_id).then((res)=>{
            if(res.data.code==200){
                that.objBase = res.data.data;
                let usePolygons = that.objBase.position
                    .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传最终数据
            }
        })
    },
    //农场基本信息提交
    submitBase(form, loading, done) {
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        loading();
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygons;
        let polLength = this.polygons.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        form.position = usePolygons;
        console.log(form, 121222112212121);
      }
      // 修改
      update(form).then((res) => {
        if (res.data.success) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.refreshChange();
          done();
        } else {
          this.$message({
            message: "操作失败",
            type: "warning",
          });
          done();
        }
      });
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
  },
  mounted() {},
  created() {
    //初始化信息
    this.initData();
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.mapClass div label {
  display: none;
}

#getMapData {
  width: 80%;
  position: relative;
  height: 500px;
  top: 10px;
}

.el-collapse-item {
  padding-top: 15px !important;
}

.tab {
  position: relative;
  // border: 1px solid red;
  background-color: #fff;
  height: 92%;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  top: -10px;
}
</style>

 src/views/farm/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>

			@@ -1,54 +1,57 @@
			{
			"name": "saber-admin",
			"version": "2.9.1",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint",
			"analyz": "npm_config_report=true npm run build",
			"test:unit": "vue-cli-service test:unit",
			"test:e2e": "vue-cli-service test:e2e"
			},
			"dependencies": {
			"avue-plugin-ueditor": "^0.1.4",
			"axios": "^0.18.0",
			"babel-polyfill": "^6.26.0",
			"classlist-polyfill": "^1.2.0",
			"crypto-js": "^4.0.0",
			"element-ui": "^2.15.6",
			"js-base64": "^2.5.1",
			"js-cookie": "^2.2.0",
			"js-md5": "^0.7.3",
			"mockjs": "^1.0.1-beta3",
			"node-gyp": "^5.0.6",
			"nprogress": "^0.2.0",
			"portfinder": "^1.0.23",
			"script-loader": "^0.7.2",
			"vue": "^2.6.10",
			"vue-axios": "^2.1.2",
			"vue-i18n": "^8.7.0",
			"vue-router": "^3.0.1",
			"vuex": "^3.1.1"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "^3.1.1",
			"@vue/cli-plugin-eslint": "^3.1.5",
			"@vue/cli-service": "^3.1.4",
			"chai": "^4.1.2",
			"node-sass": "^6.0.1",
			"sass-loader": "^10.0.5",
			"vue-template-compiler": "^2.5.17",
			"webpack-bundle-analyzer": "^3.0.3"
			},
			"lint-staged": {
			"*.js": [
			"vue-cli-service lint",
			"git add"
			],
			"*.vue": [
			"vue-cli-service lint",
			"git add"
			]
			}
			}
			"name": "saber-admin",
			"version": "2.9.1",
			"private": true,
			"scripts": {
			"serve": "vue-cli-service serve",
			"build": "vue-cli-service build",
			"lint": "vue-cli-service lint",
			"analyz": "npm_config_report=true npm run build",
			"test:unit": "vue-cli-service test:unit",
			"test:e2e": "vue-cli-service test:e2e"
			},
			"dependencies": {
			"avue-plugin-ueditor": "^0.1.4",
			"axios": "^0.18.0",
			"babel-polyfill": "^6.26.0",
			"classlist-polyfill": "^1.2.0",
			"crypto-js": "^4.0.0",
			"element-ui": "^2.15.6",
			"jquery": "^3.6.0",
			"js-base64": "^2.5.1",
			"js-cookie": "^2.2.0",
			"ol": "^6.5.0",
			"olcs": "^2.12.0",
			"js-md5": "^0.7.3",
			"mockjs": "^1.0.1-beta3",
			"node-gyp": "^5.0.6",
			"nprogress": "^0.2.0",
			"portfinder": "^1.0.23",
			"script-loader": "^0.7.2",
			"vue": "^2.6.10",
			"vue-axios": "^2.1.2",
			"vue-i18n": "^8.7.0",
			"vue-router": "^3.0.1",
			"vuex": "^3.1.1"
			},
			"devDependencies": {
			"@vue/cli-plugin-babel": "^3.1.1",
			"@vue/cli-plugin-eslint": "^3.1.5",
			"@vue/cli-service": "^3.1.4",
			"chai": "^4.1.2",
			"node-sass": "^6.0.1",
			"sass-loader": "^10.0.5",
			"vue-template-compiler": "^2.5.17",
			"webpack-bundle-analyzer": "^3.0.3"
			},
			"lint-staged": {
			"*.js": [
			"vue-cli-service lint",
			"git add"
			],
			"*.vue": [
			"vue-cli-service lint",
			"git add"
			]
			}
			}

			@@ -2,114 +2,120 @@
			<html>

			<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 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">
			<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<meta name="format-detection" content="telephone=no">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.15.6/theme-chalk/index.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/index.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/avue/iconfont.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/saber/iconfont.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.5/index.css">
			<script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
			<script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
			<link rel="icon" href="<%= BASE_URL %>favicon.png">
			<title>Saber企业平台</title>
			<style>
			html,
			body,
			#app {
			height: 100%;
			margin: 0;
			padding: 0;
			}
			<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 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">
			<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<meta name="format-detection" content="telephone=no">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/element-ui/2.15.6/theme-chalk/index.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/index.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/avue/iconfont.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/saber/iconfont.css">
			<link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.5/index.css">
			<script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
			<script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>

			.avue-home {
			background-color: #303133;
			height: 100%;
			display: flex;
			flex-direction: column;
			}
			<!-- 地图 -->
			<script type="text/javascript" src="js/jquery.min.js"></script>
			<script src="libs/Cesium/Cesium.js"></script>
			<script type="text/javascript" src="js/drawTree.js"></script>

			.avue-home__main {
			user-select: none;
			width: 100%;
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			}

			.avue-home__footer {
			width: 100%;
			flex-grow: 0;
			text-align: center;
			padding: 1em 0;
			}

			.avue-home__footer > a {
			font-size: 12px;
			color: #ABABAB;
			text-decoration: none;
			}

			.avue-home__loading {
			height: 32px;
			width: 32px;
			margin-bottom: 20px;
			}

			.avue-home__title {
			color: #FFF;
			font-size: 14px;
			margin-bottom: 10px;
			}

			.avue-home__sub-title {
			color: #ABABAB;
			font-size: 12px;
			}
			</style>
			<link rel="icon" href="<%= BASE_URL %>favicon.png">
			<title>Saber企业平台</title>
			<style>
			html,
			body,
			#app {
			height: 100%;
			margin: 0;
			padding: 0;
			}

			.avue-home {
			background-color: #303133;
			height: 100%;
			display: flex;
			flex-direction: column;
			}

			.avue-home__main {
			user-select: none;
			width: 100%;
			flex-grow: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			}

			.avue-home__footer {
			width: 100%;
			flex-grow: 0;
			text-align: center;
			padding: 1em 0;
			}

			.avue-home__footer>a {
			font-size: 12px;
			color: #ABABAB;
			text-decoration: none;
			}

			.avue-home__loading {
			height: 32px;
			width: 32px;
			margin-bottom: 20px;
			}

			.avue-home__title {
			color: #FFF;
			font-size: 14px;
			margin-bottom: 10px;
			}

			.avue-home__sub-title {
			color: #ABABAB;
			font-size: 12px;
			}
			</style>
			</head>

			<body>
			<noscript>
			<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__footer">
			<a href="https://bladex.vip" target="_blank">
			<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__footer">
			<a href="https://bladex.vip" target="_blank">
			https://bladex.vip </a>
			</div>
			</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.6/index.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/avue/2.9.5/avue.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/nutflow/wf-design-base/index.umd.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.6/index.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/avue/2.9.5/avue.min.js" charset="utf-8"></script>
			<script src="<%= BASE_URL %>cdn/nutflow/wf-design-base/index.umd.min.js" charset="utf-8"></script>
			</body>

			</html>
			</html>

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

			export const getList = (current, size, params) => {
			return request({
			url: '/api/farm/page',
			method: 'get',
			params: {
			...params,
			current,
			size,
			}
			})
			}
			export const remove = (ids) => {
			return request({
			url: '/api/farm/remove',
			method: 'post',
			params: {
			ids,
			}
			})
			}

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

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

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

New file
			@@ -0,0 +1,719 @@
			<!--
			* @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)">
			<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 {
			defaults as OlControlDefaults,
			defaults,
			} from "ol/control.js";

			import VectorLayer from "ol/layer/Vector";
			import VectorSource from "ol/source/Vector";
			import { Vector } from "ol/source";
			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 OlFeature from "ol/Feature";
			import OlGeomPoint from "ol/geom/Point";
			import OlStyleStyle from "ol/style/Style";
			import OlStyleIcon from "ol/style/Icon";

			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:
			"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([
			]),
			target: "map",
			view: new OlView({
			center: [0, 0],
			zoom: 2,
			projection: "EPSG:4326"
			})
			});
			window.ol2d = ol2d;

			var view = ol2d.getView();
			view.setCenter([114.03858862, 27.63088262]);

			view.setZoom(18);
			this.view = view;

			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);
			});

			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,722 @@
			<!--
			* @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 "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 Draw from "./Draw";

			import Feature from "ol/Feature.js";
			import LineString from "ol/geom/LineString.js";
			import Polygon from "ol/geom/Polygon.js";
			import { Style, Fill, Stroke } from "ol/style.js";
			import OlFeature from "ol/Feature";
			import OlGeomPoint from "ol/geom/Point";
			import OlStyleStyle from "ol/style/Style";
			import OlStyleIcon from "ol/style/Icon";
			// // 用来添加相关文字描述的
			import OlStyleText from "ol/style/Text";
			import OlStyleFill from "ol/style/Fill";

			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---";
			}
			}
			},
			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([
			]),
			target: "map",
			view: new OlView({
			center: [0, 0],
			zoom: 13,
			projection: "EPSG:4326"
			})
			});
			window.ol2d = ol2d;

			var view = ol2d.getView();
			this.source = new VectorSource({ wrapX: false });
			view.setCenter([115.9032747077233, 28.67433116990186]);

			this.view = view;
			},
			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) {
			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();
			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,
			coordinate: function(res) {
			that.tipTitle = "可继续，或选择最终位置双击结束";
			},
			coordinateOverPoint: function(res) {
			},
			coordinateOver: function(res) {
			// 结束绘画处理数据
			that.tipTitle = null;
			that.showTip = false;
			}
			});
			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");
			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) {
			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]);
			},
			addLines(data, name, notdo = false) {
			//创建图层
			//绘画线路
			// var entityData = "";
			var entityArr = [];
			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(0,153,255)",
			width: 3
			})
			})
			);
			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, .5)" //填充颜色，不透明度0
			}),
			//边线颜色
			stroke: new Stroke({
			// color: "rgb(18,150,219)", //面的边界线颜色
			color: "rgba(255, 255, 255, .5)", //面的边界线颜色
			width: 9 //边界线宽
			})
			})
			);
			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,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>

			@@ -5,14 +5,14 @@
			import router from './router/router';
			import './permission'; // 权限
			import './error'; // 日志
			import './cache';//页面缓存
			import './cache'; //页面缓存
			import store from './store';
			import {loadStyle} from './util/util'
			import { loadStyle } from './util/util'
			import * as urls from '@/config/env';
			import Element from 'element-ui';
			import {
			iconfontUrl,
			iconfontVersion
			iconfontUrl,
			iconfontVersion
			} from '@/config/env';
			import i18n from './lang'; // Internationalization
			import './styles/common.scss';
			@@ -26,19 +26,22 @@
			// 业务组件
			import tenantPackage from './views/system/tenantpackage';

			import Map from './components/map/main';
			Vue.component('Map', Map);

			// 注册全局crud驱动
			window.$crudCommon = crudCommon;
			// 加载Vue拓展
			Vue.use(router);
			Vue.use(VueAxios, axios);
			Vue.use(Element, {
			i18n: (key, value) => i18n.t(key, value)
			i18n: (key, value) => i18n.t(key, value)
			});
			Vue.use(window.AVUE, {
			size: 'small',
			tableSize: 'small',
			calcHeight: 65,
			i18n: (key, value) => i18n.t(key, value)
			size: 'small',
			tableSize: 'small',
			calcHeight: 65,
			i18n: (key, value) => i18n.t(key, value)
			});
			// 注册全局容器
			Vue.component('basicContainer', basicContainer);
			@@ -49,7 +52,7 @@
			Vue.component('tenantPackage', tenantPackage);
			// 加载相关url地址
			Object.keys(urls).forEach(key => {
			Vue.prototype[key] = urls[key];
			Vue.prototype[key] = urls[key];
			});
			// 加载NutFlow
			Vue.use(window.WfDesignBase);
			@@ -57,14 +60,14 @@
			Vue.prototype.website = website;
			// 动态加载阿里云字体库
			iconfontVersion.forEach(ele => {
			loadStyle(iconfontUrl.replace('$key', ele));
			loadStyle(iconfontUrl.replace('$key', ele));
			});

			Vue.config.productionTip = false;

			new Vue({
			router,
			store,
			i18n,
			render: h => h(App)
			}).$mount('#app');
			router,
			store,
			i18n,
			render: h => h(App)
			}).$mount('#app');

			@@ -1,106 +1,121 @@
			import Layout from '@/page/index/'

			export default [{
			path: '/wel',
			component: Layout,
			redirect: '/wel/index',
			children: [{
			path: 'index',
			name: '首页',
			meta: {
			i18n: 'dashboard'
			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: '/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: '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')
			}]
			},
			component: () =>
			import( /* webpackChunkName: "views" */ '@/views/wel/index')
			}, {
			path: 'dashboard',
			name: '控制台',
			meta: {
			i18n: 'dashboard',
			menu: false,
			{
			path: '/farm',
			component: Layout,
			redirect: '/farm/index',
			children: [{
			path: 'index',
			name: '农场信息管理',
			meta: {
			i18n: 'farm'
			},
			component: () =>
			import ( /* webpackChunkName: "views" */ '@/views/farm/farm')
			}]
			},
			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: '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')
			}]
			}]
			]

			@@ -1,29 +1,31 @@
			const getters = {
			tag: state => state.tags.tag,
			language: state => state.common.language,
			website: state => state.common.website,
			userInfo: state => state.user.userInfo,
			colorName: state => state.common.colorName,
			themeName: state => state.common.themeName,
			isShade: state => state.common.isShade,
			isCollapse: state => state.common.isCollapse,
			keyCollapse: (state, getters) => getters.screen > 1 ? getters.isCollapse : false,
			screen: state => state.common.screen,
			isLock: state => state.common.isLock,
			isFullScren: state => state.common.isFullScren,
			isMenu: state => state.common.isMenu,
			lockPasswd: state => state.common.lockPasswd,
			tagList: state => state.tags.tagList,
			tagWel: state => state.tags.tagWel,
			token: state => state.user.token,
			roles: state => state.user.roles,
			permission: state => state.user.permission,
			menu: state => state.user.menu,
			menuId: state => state.user.menuId,
			menuAll: state => state.user.menuAll,
			logsList: state => state.logs.logsList,
			logsLen: state => state.logs.logsList.length \|\| 0,
			logsFlag: (state, getters) => getters.logsLen === 0,
			flowRoutes: state => state.dict.flowRoutes,
			tag: state => state.tags.tag,
			language: state => state.common.language,
			website: state => state.common.website,
			userInfo: state => state.user.userInfo,
			colorName: state => state.common.colorName,
			themeName: state => state.common.themeName,
			isShade: state => state.common.isShade,
			isCollapse: state => state.common.isCollapse,
			keyCollapse: (state, getters) => getters.screen > 1 ? getters.isCollapse : false,
			screen: state => state.common.screen,
			isLock: state => state.common.isLock,
			isFullScren: state => state.common.isFullScren,
			isMenu: state => state.common.isMenu,
			lockPasswd: state => state.common.lockPasswd,
			tagList: state => state.tags.tagList,
			tagWel: state => state.tags.tagWel,
			token: state => state.user.token,
			roles: state => state.user.roles,
			permission: state => state.user.permission,
			menu: state => state.user.menu,
			menuId: state => state.user.menuId,
			menuAll: state => state.user.menuAll,
			logsList: state => state.logs.logsList,
			logsLen: state => state.logs.logsList.length \|\| 0,
			logsFlag: (state, getters) => getters.logsLen === 0,
			flowRoutes: state => state.dict.flowRoutes,
			//面
			polygons: state => state.common.polygons,
			}
			export default getters
			export default getters

			@@ -1,99 +1,103 @@
			import {
			setStore,
			getStore,
			removeStore
			setStore,
			getStore,
			removeStore
			} from '@/util/store'
			import website from '@/config/website'

			const common = {

			state: {
			language: getStore({name: 'language'}) \|\| 'zh',
			isCollapse: false,
			isFullScren: false,
			isMenu: true,
			isShade: false,
			screen: -1,
			isLock: getStore({name: 'isLock'}) \|\| false,
			showTag: true,
			showDebug: true,
			showCollapse: true,
			showSearch: true,
			showLock: true,
			showFullScren: true,
			showTheme: true,
			showMenu: true,
			showColor: true,
			colorName: getStore({name: 'colorName'}) \|\| '#409EFF',
			themeName: getStore({name: 'themeName'}) \|\| 'theme-default',
			lockPasswd: getStore({name: 'lockPasswd'}) \|\| '',
			website: website,
			},
			mutations: {
			SET_LANGUAGE: (state, language) => {
			state.language = language
			setStore({
			name: 'language',
			content: state.language
			})
			state: {
			language: getStore({ name: 'language' }) \|\| 'zh',
			isCollapse: false,
			isFullScren: false,
			isMenu: true,
			isShade: false,
			screen: -1,
			isLock: getStore({ name: 'isLock' }) \|\| false,
			showTag: true,
			showDebug: true,
			showCollapse: true,
			showSearch: true,
			showLock: true,
			showFullScren: true,
			showTheme: true,
			showMenu: true,
			showColor: true,
			colorName: getStore({ name: 'colorName' }) \|\| '#409EFF',
			themeName: getStore({ name: 'themeName' }) \|\| 'theme-default',
			lockPasswd: getStore({ name: 'lockPasswd' }) \|\| '',
			website: website,
			//面的集和点
			polygons: [],
			},
			SET_SHADE: (state, active) => {
			state.isShade = active;
			},
			SET_COLLAPSE: (state) => {
			state.isCollapse = !state.isCollapse;
			},
			SET_FULLSCREN: (state) => {
			state.isFullScren = !state.isFullScren;
			},
			SET_IS_MENU: (state, menu) => {
			state.isMenu = menu;
			},
			SET_LOCK: (state) => {
			state.isLock = true;
			setStore({
			name: 'isLock',
			content: state.isLock,
			type: 'session'
			})
			},
			SET_SCREEN: (state, screen) => {
			state.screen = screen;
			},
			SET_COLOR_NAME: (state, colorName) => {
			state.colorName = colorName;
			setStore({
			name: 'colorName',
			content: state.colorName,
			})
			},
			SET_THEME_NAME: (state, themeName) => {
			state.themeName = themeName;
			setStore({
			name: 'themeName',
			content: state.themeName,
			})
			},
			SET_LOCK_PASSWD: (state, lockPasswd) => {
			state.lockPasswd = lockPasswd;
			setStore({
			name: 'lockPasswd',
			content: state.lockPasswd,
			type: 'session'
			})
			},
			CLEAR_LOCK: (state) => {
			state.isLock = false;
			state.lockPasswd = '';
			removeStore({
			name: 'lockPasswd',
			type: 'session'
			});
			removeStore({
			name: 'isLock',
			type: 'session'
			});
			},
			}
			mutations: {
			setpolygon: (state, data) => {
			state.polygons = data;
			},
			SET_LANGUAGE: (state, language) => {
			state.language = language
			setStore({
			name: 'language',
			content: state.language
			})
			},
			SET_SHADE: (state, active) => {
			state.isShade = active;
			},
			SET_COLLAPSE: (state) => {
			state.isCollapse = !state.isCollapse;
			},
			SET_FULLSCREN: (state) => {
			state.isFullScren = !state.isFullScren;
			},
			SET_IS_MENU: (state, menu) => {
			state.isMenu = menu;
			},
			SET_LOCK: (state) => {
			state.isLock = true;
			setStore({
			name: 'isLock',
			content: state.isLock,
			type: 'session'
			})
			},
			SET_SCREEN: (state, screen) => {
			state.screen = screen;
			},
			SET_COLOR_NAME: (state, colorName) => {
			state.colorName = colorName;
			setStore({
			name: 'colorName',
			content: state.colorName,
			})
			},
			SET_THEME_NAME: (state, themeName) => {
			state.themeName = themeName;
			setStore({
			name: 'themeName',
			content: state.themeName,
			})
			},
			SET_LOCK_PASSWD: (state, lockPasswd) => {
			state.lockPasswd = lockPasswd;
			setStore({
			name: 'lockPasswd',
			content: state.lockPasswd,
			type: 'session'
			})
			},
			CLEAR_LOCK: (state) => {
			state.isLock = false;
			state.lockPasswd = '';
			removeStore({
			name: 'lockPasswd',
			type: 'session'
			});
			removeStore({
			name: 'isLock',
			type: 'session'
			});
			},
			}
			}
			export default common
			export default common

New file
			@@ -0,0 +1,282 @@
			<template>
			<div class="dispatch">
			<el-tabs v-model="activeName" @tab-click="handleClick">
			<!-- 基本信息 -->
			<el-tab-pane label="基本信息" name="tab1">
			<basic-container>
			<avue-form
			ref="form"
			v-model="objBase"
			:option="optionBase"
			@submit="submitBase"
			>
			<!-- 地图插入 -->
			<template slot-scope="{ type, disabled }" slot="position">
			<getMapDataInThere
			ref="getMapData"
			id="getMapData"
			@setMapData="setMapData"
			></getMapDataInThere>
			</template>
			</avue-form>
			</basic-container>
			</el-tab-pane>
			<!-- 检测报告信息 -->
			<el-tab-pane :label="tab2label" name="tab2"> </el-tab-pane>
			</el-tabs>
			</div>
			</template>

			<script>
			import getMapDataInThere from "./getMapDataInThere.vue";
			import { update, getDetails } from "@/api/farm/farm";
			// import manager from "./manager.vue";
			import { mapGetters } from "vuex";

			export default {
			components: {
			getMapDataInThere,
			},
			data() {
			return {
			tab2label: "检测报告/认证证书信息",
			activeName: "tab1",
			objBase: {},
			optionBase: {
			emptyBtn: false,
			submitText: "保存",
			gutter: 30,
			group: [
			{
			icon: "",
			label: "农场基本信息",
			collapse: true,
			prop: "group1",
			column: [
			{
			label: "",
			labelWidth: 20,
			type: "title",
			prop: "title",
			span: 24,
			styles: {
			fontSize: "24px",
			},
			},
			{
			label: "农场名称",
			prop: "farmName",
			span: 12,
			labelWidth: 145,
			rules: [
			{
			required: true,
			message: "请输入农场名称",
			trigger: "blur",
			},
			],
			},
			{
			label: "农场地址",
			prop: "farmAddress",
			span: 12,
			labelWidth: 145,
			width: 110,
			rules: [
			{
			required: true,
			message: "请输入农场地址",
			trigger: "click",
			},
			],
			},
			{
			label: "农场面积",
			prop: "farmArea",
			span: 12,
			labelWidth: 145,
			width: 110,
			rules: [
			{
			required: true,
			message: "请输入农场面积",
			trigger: "click",
			},
			],
			},
			],
			},
			{
			icon: "",
			label: "农场介绍",
			prop: "group2",
			column: [
			{
			label: "口号",
			prop: "slogan",
			span: 12,
			labelWidth: 145,
			rules: [
			{
			required: true,
			message: "请输入口号",
			trigger: "blur",
			},
			],
			},
			{
			label: "介绍",
			type: "textarea",
			prop: "introduce",
			span: 24,
			labelWidth: 145,
			rules: [
			{
			required: true,
			message: "请输入介绍",
			trigger: "blur",
			},
			],
			},
			{
			label: "农场环境图片",
			prop: "picture",
			type: "upload",
			listType: "picture-img",
			span: 24,
			propsHttp: {
			res: "data",
			},
			canvasOption: {
			text: "",
			ratio: 1.0,
			},
			labelWidth: 145,
			tip: "只能上传jpg/png格式图片，且不超过2Mb",
			action: "/api/blade-resource/oss/endpoint/put-files",
			disabled: false,
			},
			{
			label: "农场位置",
			prop: "position",
			className: "mapClass",
			span: 24,
			formslot: true,
			labelWidth: 145,
			},
			],
			},
			],
			},
			};
			},
			computed: {
			...mapGetters(["userInfo", "permission", "polygons"]),
			},
			methods: {
			initData() {
			//用vuex传最终数据，加载地图
			// this.$store.commit("setpolygon", []);
			this.getDetail();
			},
			//获取农场基本信息
			getDetail(){
			var that = this;
			getDetails(this.userInfo.user_id).then((res)=>{
			if(res.data.code==200){
			that.objBase = res.data.data;
			let usePolygons = that.objBase.position
			.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传最终数据
			}
			})
			},
			//农场基本信息提交
			submitBase(form, loading, done) {
			if (this.polygons.length == 0) {
			//没有面的数据
			this.$refs.getMapData.isCheck = true;
			loading();
			} else {
			//如果有值，空间坐标转换
			let pol = this.polygons;
			let polLength = this.polygons.length - 1;
			let usePolygons = "";
			for (let k in pol) {
			usePolygons += pol[k].lng + "," + pol[k].lat;
			if (k != polLength) {
			usePolygons += ";";
			}
			}
			//设置坐标点
			form.position = usePolygons;
			console.log(form, 121222112212121);
			}
			// 修改
			update(form).then((res) => {
			if (res.data.success) {
			this.$message({
			message: "操作成功",
			type: "success",
			});
			this.refreshChange();
			done();
			} else {
			this.$message({
			message: "操作失败",
			type: "warning",
			});
			done();
			}
			});
			},
			setMapData(val) {
			this.LineData = val[0];
			this.PointData = val[1];
			},
			},
			mounted() {},
			created() {
			//初始化信息
			this.initData();
			},
			watch: {},
			};
			</script>

			<style lang="scss" scoped>
			.mapClass div label {
			display: none;
			}

			#getMapData {
			width: 80%;
			position: relative;
			height: 500px;
			top: 10px;
			}

			.el-collapse-item {
			padding-top: 15px !important;
			}

			.tab {
			position: relative;
			// border: 1px solid red;
			background-color: #fff;
			height: 92%;
			display: inline-block;
			width: 100%;
			overflow: hidden;
			top: -10px;
			}
			</style>

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>