From d717492e9ff7dfd56762e1c55a97081a502c871f Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 24 Mar 2022 11:58:37 +0800
Subject: [PATCH] +专题活动信息中选点bug+专题活动信息中字段补全
---
src/components/basemap/Draw.js | 1280 ++++++++++++++++++++
src/components/basemap/drawFence.js | 80 +
src/api/hd/baseMap.js | 62
src/components/basemap/tip.vue | 25
src/components/map/mainInThere.vue | 29
src/router/views/index.js | 247 ++-
src/components/basemap/mainInThere.vue | 352 +++++
src/views/hd/baseMap.vue | 632 ++++++++++
src/store/getters.js | 2
src/components/basemap/main.vue | 860 +++++++++++++
src/views/hd/baseMapMap.vue | 152 ++
src/store/modules/map.js | 16
12 files changed, 3,604 insertions(+), 133 deletions(-)
diff --git a/src/api/hd/baseMap.js b/src/api/hd/baseMap.js
new file mode 100644
index 0000000..b0b8d82
--- /dev/null
+++ b/src/api/hd/baseMap.js
@@ -0,0 +1,62 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+ return request({
+ url: '/api/hdmap/hdmap/list',
+ method: 'get',
+ params: {
+ ...params,
+ current,
+ size,
+ }
+ })
+}
+
+export const getHdName = (current, size, params) => {
+ return request({
+ url: '/api/blade-hd/hd/selectInList',
+ method: 'post',
+ params: {
+ ...params,
+ current,
+ size,
+ }
+ })
+}
+
+export const getDetail = (id) => {
+ return request({
+ url: '/api/hdmap/hdmap/detail',
+ method: 'get',
+ params: {
+ id
+ }
+ })
+}
+
+export const remove = (ids) => {
+ return request({
+ url: '/api/hdmap/hdmap/remove',
+ method: 'post',
+ params: {
+ ids,
+ }
+ })
+}
+
+export const add = (row) => {
+ return request({
+ url: '/api/hdmap/hdmap/save',
+ method: 'post',
+ data: row
+ })
+}
+
+
+export const update = (row) => {
+ return request({
+ url: '/api/hdmap/hdmap/update',
+ method: 'post',
+ data: row
+ })
+}
diff --git a/src/components/basemap/Draw.js b/src/components/basemap/Draw.js
new file mode 100644
index 0000000..ea28ce3
--- /dev/null
+++ b/src/components/basemap/Draw.js
@@ -0,0 +1,1280 @@
+var __extends =
+ (this && this.__extends) ||
+ (function () {
+ var extendStatics = function (d, b) {
+ extendStatics =
+ Object.setPrototypeOf ||
+ ({ __proto__: [] } instanceof Array &&
+ function (d, b) {
+ d.__proto__ = b;
+ }) ||
+ function (d, b) {
+ for (var p in b)
+ if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+ };
+ return extendStatics(d, b);
+ };
+ return function (d, b) {
+ if (typeof b !== "function" && b !== null)
+ throw new TypeError(
+ "Class extends value " + String(b) + " is not a constructor or null"
+ );
+ extendStatics(d, b);
+ function __() {
+ this.constructor = d;
+ }
+ d.prototype =
+ b === null
+ ? Object.create(b)
+ : ((__.prototype = b.prototype), new __());
+ };
+ })();
+/**
+ * @module ol/interaction/Draw
+ */
+import Circle from "ol/geom/Circle.js";
+import Event from "ol/events/Event.js";
+import EventType from "ol/events/EventType.js";
+import Feature from "ol/Feature.js";
+import GeometryType from "ol/geom/GeometryType.js";
+import InteractionProperty from "ol/interaction/Property.js";
+import LineString from "ol/geom/LineString.js";
+import MapBrowserEvent from "ol/MapBrowserEvent.js";
+import MapBrowserEventType from "ol/MapBrowserEventType.js";
+import MultiLineString from "ol/geom/MultiLineString.js";
+import MultiPoint from "ol/geom/MultiPoint.js";
+import MultiPolygon from "ol/geom/MultiPolygon.js";
+import Point from "ol/geom/Point.js";
+import PointerInteraction from "ol/interaction/Pointer.js";
+import Polygon, { fromCircle, makeRegular } from "ol/geom/Polygon.js";
+import VectorLayer from "ol/layer/Vector.js";
+import VectorSource from "ol/source/Vector.js";
+import { FALSE, TRUE } from "ol/functions.js";
+import { always, noModifierKeys, shiftKeyOnly } from "ol/events/condition.js";
+import {
+ boundingExtent,
+ getBottomLeft,
+ getBottomRight,
+ getTopLeft,
+ getTopRight,
+} from "ol/extent.js";
+import { createEditingStyle } from "ol/style/Style.js";
+import { fromUserCoordinate, getUserProjection } from "ol/proj.js";
+import { squaredDistance as squaredCoordinateDistance } from "ol/coordinate.js";
+/**
+ * @typedef {Object} Options
+ * @property {import("ol/geom/GeometryType.js").default} type Geometry type of
+ * the geometries being drawn with this instance.
+ * @property {number} [clickTolerance=6] The maximum distance in pixels between
+ * "down" and "up" for a "up" event to be considered a "click" event and
+ * actually add a point/vertex to the geometry being drawn. The default of `6`
+ * was chosen for the draw interaction to behave correctly on mouse as well as
+ * on touch devices.
+ * @property {import("ol/Collection.js").default<Feature>} [features]
+ * Destination collection for the drawn features.
+ * @property {VectorSource} [source] Destination source for
+ * the drawn features.
+ * @property {number} [dragVertexDelay=500] Delay in milliseconds after pointerdown
+ * before the current vertex can be dragged to its exact position.
+ * @property {number} [snapTolerance=12] Pixel distance for snapping to the
+ * drawing finish. Must be greater than `0`.
+ * @property {boolean} [stopClick=false] Stop click, singleclick, and
+ * doubleclick events from firing during drawing.
+ * @property {number} [maxPoints] The number of points that can be drawn before
+ * a polygon ring or line string is finished. By default there is no
+ * restriction.
+ * @property {number} [minPoints] The number of points that must be drawn
+ * before a polygon ring or line string can be finished. Default is `3` for
+ * polygon rings and `2` for line strings.
+ * @property {import("ol/events/condition.js").Condition} [finishCondition] A function
+ * that takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
+ * boolean to indicate whether the drawing can be finished. Not used when drawing
+ * POINT or MULTI_POINT geometries.
+ * @property {import("ol/style/Style.js").StyleLike} [style]
+ * Style for sketch features.
+ * @property {GeometryFunction} [geometryFunction]
+ * Function that is called when a geometry's coordinates are updated.
+ * @property {string} [geometryName] Geometry name to use for features created
+ * by the draw interaction.
+ * @property {import("ol/events/condition.js").Condition} [condition] A function that
+ * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a
+ * boolean to indicate whether that event should be handled.
+ * By default {@link module:ol/events/condition.noModifierKeys}, i.e. a click,
+ * adds a vertex or deactivates freehand drawing.
+ * @property {boolean} [freehand=false] Operate in freehand mode for lines,
+ * polygons, and circles. This makes the interaction always operate in freehand
+ * mode and takes precedence over any `freehandCondition` option.
+ * @property {import("ol/events/condition.js").Condition} [freehandCondition]
+ * Condition that activates freehand drawing for lines and polygons. This
+ * function takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and
+ * returns a boolean to indicate whether that event should be handled. The
+ * default is {@link module:ol/events/condition.shiftKeyOnly}, meaning that the
+ * Shift key activates freehand drawing.
+ * @property {boolean} [wrapX=false] Wrap the world horizontally on the sketch
+ * overlay.
+ */
+/**
+ * Coordinate type when drawing points.
+ * @typedef {import("ol/coordinate.js").Coordinate} PointCoordType
+ */
+/**
+ * Coordinate type when drawing lines.
+ * @typedef {Array<import("ol/coordinate.js").Coordinate>} LineCoordType
+ */
+/**
+ * Coordinate type when drawing polygons.
+ * @typedef {Array<Array<import("ol/coordinate.js").Coordinate>>} PolyCoordType
+ */
+/**
+ * Types used for drawing coordinates.
+ * @typedef {PointCoordType|LineCoordType|PolyCoordType} SketchCoordType
+ */
+/**
+ * Function that takes an array of coordinates and an optional existing geometry
+ * and a projection as arguments, and returns a geometry. The optional existing
+ * geometry is the geometry that is returned when the function is called without
+ * a second argument.
+ * @typedef {function(!SketchCoordType, import("ol/geom/SimpleGeometry.js").default,
+ * import("ol/proj/Projection.js").default):
+ * import("ol/geom/SimpleGeometry.js").default} GeometryFunction
+ */
+/**
+ * Draw mode. This collapses multi-part geometry types with their single-part
+ * cousins.
+ * @enum {string}
+ */
+var Mode = {
+ POINT: "Point",
+ LINE_STRING: "LineString",
+ POLYGON: "Polygon",
+ CIRCLE: "Circle",
+};
+/**
+ * @enum {string}
+ */
+var DrawEventType = {
+ /**
+ * Triggered upon feature draw start
+ * @event DrawEvent#drawstart
+ * @api
+ */
+ DRAWSTART: "drawstart",
+ /**
+ * Triggered upon feature draw end
+ * @event DrawEvent#drawend
+ * @api
+ */
+ DRAWEND: "drawend",
+ /**
+ * Triggered upon feature draw abortion
+ * @event DrawEvent#drawabort
+ * @api
+ */
+ DRAWABORT: "drawabort",
+};
+/**
+ * @classdesc
+ * Events emitted by {@link module:ol/interaction/Draw~Draw} instances are
+ * instances of this type.
+ */
+var DrawEvent = /** @class */ (function (_super) {
+ __extends(DrawEvent, _super);
+ /**
+ * @param {DrawEventType} type Type.
+ * @param {Feature} feature The feature drawn.
+ */
+ function DrawEvent(type, feature) {
+ var _this = _super.call(this, type) || this;
+ /**
+ * The feature being drawn.
+ * @type {Feature}
+ * @api
+ */
+ _this.feature = feature;
+ return _this;
+ }
+ return DrawEvent;
+})(Event);
+export { DrawEvent };
+/***
+ * @template Return
+ * @typedef {import("ol/Observable").OnSignature<import("ol/Observable").EventTypes, import("ol/events/Event.js").default, Return> &
+ * import("ol/Observable").OnSignature<import("ol/ObjectEventType").Types|
+ * 'change:active', import("ol/Object").ObjectEvent, Return> &
+ * import("ol/Observable").OnSignature<'drawabort'|'drawend'|'drawstart', DrawEvent, Return> &
+ * import("ol/Observable").CombinedOnSignature<import("ol/Observable").EventTypes|import("ol/ObjectEventType").Types|
+ * 'change:active'|'drawabort'|'drawend'|'drawstart', Return>} DrawOnSignature
+ */
+/**
+ * @classdesc
+ * Interaction for drawing feature geometries.
+ *
+ * @fires DrawEvent
+ * @api
+ */
+var Draw = /** @class */ (function (_super) {
+ __extends(Draw, _super);
+ /**
+ * @param {Options} options Options.
+ */
+ function Draw(options) {
+ var _this = this;
+ var pointerOptions = /** @type {import("./Pointer.js").Options} */ (
+ options
+ );
+ if (!pointerOptions.stopDown) {
+ pointerOptions.stopDown = FALSE;
+ }
+ _this = _super.call(this, pointerOptions) || this;
+ /***
+ * @type {DrawOnSignature<import("ol/events").EventsKey>}
+ */
+ _this.coordinate = options.coordinate;
+ /***
+ * 输出坐标
+ */
+ _this.coordinateOver = options.coordinateOver;
+ /***
+ * 结束绘画
+ */
+ _this.overDraw = false;
+ /***
+ * 控制结束绘画
+ */
+ _this.isPoint = options.isPoint;
+ /***
+ * 是否是点
+ */
+ _this.coordinateOverPoint = options.coordinateOverPoint;
+ /***
+ * 输出点
+ */
+ _this.on;
+ /***
+ * @type {DrawOnSignature<import("ol/events").EventsKey>}
+ */
+ _this.once;
+ /***
+ * @type {DrawOnSignature<void>}
+ */
+ _this.un;
+ /**
+ * @type {boolean}
+ * @private
+ */
+ _this.shouldHandle_ = false;
+ /**
+ * @type {import("ol/pixel.js").Pixel}
+ * @private
+ */
+ _this.downPx_ = null;
+ /**
+ * @type {?}
+ * @private
+ */
+ _this.downTimeout_;
+ /**
+ * @type {number|undefined}
+ * @private
+ */
+ _this.lastDragTime_;
+ /**
+ * Pointer type of the last pointermove event
+ * @type {string}
+ * @private
+ */
+ _this.pointerType_;
+ /**
+ * @type {boolean}
+ * @private
+ */
+ _this.freehand_ = false;
+ /**
+ * Target source for drawn features.
+ * @type {VectorSource}
+ * @private
+ */
+ _this.source_ = options.source ? options.source : null;
+ /**
+ * Target collection for drawn features.
+ * @type {import("ol/Collection.js").default<Feature>}
+ * @private
+ */
+ _this.features_ = options.features ? options.features : null;
+ /**
+ * Pixel distance for snapping.
+ * @type {number}
+ * @private
+ */
+ _this.snapTolerance_ = options.snapTolerance ? options.snapTolerance : 12;
+ /**
+ * Geometry type.
+ * @type {import("ol/geom/GeometryType.js").default}
+ * @private
+ */
+ _this.type_ = /** @type {import("ol/geom/GeometryType.js").default} */ (
+ options.type
+ );
+ /**
+ * Drawing mode (derived from geometry type.
+ * @type {Mode}
+ * @private
+ */
+ _this.mode_ = getMode(_this.type_);
+ /**
+ * Stop click, singleclick, and doubleclick events from firing during drawing.
+ * Default is `false`.
+ * @type {boolean}
+ * @private
+ */
+ _this.stopClick_ = !!options.stopClick;
+ /**
+ * The number of points that must be drawn before a polygon ring or line
+ * string can be finished. The default is 3 for polygon rings and 2 for
+ * line strings.
+ * @type {number}
+ * @private
+ */
+ _this.minPoints_ = options.minPoints
+ ? options.minPoints
+ : _this.mode_ === Mode.POLYGON
+ ? 3
+ : 2;
+ /**
+ * The number of points that can be drawn before a polygon ring or line string
+ * is finished. The default is no restriction.
+ * @type {number}
+ * @private
+ */
+ _this.maxPoints_ =
+ _this.mode_ === Mode.CIRCLE
+ ? 2
+ : options.maxPoints
+ ? options.maxPoints
+ : Infinity;
+ /**
+ * A function to decide if a potential finish coordinate is permissible
+ * @private
+ * @type {import("ol/events/condition.js").Condition}
+ */
+ _this.finishCondition_ = options.finishCondition
+ ? options.finishCondition
+ : TRUE;
+ var geometryFunction = options.geometryFunction;
+ if (!geometryFunction) {
+ var mode_1 = _this.mode_;
+ if (mode_1 === Mode.CIRCLE) {
+ /**
+ * @param {!LineCoordType} coordinates The coordinates.
+ * @param {import("ol/geom/SimpleGeometry.js").default|undefined} geometry Optional geometry.
+ * @param {import("ol/proj/Projection.js").default} projection The view projection.
+ * @return {import("ol/geom/SimpleGeometry.js").default} A geometry.
+ */
+ geometryFunction = function (coordinates, geometry, projection) {
+ var circle = geometry
+ ? /** @type {Circle} */ (geometry)
+ : new Circle([NaN, NaN]);
+ var center = fromUserCoordinate(coordinates[0], projection);
+ var squaredLength = squaredCoordinateDistance(
+ center,
+ fromUserCoordinate(coordinates[coordinates.length - 1], projection)
+ );
+ circle.setCenterAndRadius(center, Math.sqrt(squaredLength));
+ var userProjection = getUserProjection();
+ if (userProjection) {
+ circle.transform(projection, userProjection);
+ }
+ return circle;
+ };
+ } else {
+ var Constructor_1;
+ if (mode_1 === Mode.POINT) {
+ Constructor_1 = Point;
+ } else if (mode_1 === Mode.LINE_STRING) {
+ Constructor_1 = LineString;
+ } else if (mode_1 === Mode.POLYGON) {
+ Constructor_1 = Polygon;
+ }
+ /**
+ * @param {!LineCoordType} coordinates The coordinates.
+ * @param {import("ol/geom/SimpleGeometry.js").default|undefined} geometry Optional geometry.
+ * @param {import("ol/proj/Projection.js").default} projection The view projection.
+ * @return {import("ol/geom/SimpleGeometry.js").default} A geometry.
+ */
+ geometryFunction = function (coordinates, geometry, projection) {
+ if (geometry) {
+ if (mode_1 === Mode.POLYGON) {
+ if (coordinates[0].length) {
+ // Add a closing coordinate to match the first
+ geometry.setCoordinates([
+ coordinates[0].concat([coordinates[0][0]]),
+ ]);
+ } else {
+ geometry.setCoordinates([]);
+ }
+ } else {
+ geometry.setCoordinates(coordinates);
+ }
+ } else {
+ geometry = new Constructor_1(coordinates);
+ }
+ return geometry;
+ };
+ }
+ }
+ /**
+ * @type {GeometryFunction}
+ * @private
+ */
+ _this.geometryFunction_ = geometryFunction;
+ /**
+ * @type {number}
+ * @private
+ */
+ _this.dragVertexDelay_ =
+ options.dragVertexDelay !== undefined ? options.dragVertexDelay : 500;
+ /**
+ * Finish coordinate for the feature (first point for polygons, last point for
+ * linestrings).
+ * @type {import("ol/coordinate.js").Coordinate}
+ * @private
+ */
+ _this.finishCoordinate_ = null;
+ /**
+ * Sketch feature.
+ * @type {Feature}
+ * @private
+ */
+ _this.sketchFeature_ = null;
+ /**
+ * Sketch point.
+ * @type {Feature<Point>}
+ * @private
+ */
+ _this.sketchPoint_ = null;
+ /**
+ * Sketch coordinates. Used when drawing a line or polygon.
+ * @type {SketchCoordType}
+ * @private
+ */
+ _this.sketchCoords_ = null;
+ /**
+ * Sketch line. Used when drawing polygon.
+ * @type {Feature<LineString>}
+ * @private
+ */
+ _this.sketchLine_ = null;
+ /**
+ * Sketch line coordinates. Used when drawing a polygon or circle.
+ * @type {LineCoordType}
+ * @private
+ */
+ _this.sketchLineCoords_ = null;
+ /**
+ * Squared tolerance for handling up events. If the squared distance
+ * between a down and up event is greater than this tolerance, up events
+ * will not be handled.
+ * @type {number}
+ * @private
+ */
+ _this.squaredClickTolerance_ = options.clickTolerance
+ ? options.clickTolerance * options.clickTolerance
+ : 36;
+ /**
+ * Draw overlay where our sketch features are drawn.
+ * @type {VectorLayer}
+ * @private
+ */
+ _this.overlay_ = new VectorLayer({
+ source: new VectorSource({
+ useSpatialIndex: false,
+ wrapX: options.wrapX ? options.wrapX : false,
+ }),
+ style: options.style ? options.style : getDefaultStyleFunction(),
+ updateWhileInteracting: true,
+ });
+ /**
+ * Name of the geometry attribute for newly created features.
+ * @type {string|undefined}
+ * @private
+ */
+ _this.geometryName_ = options.geometryName;
+ /**
+ * @private
+ * @type {import("ol/events/condition.js").Condition}
+ */
+ _this.condition_ = options.condition ? options.condition : noModifierKeys;
+ /**
+ * @private
+ * @type {import("ol/events/condition.js").Condition}
+ */
+ _this.freehandCondition_;
+ if (options.freehand) {
+ _this.freehandCondition_ = always;
+ } else {
+ _this.freehandCondition_ = options.freehandCondition
+ ? options.freehandCondition
+ : shiftKeyOnly;
+ }
+ _this.addChangeListener(InteractionProperty.ACTIVE, _this.updateState_);
+ return _this;
+ }
+ /**
+ * Remove the interaction from its current map and attach it to the new map.
+ * Subclasses may set up event handlers to get notified about changes to
+ * the map here.
+ * @param {import("ol/PluggableMap.js").default} map Map.
+ */
+ Draw.prototype.setMap = function (map) {
+ _super.prototype.setMap.call(this, map);
+ this.updateState_();
+ };
+ /**
+ * Get the overlay layer that this interaction renders sketch features to.
+ * @return {VectorLayer} Overlay layer.
+ * @api
+ */
+ Draw.prototype.getOverlay = function () {
+ return this.overlay_;
+ };
+ /**
+ * Handles the {@link module:ol/MapBrowserEvent map browser event} and may actually draw or finish the drawing.
+ * @param {import("ol/MapBrowserEvent.js").default} event Map browser event.
+ * @return {boolean} `false` to stop event propagation.
+ * @api
+ */
+ Draw.prototype.controlDrawing = function (val) {
+ this.overDraw = val;
+ };
+
+ Draw.prototype.handleEvent = function (event) {
+ if (event.originalEvent.type === EventType.CONTEXTMENU) {
+ // Avoid context menu for long taps when drawing on mobile
+ event.originalEvent.preventDefault();
+ }
+ this.freehand_ =
+ this.mode_ !== Mode.POINT && this.freehandCondition_(event);
+ var move = event.type === MapBrowserEventType.POINTERMOVE;
+ var pass = true;
+ if (
+ !this.freehand_ &&
+ this.lastDragTime_ &&
+ event.type === MapBrowserEventType.POINTERDRAG
+ ) {
+ var now = Date.now();
+ if (now - this.lastDragTime_ >= this.dragVertexDelay_) {
+ this.downPx_ = event.pixel;
+ this.shouldHandle_ = !this.freehand_;
+ move = true;
+ } else {
+ this.lastDragTime_ = undefined;
+ }
+ if (this.shouldHandle_ && this.downTimeout_ !== undefined) {
+ clearTimeout(this.downTimeout_);
+ this.downTimeout_ = undefined;
+ }
+ }
+ if (
+ this.freehand_ &&
+ event.type === MapBrowserEventType.POINTERDRAG &&
+ this.sketchFeature_ !== null
+ ) {
+ if (this.overDraw) {
+ return;
+ }
+ this.addToDrawing_(event.coordinate);
+ pass = false;
+ } else if (
+ this.freehand_ &&
+ event.type === MapBrowserEventType.POINTERDOWN
+ ) {
+ pass = false;
+ } else if (move && this.getPointerCount() < 2) {
+ pass = event.type === MapBrowserEventType.POINTERMOVE;
+ if (pass && this.freehand_) {
+ if (this.overDraw) {
+ return;
+ }
+ this.handlePointerMove_(event);
+ if (this.shouldHandle_) {
+ // Avoid page scrolling when freehand drawing on mobile
+ event.originalEvent.preventDefault();
+ }
+ } else if (
+ event.originalEvent.pointerType === "mouse" ||
+ (event.type === MapBrowserEventType.POINTERDRAG &&
+ this.downTimeout_ === undefined)
+ ) {
+ if (this.overDraw) {
+ return;
+ }
+ this.handlePointerMove_(event);
+ }
+ } else if (event.type === MapBrowserEventType.DBLCLICK) {
+ pass = false;
+ }
+ return _super.prototype.handleEvent.call(this, event) && pass;
+ };
+ /**
+ * Handle pointer down events.
+ * @param {import("ol/MapBrowserEvent.js").default} event Event.
+ * @return {boolean} If the event was consumed.
+ */
+ Draw.prototype.handleDownEvent = function (event) {
+ // console.log(event.coordinate_, 'handleDownEvent')
+ this.shouldHandle_ = !this.freehand_;
+ if (this.freehand_) {
+ this.downPx_ = event.pixel;
+ if (!this.finishCoordinate_) {
+ this.startDrawing_(event.coordinate);
+ }
+ return true;
+ } else if (this.condition_(event)) {
+ this.lastDragTime_ = Date.now();
+ this.downTimeout_ = setTimeout(
+ function () {
+ this.handlePointerMove_(
+ new MapBrowserEvent(
+ MapBrowserEventType.POINTERMOVE,
+ event.map,
+ event.originalEvent,
+ false,
+ event.frameState
+ )
+ );
+ }.bind(this),
+ this.dragVertexDelay_
+ );
+ this.downPx_ = event.pixel;
+ return true;
+ } else {
+ this.lastDragTime_ = undefined;
+ return false;
+ }
+ };
+ /**
+ * Handle pointer up events.
+ * @param {import("ol/MapBrowserEvent.js").default} event Event.
+ * @return {boolean} If the event was consumed.
+ */
+ Draw.prototype.handleUpEvent = function (event) {
+ // console.log(event.coordinate_, 'handleUpEvent')//获取坐标点
+ if (this.isPoint) {
+ this.coordinateOverPoint(event);
+ this.finishDrawing();
+ return;
+ }
+ var pass = true;
+ if (this.getPointerCount() === 0) {
+ if (this.downTimeout_) {
+ clearTimeout(this.downTimeout_);
+ this.downTimeout_ = undefined;
+ }
+ this.handlePointerMove_(event);
+ if (this.shouldHandle_) {
+ var startingToDraw = !this.finishCoordinate_;
+ if (startingToDraw) {
+ //开始后抬起
+ // this.coordinateOverPoint(event);
+ this.coordinate(event);
+ this.startDrawing_(event.coordinate);
+ }
+ if (!startingToDraw && this.freehand_) {
+ this.finishDrawing();
+ } else if (
+ !this.freehand_ &&
+ (!startingToDraw || this.mode_ === Mode.POINT)
+ ) {
+ //选择后抬起
+ this.coordinate(event);
+ if (this.atFinish_(event.pixel)) {
+ //结束绘画
+ this.coordinateOver("结束");
+ if (this.finishCondition_(event)) {
+ this.finishDrawing();
+ }
+ } else {
+ this.addToDrawing_(event.coordinate);
+ }
+ }
+ pass = false;
+ } else if (this.freehand_) {
+ this.abortDrawing();
+ }
+ }
+ if (!pass && this.stopClick_) {
+ event.preventDefault();
+ }
+ return pass;
+ };
+ // Draw.prototype.getCoordinate = function (fn) {
+ // this.coordinate = fn;
+ // console.log(this.coordinate)
+ // }
+ /**
+ * Handle move events.
+ * @param {import("ol/MapBrowserEvent.js").default} event A move event.
+ * @private
+ */
+ Draw.prototype.handlePointerMove_ = function (event) {
+ this.pointerType_ = event.originalEvent.pointerType;
+ if (
+ this.downPx_ &&
+ ((!this.freehand_ && this.shouldHandle_) ||
+ (this.freehand_ && !this.shouldHandle_))
+ ) {
+ var downPx = this.downPx_;
+ var clickPx = event.pixel;
+ var dx = downPx[0] - clickPx[0];
+ var dy = downPx[1] - clickPx[1];
+ var squaredDistance = dx * dx + dy * dy;
+ this.shouldHandle_ = this.freehand_
+ ? squaredDistance > this.squaredClickTolerance_
+ : squaredDistance <= this.squaredClickTolerance_;
+ if (!this.shouldHandle_) {
+ return;
+ }
+ }
+ if (this.finishCoordinate_) {
+ this.modifyDrawing_(event.coordinate);
+ } else {
+ this.createOrUpdateSketchPoint_(event.coordinate.slice());
+ }
+ };
+ /**
+ * Determine if an event is within the snapping tolerance of the start coord.
+ * @param {import("ol/pixel.js").Pixel} pixel Pixel.
+ * @return {boolean} The event is within the snapping tolerance of the start.
+ * @private
+ */
+ Draw.prototype.atFinish_ = function (pixel) {
+ // console.log(pixel, 879789)
+ var at = false;
+ if (this.sketchFeature_) {
+ var potentiallyDone = false;
+ var potentiallyFinishCoordinates = [this.finishCoordinate_];
+ var mode = this.mode_;
+ if (mode === Mode.POINT) {
+ at = true;
+ } else if (mode === Mode.CIRCLE) {
+ at = this.sketchCoords_.length === 2;
+ } else if (mode === Mode.LINE_STRING) {
+ potentiallyDone = this.sketchCoords_.length > this.minPoints_;
+ } else if (mode === Mode.POLYGON) {
+ var sketchCoords = /** @type {PolyCoordType} */ (this.sketchCoords_);
+ potentiallyDone = sketchCoords[0].length > this.minPoints_;
+ potentiallyFinishCoordinates = [
+ sketchCoords[0][0],
+ sketchCoords[0][sketchCoords[0].length - 2],
+ ];
+ }
+ if (potentiallyDone) {
+ var map = this.getMap();
+ for (var i = 0, ii = potentiallyFinishCoordinates.length; i < ii; i++) {
+ var finishCoordinate = potentiallyFinishCoordinates[i];
+ var finishPixel = map.getPixelFromCoordinate(finishCoordinate);
+ var dx = pixel[0] - finishPixel[0];
+ var dy = pixel[1] - finishPixel[1];
+ var snapTolerance = this.freehand_ ? 1 : this.snapTolerance_;
+ at = Math.sqrt(dx * dx + dy * dy) <= snapTolerance;
+ if (at) {
+ this.finishCoordinate_ = finishCoordinate;
+ break;
+ }
+ }
+ }
+ }
+ return at;
+ };
+ /**
+ * @param {import("ol/coordinate").Coordinate} coordinates Coordinate.
+ * @private
+ */
+ Draw.prototype.createOrUpdateSketchPoint_ = function (coordinates) {
+ if (!this.sketchPoint_) {
+ this.sketchPoint_ = new Feature(new Point(coordinates));
+ this.updateSketchFeatures_();
+ } else {
+ var sketchPointGeom = this.sketchPoint_.getGeometry();
+ sketchPointGeom.setCoordinates(coordinates);
+ }
+ };
+ /**
+ * @param {import("ol/geom/Polygon.js").default} geometry Polygon geometry.
+ * @private
+ */
+ Draw.prototype.createOrUpdateCustomSketchLine_ = function (geometry) {
+ if (!this.sketchLine_) {
+ this.sketchLine_ = new Feature();
+ }
+ var ring = geometry.getLinearRing(0);
+ var sketchLineGeom = this.sketchLine_.getGeometry();
+ if (!sketchLineGeom) {
+ sketchLineGeom = new LineString(
+ ring.getFlatCoordinates(),
+ ring.getLayout()
+ );
+ this.sketchLine_.setGeometry(sketchLineGeom);
+ } else {
+ sketchLineGeom.setFlatCoordinates(
+ ring.getLayout(),
+ ring.getFlatCoordinates()
+ );
+ sketchLineGeom.changed();
+ }
+ };
+ /**
+ * Start the drawing.
+ * @param {import("ol/coordinate.js").Coordinate} start Start coordinate.
+ * @private
+ */
+ Draw.prototype.startDrawing_ = function (start) {
+ if (this.overDraw) {
+ return;
+ }
+ var projection = this.getMap().getView().getProjection();
+ this.finishCoordinate_ = start;
+ if (this.mode_ === Mode.POINT) {
+ this.sketchCoords_ = start.slice();
+ } else if (this.mode_ === Mode.POLYGON) {
+ this.sketchCoords_ = [[start.slice(), start.slice()]];
+ this.sketchLineCoords_ = this.sketchCoords_[0];
+ } else {
+ this.sketchCoords_ = [start.slice(), start.slice()];
+ }
+ if (this.sketchLineCoords_) {
+ this.sketchLine_ = new Feature(new LineString(this.sketchLineCoords_));
+ }
+ var geometry = this.geometryFunction_(
+ this.sketchCoords_,
+ undefined,
+ projection
+ );
+ this.sketchFeature_ = new Feature();
+ if (this.geometryName_) {
+ this.sketchFeature_.setGeometryName(this.geometryName_);
+ }
+ this.sketchFeature_.setGeometry(geometry);
+ this.updateSketchFeatures_();
+ this.dispatchEvent(
+ new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_)
+ );
+ };
+ /**
+ * Modify the drawing.
+ * @param {import("ol/coordinate.js").Coordinate} coordinate Coordinate.
+ * @private
+ */
+ Draw.prototype.modifyDrawing_ = function (coordinate) {
+ var map = this.getMap();
+ var geometry = this.sketchFeature_.getGeometry();
+ var projection = map.getView().getProjection();
+ var coordinates, last;
+ if (this.mode_ === Mode.POINT) {
+ last = this.sketchCoords_;
+ } else if (this.mode_ === Mode.POLYGON) {
+ coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
+ last = coordinates[coordinates.length - 1];
+ if (this.atFinish_(map.getPixelFromCoordinate(coordinate))) {
+ // snap to finish
+ coordinate = this.finishCoordinate_.slice();
+ }
+ } else {
+ coordinates = this.sketchCoords_;
+ last = coordinates[coordinates.length - 1];
+ }
+ last[0] = coordinate[0];
+ last[1] = coordinate[1];
+ this.geometryFunction_(
+ /** @type {!LineCoordType} */ (this.sketchCoords_),
+ geometry,
+ projection
+ );
+ if (this.sketchPoint_) {
+ var sketchPointGeom = this.sketchPoint_.getGeometry();
+ sketchPointGeom.setCoordinates(coordinate);
+ }
+ if (
+ geometry.getType() === GeometryType.POLYGON &&
+ this.mode_ !== Mode.POLYGON
+ ) {
+ this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
+ } else if (this.sketchLineCoords_) {
+ var sketchLineGeom = this.sketchLine_.getGeometry();
+ sketchLineGeom.setCoordinates(this.sketchLineCoords_);
+ }
+ this.updateSketchFeatures_();
+ };
+ /**
+ * Add a new coordinate to the drawing.
+ * @param {!PointCoordType} coordinate Coordinate
+ * @private
+ */
+ Draw.prototype.addToDrawing_ = function (coordinate) {
+ var geometry = this.sketchFeature_.getGeometry();
+ var projection = this.getMap().getView().getProjection();
+ var done;
+ var coordinates;
+ var mode = this.mode_;
+ if (mode === Mode.LINE_STRING || mode === Mode.CIRCLE) {
+ this.finishCoordinate_ = coordinate.slice();
+ coordinates = /** @type {LineCoordType} */ (this.sketchCoords_);
+ if (coordinates.length >= this.maxPoints_) {
+ if (this.freehand_) {
+ coordinates.pop();
+ } else {
+ done = true;
+ }
+ }
+ coordinates.push(coordinate.slice());
+ this.geometryFunction_(coordinates, geometry, projection);
+ } else if (mode === Mode.POLYGON) {
+ coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
+ if (coordinates.length >= this.maxPoints_) {
+ if (this.freehand_) {
+ coordinates.pop();
+ } else {
+ done = true;
+ }
+ }
+ coordinates.push(coordinate.slice());
+ if (done) {
+ this.finishCoordinate_ = coordinates[0];
+ }
+ this.geometryFunction_(this.sketchCoords_, geometry, projection);
+ }
+ this.createOrUpdateSketchPoint_(coordinate.slice());
+ this.updateSketchFeatures_();
+ if (done) {
+ this.finishDrawing();
+ }
+ };
+ /**
+ * Remove last point of the feature currently being drawn. Does not do anything when
+ * drawing POINT or MULTI_POINT geometries.
+ * @api
+ */
+ Draw.prototype.removeLastPoint = function () {
+ if (!this.sketchFeature_) {
+ return;
+ }
+ var geometry = this.sketchFeature_.getGeometry();
+ var projection = this.getMap().getView().getProjection();
+ var coordinates;
+ var mode = this.mode_;
+ if (mode === Mode.LINE_STRING || mode === Mode.CIRCLE) {
+ coordinates = /** @type {LineCoordType} */ (this.sketchCoords_);
+ coordinates.splice(-2, 1);
+ if (coordinates.length >= 2) {
+ this.finishCoordinate_ = coordinates[coordinates.length - 2].slice();
+ var finishCoordinate = this.finishCoordinate_.slice();
+ coordinates[coordinates.length - 1] = finishCoordinate;
+ this.createOrUpdateSketchPoint_(finishCoordinate);
+ }
+ this.geometryFunction_(coordinates, geometry, projection);
+ if (geometry.getType() === GeometryType.POLYGON && this.sketchLine_) {
+ this.createOrUpdateCustomSketchLine_(/** @type {Polygon} */ (geometry));
+ }
+ } else if (mode === Mode.POLYGON) {
+ coordinates = /** @type {PolyCoordType} */ (this.sketchCoords_)[0];
+ coordinates.splice(-2, 1);
+ var sketchLineGeom = this.sketchLine_.getGeometry();
+ if (coordinates.length >= 2) {
+ var finishCoordinate = coordinates[coordinates.length - 2].slice();
+ coordinates[coordinates.length - 1] = finishCoordinate;
+ this.createOrUpdateSketchPoint_(finishCoordinate);
+ }
+ sketchLineGeom.setCoordinates(coordinates);
+ this.geometryFunction_(this.sketchCoords_, geometry, projection);
+ }
+ if (coordinates.length === 1) {
+ this.abortDrawing();
+ }
+ this.updateSketchFeatures_();
+ };
+ /**
+ * Stop drawing and add the sketch feature to the target layer.
+ * The {@link module:ol/interaction/Draw~DrawEventType.DRAWEND} event is
+ * dispatched before inserting the feature.
+ * @api
+ */
+ Draw.prototype.finishDrawing = function () {
+ // console.log("finishDrawing")
+ var sketchFeature = this.abortDrawing_();
+ if (!sketchFeature) {
+ return;
+ }
+ var coordinates = this.sketchCoords_;
+ var geometry = sketchFeature.getGeometry();
+ var projection = this.getMap().getView().getProjection();
+ if (this.mode_ === Mode.LINE_STRING) {
+ // remove the redundant last point
+ coordinates.pop();
+ this.geometryFunction_(coordinates, geometry, projection);
+ } else if (this.mode_ === Mode.POLYGON) {
+ // remove the redundant last point in ring
+ /** @type {PolyCoordType} */ (coordinates)[0].pop();
+ this.geometryFunction_(coordinates, geometry, projection);
+ coordinates = geometry.getCoordinates();
+ }
+ // cast multi-part geometries
+ if (this.type_ === GeometryType.MULTI_POINT) {
+ sketchFeature.setGeometry(
+ new MultiPoint([/** @type {PointCoordType} */ (coordinates)])
+ );
+ } else if (this.type_ === GeometryType.MULTI_LINE_STRING) {
+ sketchFeature.setGeometry(
+ new MultiLineString([/** @type {LineCoordType} */ (coordinates)])
+ );
+ } else if (this.type_ === GeometryType.MULTI_POLYGON) {
+ sketchFeature.setGeometry(
+ new MultiPolygon([/** @type {PolyCoordType} */ (coordinates)])
+ );
+ }
+ // First dispatch event to allow full set up of feature
+ this.dispatchEvent(new DrawEvent(DrawEventType.DRAWEND, sketchFeature));
+ // Then insert feature
+ if (this.features_) {
+ this.features_.push(sketchFeature);
+ }
+ if (this.source_) {
+ this.source_.addFeature(sketchFeature);
+ }
+ };
+ /**
+ * Stop drawing without adding the sketch feature to the target layer.
+ * @return {Feature} The sketch feature (or null if none).
+ * @private
+ */
+ Draw.prototype.abortDrawing_ = function () {
+ this.finishCoordinate_ = null;
+ var sketchFeature = this.sketchFeature_;
+ this.sketchFeature_ = null;
+ this.sketchPoint_ = null;
+ this.sketchLine_ = null;
+ this.overlay_.getSource().clear(true);
+ return sketchFeature;
+ };
+ /**
+ * Stop drawing without adding the sketch feature to the target layer.
+ * @api
+ */
+ Draw.prototype.abortDrawing = function () {
+ var sketchFeature = this.abortDrawing_();
+ if (sketchFeature) {
+ this.dispatchEvent(new DrawEvent(DrawEventType.DRAWABORT, sketchFeature));
+ }
+ };
+ /**
+ * Append coordinates to the end of the geometry that is currently being drawn.
+ * This can be used when drawing LineStrings or Polygons. Coordinates will
+ * either be appended to the current LineString or the outer ring of the current
+ * Polygon. If no geometry is being drawn, a new one will be created.
+ * @param {!LineCoordType} coordinates Linear coordinates to be appended to
+ * the coordinate array.
+ * @api
+ */
+ Draw.prototype.appendCoordinates = function (coordinates) {
+ var mode = this.mode_;
+ var newDrawing = !this.sketchFeature_;
+ if (newDrawing) {
+ this.startDrawing_(coordinates[0]);
+ }
+ /** @type {LineCoordType} */
+ var sketchCoords;
+ if (mode === Mode.LINE_STRING || mode === Mode.CIRCLE) {
+ sketchCoords = /** @type {LineCoordType} */ (this.sketchCoords_);
+ } else if (mode === Mode.POLYGON) {
+ sketchCoords =
+ this.sketchCoords_ && this.sketchCoords_.length
+ ? /** @type {PolyCoordType} */ (this.sketchCoords_)[0]
+ : [];
+ } else {
+ return;
+ }
+ if (newDrawing) {
+ sketchCoords.shift();
+ }
+ // Remove last coordinate from sketch drawing (this coordinate follows cursor position)
+ sketchCoords.pop();
+ // Append coordinate list
+ for (var i = 0; i < coordinates.length; i++) {
+ this.addToDrawing_(coordinates[i]);
+ }
+ var ending = coordinates[coordinates.length - 1];
+ // Duplicate last coordinate for sketch drawing (cursor position)
+ this.addToDrawing_(ending);
+ this.modifyDrawing_(ending);
+ };
+ /**
+ * Initiate draw mode by starting from an existing geometry which will
+ * receive new additional points. This only works on features with
+ * `LineString` geometries, where the interaction will extend lines by adding
+ * points to the end of the coordinates array.
+ * This will change the original feature, instead of drawing a copy.
+ *
+ * The function will dispatch a `drawstart` event.
+ *
+ * @param {!Feature<LineString>} feature Feature to be extended.
+ * @api
+ */
+ Draw.prototype.extend = function (feature) {
+ var geometry = feature.getGeometry();
+ var lineString = geometry;
+ this.sketchFeature_ = feature;
+ this.sketchCoords_ = lineString.getCoordinates();
+ var last = this.sketchCoords_[this.sketchCoords_.length - 1];
+ this.finishCoordinate_ = last.slice();
+ this.sketchCoords_.push(last.slice());
+ this.sketchPoint_ = new Feature(new Point(last));
+ this.updateSketchFeatures_();
+ this.dispatchEvent(
+ new DrawEvent(DrawEventType.DRAWSTART, this.sketchFeature_)
+ );
+ };
+ /**
+ * Redraw the sketch features.
+ * @private
+ */
+ Draw.prototype.updateSketchFeatures_ = function () {
+ var sketchFeatures = [];
+ if (this.sketchFeature_) {
+ sketchFeatures.push(this.sketchFeature_);
+ }
+ if (this.sketchLine_) {
+ sketchFeatures.push(this.sketchLine_);
+ }
+ if (this.sketchPoint_) {
+ sketchFeatures.push(this.sketchPoint_);
+ }
+ var overlaySource = this.overlay_.getSource();
+ overlaySource.clear(true);
+ overlaySource.addFeatures(sketchFeatures);
+ };
+ /**
+ * @private
+ */
+ Draw.prototype.updateState_ = function () {
+ var map = this.getMap();
+ var active = this.getActive();
+ if (!map || !active) {
+ this.abortDrawing();
+ }
+ this.overlay_.setMap(active ? map : null);
+ };
+ return Draw;
+})(PointerInteraction);
+/**
+ * @return {import("ol/style/Style.js").StyleFunction} Styles.
+ */
+function getDefaultStyleFunction() {
+ var styles = createEditingStyle();
+ return function (feature, resolution) {
+ return styles[feature.getGeometry().getType()];
+ };
+}
+/**
+ * Create a `geometryFunction` for `type: 'Circle'` that will create a regular
+ * polygon with a user specified number of sides and start angle instead of a
+ * `import("ol/geom/Circle.js").Circle` geometry.
+ * @param {number} [opt_sides] Number of sides of the regular polygon.
+ * Default is 32.
+ * @param {number} [opt_angle] Angle of the first point in counter-clockwise
+ * radians. 0 means East.
+ * Default is the angle defined by the heading from the center of the
+ * regular polygon to the current pointer position.
+ * @return {GeometryFunction} Function that draws a polygon.
+ * @api
+ */
+export function createRegularPolygon(opt_sides, opt_angle) {
+ return function (coordinates, opt_geometry, projection) {
+ var center = fromUserCoordinate(
+ /** @type {LineCoordType} */ (coordinates)[0],
+ projection
+ );
+ var end = fromUserCoordinate(
+ /** @type {LineCoordType} */ (coordinates)[coordinates.length - 1],
+ projection
+ );
+ var radius = Math.sqrt(squaredCoordinateDistance(center, end));
+ var geometry = opt_geometry
+ ? /** @type {Polygon} */ (opt_geometry)
+ : fromCircle(new Circle(center), opt_sides);
+ var angle = opt_angle;
+ if (!opt_angle && opt_angle !== 0) {
+ var x = end[0] - center[0];
+ var y = end[1] - center[1];
+ angle = Math.atan2(y, x);
+ }
+ makeRegular(geometry, center, radius, angle);
+ var userProjection = getUserProjection();
+ if (userProjection) {
+ geometry.transform(projection, userProjection);
+ }
+ return geometry;
+ };
+}
+/**
+ * Create a `geometryFunction` that will create a box-shaped polygon (aligned
+ * with the coordinate system axes). Use this with the draw interaction and
+ * `type: 'Circle'` to return a box instead of a circle geometry.
+ * @return {GeometryFunction} Function that draws a box-shaped polygon.
+ * @api
+ */
+export function createBox() {
+ return function (coordinates, opt_geometry, projection) {
+ var extent = boundingExtent(
+ /** @type {LineCoordType} */ ([
+ coordinates[0],
+ coordinates[coordinates.length - 1],
+ ]).map(function (coordinate) {
+ return fromUserCoordinate(coordinate, projection);
+ })
+ );
+ var boxCoordinates = [
+ [
+ getBottomLeft(extent),
+ getBottomRight(extent),
+ getTopRight(extent),
+ getTopLeft(extent),
+ getBottomLeft(extent),
+ ],
+ ];
+ var geometry = opt_geometry;
+ if (geometry) {
+ geometry.setCoordinates(boxCoordinates);
+ } else {
+ geometry = new Polygon(boxCoordinates);
+ }
+ var userProjection = getUserProjection();
+ if (userProjection) {
+ geometry.transform(projection, userProjection);
+ }
+ return geometry;
+ };
+}
+/**
+ * Get the drawing mode. The mode for multi-part geometries is the same as for
+ * their single-part cousins.
+ * @param {import("ol/geom/GeometryType.js").default} type Geometry type.
+ * @return {Mode} Drawing mode.
+ */
+function getMode(type) {
+ switch (type) {
+ case GeometryType.POINT:
+ case GeometryType.MULTI_POINT:
+ return Mode.POINT;
+ case GeometryType.LINE_STRING:
+ case GeometryType.MULTI_LINE_STRING:
+ return Mode.LINE_STRING;
+ case GeometryType.POLYGON:
+ case GeometryType.MULTI_POLYGON:
+ return Mode.POLYGON;
+ case GeometryType.CIRCLE:
+ return Mode.CIRCLE;
+ default:
+ throw new Error("Invalid type: " + type);
+ }
+}
+export default Draw;
+//# sourceMappingURL=Draw.js.map
diff --git a/src/components/basemap/drawFence.js b/src/components/basemap/drawFence.js
new file mode 100644
index 0000000..a5c76a0
--- /dev/null
+++ b/src/components/basemap/drawFence.js
@@ -0,0 +1,80 @@
+import ol from "ol";
+class drawFence {
+ constructor(props) {
+ //这里初始化class的时候需要传map对象进来
+ this.map = props;
+ this.source;
+ this.fenceLayer;
+ this.draw;
+ //样式
+ this.fenceStyle = new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: 'rgba(255, 255, 255, 0.2)'
+ }),
+ stroke: new ol.style.Stroke({
+ color: '#ffcc33',
+ width: 2
+ }),
+ image: new ol.style.Circle({
+ radius: 7,
+ fill: new ol.style.Fill({
+ color: '#ffcc33'
+ })
+ })
+ })
+ this.init()
+ }
+ init() {
+ //临时图层的数据源
+ this.source = new ol.source.Vector();
+ //新建临时图层，并设置临时图层渲染各种要素的样式
+ this.fenceLayer = new ol.layer.Vector({
+ source: this.source,
+ style: this.fenceStyle
+ });
+ this.map.addLayer(this.fenceLayer)
+ }
+ drawingEnd(evt) {
+ let geo = evt.feature.getGeometry()
+ let type = geo.getType(); //获取类型
+ console.log(geo)
+ //根据不同的类型执行不同的操作
+ const handle = {
+ 'Circle': () => {
+ //获取中心点和半径
+ let center = geo.getCenter()
+ let radius = geo.getRadius()
+ console.log(center, radius)
+ },
+ 'Polygon': () => {
+ //获取坐标点
+ let points = geo.getCoordinates()
+ console.log(points)
+ },
+ 'LineString': () => {
+ let points = geo.getCoordinates()
+ console.log(points)
+ }
+ }
+ if (handle[type]) handle[type]()
+ this.closeDraw()
+ }
+ closeDraw() {
+ this.map.removeInteraction(this.draw);
+ }
+ //画图
+ drawingFence(type) {
+ this.draw = new ol.interaction.Draw({
+ source: this.source, //设置要素源，绘制结束后将绘制的要素添加到临时图层
+ type: type, //绘制的类型
+ });
+ this.map.addInteraction(this.draw);
+ const that = this;
+ //绘图结束事件回调
+ this.draw.on('drawend', function (evt) {
+ that.drawingEnd(evt)
+ });
+ }
+}
+
+export default drawFence;
\ No newline at end of file
diff --git a/src/components/basemap/main.vue b/src/components/basemap/main.vue
new file mode 100644
index 0000000..6915f02
--- /dev/null
+++ b/src/components/basemap/main.vue
@@ -0,0 +1,860 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: song
+ * @Date: 2021-04-08 15:14:57
+ * @LastEditors: song
+ * @LastEditTime: 2021-04-24 11:59:43
+-->
+<template>
+ <div id="map" style="height: calc(100% - 40px)">
+ <div class="controlMap">
+ <el-button-group v-if="false">
+ <el-button
+ type="primary"
+ icon="el-icon-finished"
+ @click="openDrawLineMethod"
+ :class="[
+ 'openDrawsb',
+ openDrawChiose == 'openDrawLine' ? 'activeDraw' : '',
+ ]"
+ >规划路线</el-button
+ >
+ <el-button
+ type="primary"
+ @click="openDrawPointMethod"
+ icon="el-icon-coordinate"
+ :class="[
+ 'openDrawsb',
+ openDrawChiose == 'openDrawPoint' ? 'activeDraw' : '',
+ ]"
+ >规划标点</el-button
+ >
+ <!-- <el-button type="primary" icon="el-icon-share"></el-button>
+ <el-button type="primary" icon="el-icon-delete"></el-button> -->
+ </el-button-group>
+ <el-button-group id="openDrawLine" style="display: none">
+ <el-button
+ type="primary"
+ icon="el-icon-edit"
+ @click="getTypeSelected"
+ :disabled="beginDraw"
+ >{{ butTitle }}</el-button
+ >
+ <el-button
+ type="primary"
+ :disabled="!beginDraw"
+ @click="stopDraw"
+ icon="el-icon-delete"
+ >取消</el-button
+ >
+ <!-- <el-button type="primary" icon="el-icon-share"></el-button>
+ <el-button type="primary" icon="el-icon-delete"></el-button> -->
+ </el-button-group>
+ <el-button-group id="openDrawPoiton" style="display: none">
+ <el-button
+ type="primary"
+ icon="el-icon-edit"
+ @click="getTypeSelectedPoint"
+ :disabled="beginDraw"
+ >{{ butTitlePoint }}</el-button
+ >
+ <el-button
+ type="primary"
+ :disabled="!beginDraw"
+ @click="stopDraw"
+ icon="el-icon-delete"
+ >取消</el-button
+ >
+ <!-- <el-button type="primary" icon="el-icon-share"></el-button>
+ <el-button type="primary" icon="el-icon-delete"></el-button> -->
+ </el-button-group>
+ </div>
+ <el-button-group id="dataConfirm" style="display: none">
+ <!-- v-show="butTitle == '重新绘画' || butTitlePoint == '重新标点'" -->
+ <el-button type="success" icon="el-icon-check" @click="useMapData"
+ >确定选择</el-button
+ >
+ <el-button
+ type="danger"
+ @click="clearUseMapData"
+ icon="el-icon-refresh-right"
+ >清空</el-button
+ >
+ </el-button-group>
+ <!-- <el-button type="primary" icon="el-icon-share"></el-button>
+ <el-button type="primary" icon="el-icon-delete"></el-button> -->
+ <tip v-show="showTip" :title="tipTitle" :position="position"></tip>
+ </div>
+</template>
+<script>
+import OLCesium from "olcs/OLCesium.js";
+import "ol/ol.css";
+import OlView from "ol/View.js";
+import XYZ from "ol/source/XYZ";
+import OlLayerTile from "ol/layer/Tile.js";
+import OlMap from "ol/Map.js";
+import tip from "./tip.vue";
+import {
+ // eslint-disable-next-line no-unused-vars
+ defaults as OlControlDefaults,
+ defaults,
+ // 全屏控件
+ FullScreen,
+ // 比例尺控件
+ ScaleLine,
+ // 缩放滚动条控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomSlider,
+ // 鼠标位置控件
+ // eslint-disable-next-line no-unused-vars
+ MousePosition,
+ // -地图属性控件
+ Attribution,
+ // 鹰眼控件
+ // eslint-disable-next-line no-unused-vars
+ OverviewMap,
+ // 缩放到范围控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomToExtent,
+ Rotate,
+} from "ol/control.js";
+
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+
+import { OSM, TileWMS, Vector } from "ol/source";
+// import Draw from "ol/interaction/Draw";
+import Draw from "./Draw";
+
+import Feature from "ol/Feature.js";
+import Point from "ol/geom/Point.js";
+import LineString from "ol/geom/LineString.js";
+import { Icon, Style, Fill, Stroke } from "ol/style.js";
+
+// import drawFence from "./drawFence";
+
+import OlFeature from "ol/Feature";
+import OlGeomPoint from "ol/geom/Point";
+// import OlLayerVector from "ol/layer/Vector";
+// import OlSourceVector from "ol/source/Vector";
+import OlStyleStyle from "ol/style/Style";
+import OlStyleIcon from "ol/style/Icon";
+// // 用来添加相关文字描述的
+// import Text from "ol/style/Text";
+// // import Fill from "ol/style/Fill";
+// import Cesium from "libs/Cesium/Cesium.js";
+
+export default {
+ name: "Map",
+ components: {
+ tip,
+ },
+ data() {
+ return {
+ gunAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ peopleAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ carAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ peopleLineAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ beginsPoint: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+
+ // 存储新增点，线，面，数据的地方
+ // polygonData: [],
+ // polygonFlag: false,
+ // editToolbar: null,
+ // addPolygonEntitys: null,
+
+ typeSelected: "LineString",
+ drawLayer: null,
+ draw: null,
+ coordinates: [],
+ coordinatesStr: "",
+ beginDraw: false,
+ butTitle: "开始绘画",
+ view: "",
+ // map: null,
+
+ showTip: false,
+ tipTitle: "",
+ position: {
+ w: 200,
+ h: 10,
+ },
+ // openDrawChiose: "", //openDrawPoint openDrawLine
+ openDrawLine: false,
+ openDrawPoint: false,
+
+ butTitlePoint: "选择标点",
+ olLayer: null, //点图层
+
+ nowIndex: "", //返回第几个
+
+ fromView: false, //若是查看 不显示更改按钮
+ };
+ },
+ computed: {
+ openDrawChiose() {
+ if (this.openDrawLine) {
+ return "openDrawLine";
+ } else if (this.openDrawPoint) {
+ return "openDrawPoint";
+ } else {
+ return "";
+ }
+ },
+ },
+ mounted() {
+ const ol2d = new OlMap({
+ layers: [
+ // new OlLayerTile({
+ // zIndex: 4,
+ // title: "影像",
+ // source: new XYZ({
+ // url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
+ // }),
+ // }),
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: "道路+中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
+ new OlLayerTile({
+ zIndex: 4,
+ title: "矢量",
+ source: new XYZ({
+ url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
+ // url: "/localData/sl/{z}/{x}/{y}.png",
+ tileUrlFunction: function (tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = Math.pow(2, z) + tileCoord[2];
+ return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
+ },
+ }),
+ }),
+ new OlLayerTile({
+ zIndex: 5,
+ title: "中文注记",
+ source: new XYZ({
+ url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ }),
+ }),
+ ],
+
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ // new FullScreen(),
+ // new ScaleLine(),
+ // new MousePosition(),
+ // new Rotate(),
+ // new Attribution()
+ ]),
+ target: "map",
+ view: new OlView({
+ center: [0, 0],
+ zoom: 2,
+ projection: "EPSG:4326",
+ }),
+ });
+ window.ol2d = ol2d;
+
+ var view = ol2d.getView();
+
+ // let provider = new Cesium.UrlTemplateImageryProvider({
+ // url: "/wp/{z}/{x}/{y}.png",
+ // fileExtension: "png",
+ // });
+ // view.imageryLayers.addImageryProvider(provider);
+
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ view.setCenter([114.03858862, 27.63088262]);
+
+ //
+ view.setZoom(18);
+ this.view = view;
+ const ol3d = new OLCesium({ map: window.ol2d });
+ window.ol3d = ol3d;
+
+ ol2d.addLayer(this.gunAddlayer);
+ ol2d.addLayer(this.peopleAddlayer);
+ ol2d.addLayer(this.carAddlayer);
+ ol2d.addLayer(this.peopleLineAddlayer);
+ ol2d.addLayer(this.beginsPoint);
+ // this.addLines()
+ let that = this;
+ that.addNewLine();
+
+ return;
+ that.beginsPoint.getSource().clear();
+ let iconFeature = new OlFeature({
+ geometry: new OlGeomPoint([114.03928791, 27.62954732]), //绘制图形（点）
+ });
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ //透明度
+ opacity: 1,
+ //图片路径
+ src: "img/dingwei/dingwei4.png",
+ }),
+ })
+ );
+ that.beginsPoint.getSource().addFeature(iconFeature);
+
+ //监听鼠标位置
+ //
+ },
+ methods: {
+ init(val, num, value, fromView) {
+ if (fromView) {
+ this.fromView = fromView;
+ }
+ //若是查看 不显示更改按钮
+ //初始化
+ // console.log(val, "地图初始化", "第:" + num);
+ this.nowIndex = num;
+ if (val.indexOf("路径") != -1) {
+ // console.log("加载路径");
+ if (!fromView) {
+ this.openDrawLineMethod();
+ }
+ if (value) {
+ //有数据就加载
+ this.addLinesDraw(value);
+ }
+ } else {
+ // console.log("加载标点");
+ if (!fromView) {
+ this.openDrawPointMethod();
+ }
+ if (value) {
+ //有数据就加载
+ let intlat = value;
+ if (typeof value == "string") {
+ intlat = value.split(","); //改为数组
+ intlat = [+intlat[0], +intlat[1]]; //改为数字
+ }
+ this.addIconMarker(intlat);
+ }
+ }
+ },
+ useMapData() {
+ //返回用数据
+ this.$parent.MapDataShow = false;
+ let val;
+ if (this.openDrawPoint) {
+ val = "point";
+ } else if (this.openDrawLine) {
+ val = "line";
+ }
+ this.$parent.backMapData(val, this.nowIndex);
+ },
+ clearUseMapData() {
+ if (this.openDrawPoint) {
+ this.$store.commit("setPointData", ""); //用vuex清空最终数据
+ } else if (this.openDrawLine) {
+ this.$store.commit("setRotesData", ""); //用vuex清空最终数据
+ }
+ this.useMapData();
+ },
+ openDrawLineMethod() {
+ if (this.openDrawPoint) {
+ this.openDrawPoint = false;
+ $("#openDrawPoiton").hide();
+ }
+ //打开画路径
+ $("#openDrawLine").toggle(100);
+ this.openDrawLine = !this.openDrawLine;
+ },
+ openDrawPointMethod() {
+ if (this.openDrawLine) {
+ this.openDrawLine = false;
+ $("#openDrawLine").hide();
+ }
+ //打开画点
+ $("#openDrawPoiton").toggle(100);
+ this.openDrawPoint = !this.openDrawPoint;
+ },
+ getTypeSelectedPoint() {
+ this.tipTitle = "单击左键选择位置";
+ let that = this;
+ let isHaveOne = false;
+ $("#map")
+ .off("mousemove")
+ .mousemove(function (e) {
+ if (!that.showTip) {
+ that.showTip = true;
+ }
+ that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
+ // console.log(e.clientX);
+ // console.log(e.offsetX);
+ // console.log(e.pageX);
+ // console.log(e.screenX);
+ // console.log("================================");
+ });
+
+ if (this.typeSelected !== "None") {
+ this.draw = new Draw({
+ source: this.drawLayer.getSource(),
+ type: this.typeSelected,
+ style: new Style({
+ stroke: new Stroke({
+ color: "red",
+ width: 3,
+ }),
+ }),
+ isPoint: true,
+ coordinate: function (res) {},
+ coordinateOverPoint: function (res) {
+ if (isHaveOne) {
+ return;
+ }
+ that.$store.commit("setPointData", res.coordinate); //用vuex传最终数据
+ // console.log(res.coordinate);//输出点
+ that.addIconMarker(res.coordinate);
+ isHaveOne = true;
+ },
+ });
+ this.map.addInteraction(this.draw);
+ }
+
+ // 选点
+ // this.addIconMarker([115.9111272006128, 28.699307185841562]);
+ },
+ addIconMarker(intlat) {
+ let that = this;
+ that.carAddlayer.getSource().clear();
+ // if (this.olLayer) {
+ // window.ol2d.removeLayer(this.olLayer);
+ // }
+ // let iconFeatures;
+
+ // this.olLayer = new VectorLayer({
+ // // 图标图层
+ // zIndex: 22,
+ // source: new VectorSource(),
+ // });
+ let iconFeature = new OlFeature({
+ geometry: new OlGeomPoint(intlat), //绘制图形（点）
+ });
+ iconFeature.setStyle(
+ new OlStyleStyle({
+ image: new OlStyleIcon({
+ scale: 0.5,
+ //控制标注图片和文字之间的距离
+ // anchor: [0.2, 1],
+ //标注样式的起点位置
+ // anchorOrigin: "top-right",
+ //X方向单位：分数
+ // anchorXUnits: "10px",
+ //Y方向单位：像素
+ // anchorYUnits: "-10px",
+ //偏移起点位置的方向
+ offset: [0, 5],
+ offsetOrigin: "bottom",
+ //透明度
+ opacity: 1,
+ //图片路径
+ // src: require("img/logos.png"),
+ src: "img/dingwei/dingwei5.png",
+ }),
+ })
+ );
+
+ // 加载多个点用addFeatures，一个点用addFeature
+ // this.olLayer.getSource().addFeature(iconFeature);
+ that.carAddlayer.getSource().addFeature(iconFeature);
+ // window.ol2d.addLayer(this.olLayer);
+
+ // var startMarker = new OlFeature({
+ // type: "icon",
+ // // geometry: new OlGeomPoint([118.10131072998047, 36.819305419921875]),
+ // geometry: new OlGeomPoint(intlat),
+ // });
+
+ // var vectorLayer = new OlLayerVector({
+ // source: new OlSourceVector({
+ // features: [startMarker],
+ // }),
+ // style: new OlStyleStyle({
+ // image: new OlStyleIcon({
+ // anchor: [0.5, 1],
+ // src: "img/logos.png",
+ // // src: http://192.168.4.61:9527/static/mapMoniter/0.png
+ // // 说明下，因为vue项目打包之后，我这张图片放到了static目录下，直接给相对路径是无法访问到，
+ // // 可以通过js原生的API拿到对应的前台服务器ip和端口，还有项目名称，就可以访问到，下面附了对应帖子链接
+ // }),
+ // // 设置图片下面显示字体的样式和内容
+ // text: new Text({
+ // text: "文字描述", // 添加文字描述
+ // font: "14px font-size", // 设置字体大小
+ // // fill: new Fill({
+ // // // 设置字体颜色
+ // // color: "#1CAF9A",
+ // // }),
+ // offsetY: 10, // 设置文字偏移量
+ // }),
+ // }),
+ // });
+ // window.ol2d.addLayer(vectorLayer);
+
+ this.butTitlePoint = "重新标点";
+ if (!this.fromView) {
+ $("#dataConfirm").show(100);
+ }
+ if (this.draw != null) {
+ this.draw.controlDrawing(true);
+ $("#map").unbind("mousemove");
+ this.tipTitle = "";
+ this.showTip = false;
+ }
+ },
+ goTudefault(x, y) {
+ this.view.setCenter([x, y]);
+ this.view.setZoom(14.5);
+ },
+ init3D(val) {
+ window.ol3d.setEnabled(val);
+ },
+ addEntitys(item, icon, scale, name, type) {
+ const iconFeature = new Feature({
+ geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
+ name: name,
+ attributes: item,
+ });
+
+ const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
+
+ image: new Icon({
+ scale: scale,
+ opacity: 1,
+ src: icon,
+ // src: require('../../assets/Mark.png')
+ }),
+
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
+ });
+
+ iconFeature.setStyle(iconStyle);
+
+ this[type].getSource().addFeature(iconFeature);
+ },
+
+ addLines(ringId) {
+ var that = this;
+ if (ringId != null && ringId != "") {
+ $.ajax({
+ url: "api/routeIn/routein/selectList",
+ type: "post",
+ data: {
+ id: ringId,
+ },
+ dataType: "JSON",
+ success: function (data) {
+ that.peopleLineAddlayer.getSource().clear();
+ var entityData = "";
+ var entityArr = [];
+ entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);
+
+ // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
+ if (entityData && entityData != "") {
+ entityData = entityData[1].split(",");
+
+ for (var j = 0; j < entityData.length; j++) {
+ entityArr.push([
+ Number(entityData[j].split(" ")[0]),
+ Number(entityData[j].split(" ")[1]),
+ ]);
+ }
+ }
+
+ var lineCoords = entityArr; // 线里点的集合
+
+ var view = ol2d.getView();
+ view.setCenter([
+ lineCoords[Math.ceil(entityArr.length / 2)][0],
+ lineCoords[Math.ceil(entityArr.length / 2)][1],
+ ]);
+ view.setZoom(14.5);
+
+ // 要素
+ // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
+ var feature_LineString = new Feature({
+ geometry: new LineString(lineCoords),
+ });
+
+ feature_LineString.setStyle(
+ new Style({
+ //填充色
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.2)",
+ }),
+ //边线颜色
+ stroke: new Stroke({
+ color: "rgb(252, 94, 32)",
+ width: 5,
+ }),
+ })
+ );
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
+ that.butTitle = "修改绘画";
+ },
+ error: function (data) {
+ // 请求失败函数
+ console.log(data);
+ },
+ });
+ }
+ },
+ addNewLine() {
+ this.map = ol2d;
+ // console.log(ol2d, 1);
+ // console.log(drawFence, 2);
+ // var d = new drawFence(ol2d);
+ // console.log(d);
+
+ // 添加一个绘制的线使用的layer
+ this.drawLayer = new VectorLayer({
+ //layer所对应的source
+ source: new Vector(),
+ });
+ //把layer加入到地图中
+ this.map.addLayer(this.drawLayer);
+ },
+ getTypeSelected() {
+ this.beginDraw = true;
+ this.draw && this.map.removeInteraction(this.draw);
+ this.peopleLineAddlayer.getSource().clear();
+ //再根据typeSelect的值绘制新的Interaction
+ this.addInteraction();
+ },
+ stopDraw() {
+ this.showTip = false;
+ this.draw && this.map.removeInteraction(this.draw);
+ this.beginDraw = false;
+ this.tipTitle = "";
+ this.$store.commit("setRotesData", ""); //用vuex传最终数据
+ },
+ setTipPosition(x, y, n, m) {
+ this.position.w = x + n;
+ this.position.h = y + m;
+ },
+ addInteraction() {
+ this.tipTitle = "单击左键或右键开始绘画";
+ $("#map")
+ .off("mousemove")
+ .mousemove(function (e) {
+ if (!that.showTip) {
+ that.showTip = true;
+ }
+ that.setTipPosition(e.offsetX, e.offsetY, 10, 10);
+ // console.log(e.clientX);
+ // console.log(e.offsetX);
+ // console.log(e.pageX);
+ // console.log(e.screenX);
+ // console.log("================================");
+ });
+
+ this.coordinates = [];
+ let value = this.typeSelected,
+ that = this;
+ if (value !== "None") {
+ this.draw = new Draw({
+ source: this.drawLayer.getSource(),
+ type: this.typeSelected,
+ style: new Style({
+ stroke: new Stroke({
+ color: "red",
+ width: 3,
+ }),
+ }),
+ coordinate: function (res) {
+ //画线中的点
+ that.coordinates.push(res.coordinate_);
+ that.tipTitle = "可继续，或选择最终位置双击结束";
+ // console.log(res.coordinate_, 123456);
+ },
+ coordinateOver: function (res) {
+ // 结束绘画 处理数据
+ // console.log(that.doData(that.coordinates));
+ let d = that.doData(that.coordinates);
+ that.addLinesDraw(d);
+ // console.log(d);
+ // console.log(that.$store);
+ that.$store.commit("setRotesData", d); //用vuex传最终数据
+ // that.coordinatesStr = that.doData(that.coordinates);
+ },
+ });
+ this.map.addInteraction(this.draw);
+ }
+ },
+ doData(val) {
+ // ` routeInfo: "
+ // LINESTRING(
+ // 115.875489096939 28.7179278611352
+ // ,115.8794051221 28.7176267680684
+ // ,115.879340749084 28.7143052776491
+ // ,115.878879409134 28.7140324026424
+ // ,115.875220876038 28.7150580325974
+ // ,115.875489096939 28.7179466794231
+ // ,115.875489096939 28.7179466794231
+ // )"
+ // `
+ let str = "LINESTRING(";
+ for (let k = 0; k < val.length; k++) {
+ str += `${val[k][0]} ${val[k][1]}`;
+ if (k != val.length - 1) {
+ str += ",";
+ }
+ }
+ str += ")";
+ return str;
+ },
+ addLinesDraw(val) {
+ var that = this;
+ // if (ringId != null && ringId != "") {
+ // $.ajax({
+ // url: "api/routeIn/routein/selectList",
+ // type: "post",
+ // data: {
+ // id: ringId,
+ // },
+ // dataType: "JSON",
+ // success: function (data) {
+ that.peopleLineAddlayer.getSource().clear();
+ var entityData = "";
+ var entityArr = [];
+ entityData = val.match(/\(([^)]*)\)/);
+
+ // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
+ if (entityData && entityData != "") {
+ entityData = entityData[1].split(",");
+
+ for (var j = 0; j < entityData.length; j++) {
+ entityArr.push([
+ Number(entityData[j].split(" ")[0]),
+ Number(entityData[j].split(" ")[1]),
+ ]);
+ }
+ }
+
+ var lineCoords = entityArr; // 线里点的集合
+
+ var view = ol2d.getView();
+ view.setCenter([
+ lineCoords[Math.ceil(entityArr.length / 2)][0],
+ lineCoords[Math.ceil(entityArr.length / 2)][1],
+ ]);
+ view.setZoom(14.5);
+
+ // 要素
+ // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
+ var feature_LineString = new Feature({
+ geometry: new LineString(lineCoords),
+ });
+
+ feature_LineString.setStyle(
+ new Style({
+ //填充色
+ fill: new Fill({
+ color: "rgba(255, 255, 255, 0.2)",
+ }),
+ //边线颜色
+ stroke: new Stroke({
+ color: "rgb(252, 94, 32)",
+ width: 5,
+ }),
+ })
+ );
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
+ that.butTitle = "重新绘画";
+ if (!this.fromView) {
+ $("#dataConfirm").show(100);
+ }
+ if (that.draw != null) {
+ that.beginDraw = false;
+ that.draw.controlDrawing(true);
+ that.tipTitle = "已结束绘画，点击重新绘画清除上次内容并开始绘画";
+ $("#map").unbind("mousemove");
+ // setTimeout(() => {
+ this.tipTitle = "";
+ this.showTip = false;
+ }
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+#map {
+ position: relative;
+ .controlMap {
+ position: absolute;
+ top: 10px;
+ left: calc(50% - 97px);
+ z-index: 2 !important;
+ #openDrawLine,
+ #openDrawPoiton {
+ width: 174px;
+ position: absolute;
+ // top: 43px;
+ top: 10px;
+ // left: calc(50% - 96px);
+ left: 50%;
+ }
+ .openDrawsb {
+ background-color: #fff;
+ color: black;
+ }
+ .activeDraw {
+ background-color: #409eff;
+ color: #fff;
+ }
+ }
+ #dataConfirm {
+ position: absolute;
+ top: 20px;
+ left: calc(50% + 82px);
+ z-index: 3 !important;
+ }
+}
+</style>
diff --git a/src/components/basemap/mainInThere.vue b/src/components/basemap/mainInThere.vue
new file mode 100644
index 0000000..2c6d150
--- /dev/null
+++ b/src/components/basemap/mainInThere.vue
@@ -0,0 +1,352 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: song
+ * @Date: 2021-04-08 15:14:57
+ * @LastEditors: song
+ * @LastEditTime: 2021-04-24 11:59:43
+-->
+<template>
+ <div id="map"></div>
+</template>
+<script>
+import OLCesium from "olcs/OLCesium.js";
+import "ol/ol.css";
+import OlView from "ol/View.js";
+import XYZ from "ol/source/XYZ";
+import OlLayerTile from "ol/layer/Tile.js";
+import OlMap from "ol/Map.js";
+import tip from "./tip.vue";
+import {
+ // eslint-disable-next-line no-unused-vars
+ defaults as OlControlDefaults,
+ defaults,
+ // 全屏控件
+ FullScreen,
+ // 比例尺控件
+ ScaleLine,
+ // 缩放滚动条控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomSlider,
+ // 鼠标位置控件
+ // eslint-disable-next-line no-unused-vars
+ MousePosition,
+ // -地图属性控件
+ Attribution,
+ // 鹰眼控件
+ // eslint-disable-next-line no-unused-vars
+ OverviewMap,
+ // 缩放到范围控件
+ // eslint-disable-next-line no-unused-vars
+ ZoomToExtent,
+ Rotate,
+} from "ol/control.js";
+
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+
+import { OSM, TileWMS, Vector } from "ol/source";
+// import Draw from "ol/interaction/Draw";
+import Draw from "./Draw";
+
+import Feature from "ol/Feature.js";
+import Point from "ol/geom/Point.js";
+import LineString from "ol/geom/LineString.js";
+import { Icon, Style, Fill, Stroke } from "ol/style.js";
+
+// import drawFence from "./drawFence";
+
+import OlFeature from "ol/Feature";
+import OlGeomPoint from "ol/geom/Point";
+// import OlLayerVector from "ol/layer/Vector";
+// import OlSourceVector from "ol/source/Vector";
+import OlStyleStyle from "ol/style/Style";
+import OlStyleIcon from "ol/style/Icon";
+// // 用来添加相关文字描述的
+import OlStyleText from "ol/style/Text";
+import OlStyleFill from "ol/style/Fill";
+// import Cesium from "libs/Cesium/Cesium.js";
+
+export default {
+ name: "MapInThere",
+ components: {
+ tip,
+ },
+ data() {
+ return {
+ gunAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ peopleAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ carAddlayer: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ // peopleLineAddlayer: new VectorLayer({
+ // // 图标图层
+ // zIndex: 22,
+ // source: new VectorSource(),
+ // }),
+ beginsPoint: new VectorLayer({
+ // 图标图层
+ zIndex: 22,
+ source: new VectorSource(),
+ }),
+ DrawLayer: new VectorLayer({
+ // 图标图层
+ // zIndex: 1000,
+ source: new VectorSource(),
+ }),
+ oldService: "",
+ mapService: [
+ // {
+ // id: "",
+ // value: "",
+ // show:''
+ // },
+ ],
+ };
+ },
+ // computed: {
+ // mapServiceSee() {
+ // },
+ // },
+ // watch: {
+ // // openDrawChiose() {
+ // // console.log(this.openDrawChiose, "openDrawChiose");
+ // // },
+ // mapServiceValue: {
+ // handler(val) {
+ // // console.log("深度监听：", val);
+ // // this.checkDom("getMapDataRefs", (dom) => {
+ // // dom.setServiceData(this.mapServiceValue);
+ // // });
+ // },
+ // deep: true,
+ // },
+ // },
+ mounted() {
+ const ol2d = new OlMap({
+ layers: [
+ // new OlLayerTile({
+ // zIndex: 4,
+ // title: "影像",
+ // source: new XYZ({
+ // url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", // 行政区划
+ // }),
+ // }),
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: "道路+中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // }),
+ new OlLayerTile({
+ zIndex: 4,
+ title: "矢量",
+ source: new XYZ({
+ url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
+ // url: "/localData/sl/{z}/{x}/{y}.png",
+ tileUrlFunction: function (tileCoord) {
+ var z = tileCoord[0];
+ var x = tileCoord[1];
+ var y = Math.pow(2, z) + tileCoord[2];
+ return "../assets/sl/" + z + "/" + x + "/" + y + ".png";
+ },
+ }),
+ }),
+ new OlLayerTile({
+ zIndex: 5,
+ title: "中文注记",
+ source: new XYZ({
+ url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ }),
+ }),
+ ],
+
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ // new FullScreen(),
+ // new ScaleLine(),
+ // new MousePosition(),
+ // new Rotate(),
+ // new Attribution()
+ ]),
+ target: "map",
+ view: new OlView({
+ center: [0, 0],
+ zoom: 2,
+ projection: "EPSG:4326",
+ }),
+ });
+ window.ol2d = ol2d;
+
+ var view = ol2d.getView();
+
+ // let provider = new Cesium.UrlTemplateImageryProvider({
+ // url: "/wp/{z}/{x}/{y}.png",
+ // fileExtension: "png",
+ // });
+ // view.imageryLayers.addImageryProvider(provider);
+
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ view.setCenter([114.03858862, 27.63088262]);
+
+ //
+ view.setZoom(18);
+ this.view = view;
+ // const ol3d = new OLCesium({ map: window.ol2d });
+ // window.ol3d = ol3d;
+
+ // ol2d.addLayer(this.gunAddlayer);
+ // ol2d.addLayer(this.peopleAddlayer);
+ // ol2d.addLayer(this.carAddlayer);
+ // ol2d.addLayer(this.peopleLineAddlayer);
+ // ol2d.addLayer(this.beginsPoint);
+ },
+ methods: {
+ clearServiceData() {
+ this.mapService = [];
+ },
+ setServiceData(data) {
+ let that = this;
+ // console.log(data);
+ //判断是否是新增
+ if (data.length == that.mapService.length) {
+ // console.log("不是新增判断显影");
+ // 不是新增判断显影
+ for (let k in data) {
+ if (data[k].show != that.mapService[k].show) {
+ //如果有改变
+ that.mapService[k].show = data[k].show; // 同步最新show状态
+ if (data[k].show) {
+ //显示
+ // console.log(window.ol2d);
+ // console.log(that.mapService);
+ window.ol2d.addLayer(that.mapService[k].layer);
+ } else {
+ //隐藏
+ window.ol2d.removeLayer(that.mapService[k].layer);
+ }
+ }
+ }
+ } else if (data.length > that.mapService.length) {
+ // console.log("新增直接push");
+ //新增直接push
+ let layer = new OlLayerTile({
+ // source: new XYZ({
+ // url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
+ // }),
+ // new OlLayerTile({
+ zIndex: 5,
+ title: data.length - 1,
+ source: new XYZ({
+ url: data[data.length - 1].service, // 注记
+ }),
+ // }),
+ });
+ // console.log(data[data.length - 1].service);
+ // console.log(that.oldService);
+ // let str = "";
+ // for (let k in that.oldService) {
+ // if (that.oldService[k] != data[data.length - 1].service[k]) {
+ // // console.log(that.oldService[k]);
+ // // console.log(data[data.length - 1].service[k]);
+ // str += that.oldService[k];
+ // }
+ // }
+ // console.log("str", str);
+ that.oldService = data[data.length - 1].service;
+ window.ol2d.addLayer(layer);
+ that.mapService.push({
+ ...data[data.length - 1],
+ layer: layer,
+ });
+ } else if (data.length < that.mapService.length) {
+ // console.log("删除的情况", this.$store.state.map.deleteIndex);
+ //删除的情况
+ if (that.$store.state.map.deleteIndex != -1) {
+ window.ol2d.removeLayer(
+ that.mapService[that.$store.state.map.deleteIndex].layer
+ );
+ that.mapService.splice(that.$store.state.map.deleteIndex, 1);
+ }
+ }
+ // console.log(this.mapService);
+ // for()
+ },
+ // addMapService(data) {
+ // let layer = new OlLayerTile({
+ // // source: new XYZ({
+ // // url: "http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga",
+ // // }),
+ // // new OlLayerTile({
+ // zIndex: 5,
+ // title: "中文注记",
+ // source: new XYZ({
+ // url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ // }),
+ // // }),
+ // });
+ // this.mapService.push({
+ // layer: layer,
+ // });
+ // window.ol2d.addLayer(layer);
+ // setTimeout(() => {
+ // window.ol2d.removeLayer(layer);
+ // }, 2000);
+ // },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+#map {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ .controlMap {
+ position: absolute;
+ top: 10px;
+ // left: calc(50% - 97px);
+ left: 390px;
+ z-index: 2 !important;
+ #openTitle {
+ background-color: #fff;
+ border-radius: 5px;
+ }
+ #openDrawLine,
+ #openDrawPoiton {
+ width: 174px;
+ // position: relative;
+ // top: 43px;
+ // top: 10px;
+ // left: calc(50% - 96px);
+ // left: 20px;
+ }
+ .openDrawsb {
+ background-color: #fff;
+ color: black;
+ }
+ .activeDraw {
+ background-color: #409eff;
+ color: #fff;
+ }
+ }
+ #dataConfirm {
+ position: absolute;
+ top: 43px;
+ // left: calc(50% + 82px);
+ left: 564px;
+ z-index: 3 !important;
+ }
+}
+</style>
diff --git a/src/components/basemap/tip.vue b/src/components/basemap/tip.vue
new file mode 100644
index 0000000..d9006f8
--- /dev/null
+++ b/src/components/basemap/tip.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/map/mainInThere.vue b/src/components/map/mainInThere.vue
index ab41e1c..2405f20 100644
--- a/src/components/map/mainInThere.vue
+++ b/src/components/map/mainInThere.vue
@@ -58,13 +58,10 @@
</el-button-group>
</div>
<el-button-group id="dataConfirm" style="display: none">
- <el-button
- type="success"
- icon="el-icon-check"
- @click="useMapData"
- v-show="notNow"
+ <el-button type="success" icon="el-icon-check" @click="useMapData"
>确定选择</el-button
>
+ <!-- v-show="notNow" -->
<el-button
type="danger"
@click="clearUseMapData"
@@ -506,6 +503,7 @@
if (open) {
this.openTitle = "";
this.$parent.closeOpenedMap(); //开放按钮
+ this.drawLayerRoom();
}
},
//取消按钮
@@ -517,14 +515,13 @@
//返回用数据
// console.log(this.openDrawChiose, this.nowIndex);
this.$parent.MapDataShow = false;
- let val;
- if (this.openDrawChiose == "openDrawLine") {
- val = "line";
- } else if (this.openDrawChiose == "openDrawPoint") {
- val = "point";
- } else {
- val = "notData";
- }
+ let val =
+ this.openDrawChiose == "openDrawLine"
+ ? "line"
+ : this.openDrawChiose == "openDrawPoint"
+ ? "point"
+ : "notData";
+ // console.log(val);
this.$parent.backMapDataOurData(val, this.nowIndex);
// 返回后关闭操作按钮
this.closeOurBut();
@@ -662,9 +659,9 @@
);
that.peopleLineAddlayer.getSource().addFeature(feature_LineString);
that.butTitle = "重新绘画";
- if (!this.fromView) {
- $("#dataConfirm").show(100);
- }
+ // if (!this.fromView) {
+ $("#dataConfirm").show(100);
+ // }
if (that.draw != null) {
that.beginDraw = false;
that.draw.controlDrawing(true);
diff --git a/src/router/views/index.js b/src/router/views/index.js
index f0d38e7..0d2e15f 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -1,80 +1,80 @@
import Layout from '@/page/index/'
export default [{
- path: '/wel',
- component: Layout,
- redirect: '/wel/index',
- children: [{
- path: 'index',
- name: '首页',
- meta: {
- i18n: 'dashboard'
- },
- component: () =>
- import( /* webpackChunkName: "views" */ '@/views/architecture/architecture')
+ path: '/wel',
+ component: Layout,
+ redirect: '/wel/index',
+ children: [{
+ path: 'index',
+ name: '首页',
+ meta: {
+ i18n: 'dashboard'
+ },
+ component: () =>
+ import( /* webpackChunkName: "views" */ '@/views/architecture/architecture')
+ }, {
+ path: 'dashboard',
+ name: '控制台',
+ meta: {
+ i18n: 'dashboard',
+ menu: false,
+ },
+ component: () =>
+ import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
+ }]
}, {
- 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: '/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: '/mechanism',
component: Layout,
@@ -117,20 +117,33 @@
import( /* webpackChunkName: "views" */ '@/views/life/life')
}]
},
- {
- path: '/hd',
- component: Layout,
- redirect: '/hd/index',
- children: [{
- path: 'index',
- name: '专题活动',
- meta: {
- i18n: 'index'
- },
- component: () =>
- import( /* webpackChunkName: "views" */ '@/views/hd/hd')
- }]
- },
+ // {
+ // path: '/hd',
+ // component: Layout,
+ // redirect: '/hd/index',
+ // children: [{
+ // path: 'index',
+ // name: '专题活动',
+ // meta: {
+ // i18n: 'index'
+ // },
+ // component: () =>
+ // import( /* webpackChunkName: "views" */ '@/views/hd/hd')
+ // }]
+ // }, {
+ // path: '/hd/baseMap',
+ // component: Layout,
+ // redirect: '/baseMap/baseMap',
+ // children: [{
+ // path: 'index',
+ // name: '专题活动',
+ // meta: {
+ // i18n: 'index'
+ // },
+ // component: () =>
+ // import( /* webpackChunkName: "views" */ '@/views/hd/baseMap')
+ // }]
+ // },
{
path: '/vr',
component: Layout,
@@ -159,34 +172,34 @@
import( /* webpackChunkName: "views" */ '@/views/sp/sp')
}]
},
-// {
-// path: '/work/process/leave',
-// component: Layout,
-// redirect: '/work/process/leave/form',
-// children: [{
-// path: 'form/:processDefinitionId',
-// name: '请假流程',
-// meta: {
-// i18n: 'work'
-// },
-// component: () =>
-// import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
-// }, {
-// path: 'handle/:taskId/:processInstanceId/:businessId',
-// name: '处理请假流程',
-// meta: {
-// i18n: 'work'
-// },
-// component: () =>
-// import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
-// }, {
-// path: 'detail/:processInstanceId/:businessId',
-// name: '请假流程详情',
-// meta: {
-// i18n: 'work'
-// },
-// component: () =>
-// import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
-// }]
-// }
+ // {
+ // path: '/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')
+ // }]
+ // }
]
diff --git a/src/store/getters.js b/src/store/getters.js
index 236c4e7..89cf29d 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -28,5 +28,7 @@
flowRoutes: (state) => state.dict.flowRoutes,
rotesData: (state) => state.map.rotesData, //获取线
pointData: (state) => state.map.pointData, //获取点
+ mapServiceValue: (state) => state.map.mapServiceValue,
+ notSet: (state) => state.map.notSet,
};
export default getters;
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index 4031a66..23eaa05 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -11,6 +11,9 @@
state: {
rotesData: false,
pointData: false,
+ mapServiceValue: [],
+ deleteIndex: -1,
+ notSet: false,
},
// actions: {
// FlowRoutes({commit}) {
@@ -25,6 +28,19 @@
// },
// },
mutations: {
+ changeNotSet(state, data) {
+ state.notSet = data;
+ },
+ setMapServiceValue(state, data) {
+ state.mapServiceValue.push(data);
+ },
+ deleteMapServiceValue(state, index) {
+ state.deleteIndex = index;
+ state.mapServiceValue.splice(index, 1);
+ },
+ clearMapServiceValue(state, data) {
+ state.mapServiceValue = [];
+ },
setRotesData(state, data) {
state.rotesData = data;
},
diff --git a/src/views/hd/baseMap.vue b/src/views/hd/baseMap.vue
new file mode 100644
index 0000000..e76c086
--- /dev/null
+++ b/src/views/hd/baseMap.vue
@@ -0,0 +1,632 @@
+<template>
+ <basic-container>
+ <avue-crud
+ :option="option"
+ :table-loading="loading"
+ :data="data"
+ :page.sync="page"
+ :permission="permissionList"
+ :before-open="beforeOpen"
+ v-model="form"
+ ref="crud"
+ @row-update="rowUpdate"
+ @row-save="rowSave"
+ @row-del="rowDel"
+ @search-change="searchChange"
+ @search-reset="searchReset"
+ @selection-change="selectionChange"
+ @current-change="currentChange"
+ @size-change="sizeChange"
+ @refresh-change="refreshChange"
+ @on-load="onLoad"
+ >
+ <!-- <template slot="menuLeft">
+ <el-button
+ type="danger"
+ size="small"
+ icon="el-icon-delete"
+ plain
+ v-if="permission.hd_delete"
+ @click="handleDelete"
+ >删 除
+ </el-button>
+ </template> -->
+ <template slot-scope="{ type, disabled }" slot="haveBaseMapForm">
+ <div class="inputInline" v-show="!notSet">
+ <el-input
+ v-model="chouseBaseMapTypeOnce"
+ placeholder="底图名称"
+ class="inputInlineType"
+ ></el-input>
+ <el-input
+ placeholder="请输入底图地址"
+ v-model="mapServiceValueOnce"
+ class="input-with-select"
+ >
+ <!-- <el-select
+ v-model="chouseBaseMapTypeOnce"
+ slot="prepend"
+ placeholder="请选择"
+ >
+ <el-option label="餐厅名" value="1"></el-option>
+ <el-option label="2" value="2"></el-option>
+ </el-select> -->
+ <el-button
+ slot="append"
+ icon="el-icon-plus"
+ @click="addMapServices"
+ ></el-button>
+ </el-input>
+ </div>
+ </template>
+ <template slot-scope="{ type, disabled }" slot="lineForm">
+ <baseMapMap
+ ref="baseMapMap"
+ id="baseMapMap"
+ @setMapData="setMapData"
+ @changeMapSI="changeMapSI"
+ ></baseMapMap>
+ </template>
+ </avue-crud>
+ </basic-container>
+</template>
+
+<script>
+import {
+ getList,
+ getHdName,
+ getDetail,
+ add,
+ update,
+ remove,
+} from "@/api/hd/baseMap";
+import { mapGetters } from "vuex";
+import baseMapMap from "./baseMapMap.vue";
+
+export default {
+ components: {
+ // Map,
+ baseMapMap,
+ },
+ data() {
+ return {
+ mapServiceValueOnce: "",
+ chouseBaseMapTypeOnce: "XYZ",
+ form: {},
+ query: {},
+ loading: true,
+ page: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0,
+ },
+ selectionList: [],
+ option: {
+ height: "auto",
+ calcHeight: 30,
+ tip: false,
+ searchShow: true,
+ searchMenuSpan: 6,
+ border: true,
+ index: true,
+ viewBtn: true,
+ align: "center",
+ selection: true,
+ indexLabel: "序号",
+ dialogClickModal: false,
+ column: [
+ {
+ label: "专题名称",
+ prop: "hdid",
+ editDisabled: true,
+ type: "select",
+ dicData: [
+ // {
+ // label: "真",
+ // value: "true",
+ // },
+ // {
+ // label: "假",
+ // value: "false",
+ // },
+ ],
+ rules: [
+ {
+ required: true,
+ message: "请输入活动名称",
+ trigger: "blur",
+ },
+ ],
+ },
+ // {
+ // label: "活动地点",
+ // viewDisply:false,
+ // addDisplay: false,
+ // hide: true,
+ // editDisply: false,
+ // prop: "address",
+ // },
+ // {
+ // label: "时间",
+ // prop: "time",
+ // type: "datetime",
+ // span: 8,
+ // format: "yyyy-MM-dd hh:mm:ss",
+ // valueFormat: "yyyy-MM-dd hh:mm:ss",
+ // mock: {
+ // type: "datetime",
+ // format: "yyyy-MM-dd hh:mm:ss",
+ // now: true,
+ // },
+ // },
+ // {
+ // label: "图片",
+ // prop: "tpurl",
+ // // dataType: 'string',
+ // type: "upload",
+ // propsHttp: {
+ // res: "data",
+ // url: "link",
+ // },
+ // span: 24,
+ // listType: "picture-card",
+ // tip: "只能上传jpg/png文件，且不超过500kb",
+ // action: "/api/blade-resource/oss/endpoint/put-file",
+ // },
+ {
+ label: "专题底图",
+ hide: true,
+ prop: "haveBaseMap",
+ component: "AvueUeditor",
+ // options: {
+ // action: "/api/blade-resource/oss/endpoint/put-file",
+ // props: {
+ // res: "data",
+ // url: "link",
+ // },
+ // },
+ // rules: [
+ // {
+ // required: true,
+ // message: "请输入完整的底图服务内容",
+ // trigger: "blur",
+ // },
+ // ],
+ minRows: 5,
+ span: 24,
+ },
+ {
+ label: "选择路径和标点",
+ labelWidth: "0",
+ prop: "line",
+ className: "mapClass",
+ hide: true,
+ display: true,
+ span: 24,
+ formslot: true,
+ addDisplay: true,
+ },
+ // {
+ // label: "路线",活动
+ // hide: true,
+ // prop: "lx",
+ // editDisply: false,
+ // addDisplay: false,
+ // },
+ ],
+ },
+ data: [],
+ LineData: [],
+ PointData: [],
+ };
+ },
+ // watch: {
+ // rotesData() {
+ // console.log(this.rotesData);
+ // },
+ // pointData() {
+ // console.log(this.pointData);
+ // },
+ // },
+ computed: {
+ ...mapGetters(["permission", "mapServiceValue", "notSet"]),
+ permissionList() {
+ return {
+ addBtn: this.vaildData(this.permission.hd_add, false),
+ viewBtn: this.vaildData(this.permission.hd_view, false),
+ delBtn: this.vaildData(this.permission.hd_delete, false),
+ editBtn: this.vaildData(this.permission.hd_edit, false),
+ };
+ },
+ ids() {
+ let ids = [];
+ this.selectionList.forEach((ele) => {
+ ids.push(ele.id);
+ });
+ return ids.join(",");
+ },
+ },
+ mounted() {
+ let that = this;
+ getHdName().then((res) => {
+ let data = res.data.data;
+ // console.log(data);
+ for (let k in data) {
+ that.option.column[0].dicData.push({
+ label: data[k].hdname,
+ value: data[k].id,
+ });
+ }
+ });
+ },
+ methods: {
+ changeMapSI() {
+ this.form["haveBaseMap"] = this.mapServiceValue.length != 0 ? "have" : "";
+ },
+ addMapServices(val) {
+ if (val == 1) {
+ this.mapServiceValueOnce = "";
+ }
+ if (this.mapServiceValueOnce == "") {
+ this.$message({
+ message: "请输入地图服务地址",
+ type: "warning",
+ });
+ return;
+ }
+ if (this.chouseBaseMapTypeOnce == "") {
+ this.$message({
+ message: "请输入地图服务类型",
+ type: "warning",
+ });
+ return;
+ }
+ // console.log(this.mapServiceValue, this.chouseBaseMapType);
+ // this.form["haveBaseMap"] = this.mapServiceValueOnce;
+ //传入控制地图层 转store
+ // this.$refs.baseMapMap.addService({
+ // type: this.chouseBaseMapType,
+ // service: this.mapServiceValue,
+ // });
+ let that = this;
+ this.$store.commit("setMapServiceValue", {
+ type: that.chouseBaseMapTypeOnce,
+ service: that.mapServiceValueOnce,
+ show: true,
+ layer: null,
+ });
+ this.mapServiceValueOnce = "";
+ },
+ setMapData(val) {
+ this.LineData = val[0];
+ this.PointData = val[1];
+ },
+ rowSave(row, done, loading) {
+ if (row.haveBaseMap == "") {
+ this.$message({
+ message: "请输入至少一个完整的底图服务内容",
+ type: "warning",
+ });
+ loading();
+ return;
+ }
+ let types = "",
+ urls = "",
+ leng = this.mapServiceValue.length - 1;
+ for (let k in this.mapServiceValue) {
+ types += this.mapServiceValue[k].type;
+ urls += this.mapServiceValue[k].service;
+ if (k != leng) {
+ types += ",";
+ urls += ",";
+ }
+ }
+ let data = {
+ hdid: row.hdid,
+ maptype: types,
+ mapurl: urls,
+ };
+ // console.log(data);
+ // loading();
+ // return;
+ // var d = [];
+ // for (var k in row.tpurl) {
+ // d.push(row.tpurl[k].value);
+ // }
+ // row.tpurl = d.join(",");
+ // let outMapData = this.$refs.getMapData.myRulesUse();
+ // if (!outMapData) {
+ // loading();
+ // return;
+ // }
+ // row["lxname"] = outMapData[0][0];
+ // row["lx"] = outMapData[0][1];
+ // row["addressname"] = outMapData[1][0];
+ // row["address"] = outMapData[1][1];
+ // console.log(row);
+ // loading();
+ // return;
+ add(data).then(
+ () => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ done();
+ },
+ (error) => {
+ loading();
+ window.console.log(error);
+ }
+ );
+ },
+ rowUpdate(row, index, done, loading) {
+ // let outMapData = this.$refs.getMapData.myRulesUse();
+ // if (!outMapData) {
+ // loading();
+ // return;
+ // }
+ // row["lxname"] = outMapData[0][0];
+ // row["lx"] = outMapData[0][1];
+ // row["addressname"] = outMapData[1][0];
+ // row["address"] = outMapData[1][1];
+ // console.log(row);
+ // loading();
+ // return;
+ if (row.haveBaseMap == "") {
+ this.$message({
+ message: "请输入至少一个完整的底图服务内容",
+ type: "warning",
+ });
+ loading();
+ return;
+ }
+ let types = "",
+ urls = "",
+ leng = this.mapServiceValue.length - 1;
+ for (let k in this.mapServiceValue) {
+ types += this.mapServiceValue[k].type;
+ urls += this.mapServiceValue[k].service;
+ if (k != leng) {
+ types += ",";
+ urls += ",";
+ }
+ }
+ row.maptype = types;
+ row.mapurl = urls;
+ // console.log(row);
+ // loading();
+ // return;
+ update(row).then(
+ () => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ done();
+ },
+ (error) => {
+ loading();
+ console.log(error);
+ }
+ );
+ },
+ rowDel(row) {
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ return remove(row.id);
+ })
+ .then(() => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ });
+ },
+ handleDelete() {
+ if (this.selectionList.length === 0) {
+ this.$message.warning("请选择至少一条数据");
+ return;
+ }
+ this.$confirm("确定将选择数据删除?", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning",
+ })
+ .then(() => {
+ return remove(this.ids);
+ })
+ .then(() => {
+ this.onLoad(this.page);
+ this.$message({
+ type: "success",
+ message: "操作成功!",
+ });
+ this.$refs.crud.toggleSelection();
+ });
+ },
+ checkDom(name, fn) {
+ // 声明定时器
+ let that = this;
+ var timer = null;
+
+ // 检查dom是否执行完成
+ function checkDom() {
+ let dom = that.$refs[name];
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (fn) {
+ //回调函数
+ fn(dom);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100);
+ }
+ }
+
+ // 首次执行
+ checkDom();
+ },
+ beforeOpen(done, type) {
+ let that = this;
+ if (this.notSet == true) {
+ this.$store.commit("changeNotSet", false);
+ }
+ if (["edit", "view"].includes(type)) {
+ getDetail(this.form.id).then((res) => {
+ this.form = res.data.data;
+ console.log(res);
+ //解析数据
+ let types = this.form.maptype.split(","),
+ urls = this.form.mapurl.split(",");
+ console.log(types);
+ console.log(urls);
+
+ for (let k in types) {
+ setTimeout(() => {
+ this.$store.commit("setMapServiceValue", {
+ type: types[k],
+ service: urls[k],
+ show: true,
+ layer: null,
+ });
+ }, 500);
+ }
+ });
+ //控制按钮不可编辑
+ if (type == "view") {
+ this.$store.commit("changeNotSet", true);
+ }
+
+ // this.checkDom("getMapData", (dom) => {
+ // // dom.init(val, num, value);
+ // dom[type + "Init"]([
+ // [that.form.lxname, that.form.lx],
+ // [that.form.addressname, that.form.address],
+ // ]);
+ // });
+ }
+ // if (type == "add") {
+ // let that = this;
+ // getHdName().then((res) => {
+ // let data = res.data.data;
+ // // console.log(data);
+ // for (let k in data) {
+ // that.option.column[0].dicData.push({
+ // label: data[k].hdname,
+ // value: data[k].id,
+ // });
+ // }
+ // });
+ // }
+
+ done();
+ },
+ searchReset() {
+ this.query = {};
+ this.onLoad(this.page);
+ },
+ searchChange(params, done) {
+ this.query = params;
+ this.page.currentPage = 1;
+ this.onLoad(this.page, params);
+ done();
+ },
+ selectionChange(list) {
+ this.selectionList = list;
+ },
+ selectionClear() {
+ this.selectionList = [];
+ this.$refs.crud.toggleSelection();
+ },
+ currentChange(currentPage) {
+ this.page.currentPage = currentPage;
+ },
+ sizeChange(pageSize) {
+ this.page.pageSize = pageSize;
+ },
+ refreshChange() {
+ this.onLoad(this.page, this.query);
+ },
+ onLoad(page, params = {}) {
+ this.loading = true;
+ getList(
+ page.currentPage,
+ page.pageSize,
+ Object.assign(params, this.query)
+ ).then((res) => {
+ const data = res.data.data;
+ this.page.total = data.total;
+ this.data = data.records;
+ for (let k in this.data) {
+ this.data[k]["haveBaseMap"] = this.data[k].maptype;
+ }
+ this.loading = false;
+ this.selectionClear();
+ });
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+.mapClass {
+ margin-left: 88px;
+}
+
+.mapClass div label {
+ display: none;
+}
+
+.mapClassMain {
+ /* padding-left: 25px !important; */
+}
+
+#baseMapMap {
+ width: calc(100% + 90px);
+ position: relative;
+ left: -90px;
+ height: 400px;
+}
+.input-with-select {
+ width: calc(100% - 10px);
+ position: relative;
+ left: 10px;
+ .el-input-group__prepend {
+ // width: auto !important;
+ // // height: auto !important;
+ // padding: 0 !important;
+ }
+ .el-input__inner {
+ // width: auto !important;
+ // height: auto !important;
+ }
+ .el-input--small {
+ width: 100px;
+ }
+}
+.inputInline {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ .inputInlineType {
+ width: 110px;
+ }
+}
+</style>
diff --git a/src/views/hd/baseMapMap.vue b/src/views/hd/baseMapMap.vue
new file mode 100644
index 0000000..822f35d
--- /dev/null
+++ b/src/views/hd/baseMapMap.vue
@@ -0,0 +1,152 @@
+<template>
+ <div class="baseMapMap" :key="Refresh">
+ <MapInThere ref="baseMapMapsMap" />
+ <div class="controlbaseMapMap">
+ <div v-for="(item, index) in mapServiceValue" :key="index">
+ {{ item.type + " " + index }}
+ <el-switch class="around_left" v-model="item.show"> </el-switch>
+ <el-button
+ class="around_left"
+ type="danger"
+ icon="el-icon-delete"
+ circle
+ @click="deleteMapService(index)"
+ :disabled="notSet"
+ ></el-button>
+ <el-divider v-if="index != mapServiceValue.length - 1"></el-divider>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import MapInThere from "@/components/basemap/mainInThere.vue";
+export default {
+ name: "getMapData",
+ components: {
+ MapInThere,
+ },
+ computed: {
+ ...mapGetters(["mapServiceValue", "notSet"]),
+ },
+ watch: {
+ mapServiceValue: {
+ handler(val) {
+ // console.log("深度监听：", val);
+ //改变父级标单字段验证状态
+ this.$emit("changeMapSI");
+ this.checkDom("baseMapMapsMap", (dom) => {
+ //更改地图图层数据
+ dom.setServiceData(this.mapServiceValue);
+ });
+ },
+ deep: true,
+ },
+ },
+ data() {
+ return {
+ mapServiceData: [],
+ };
+ },
+ destroyed() {
+ //销毁清楚数据
+ this.$store.commit("clearMapServiceValue");
+ this.checkDom("baseMapMapsMap", (dom) => {
+ //更改地图图层数据
+ dom.clearServiceData();
+ });
+ },
+ mounted() {},
+ methods: {
+ deleteMapService(index) {
+ // console.log(index);
+ this.$store.commit("deleteMapServiceValue", index);
+ },
+ // addService(data) {
+ // this.mapServiceData.push({
+ // ...data,
+ // show: true,
+ // });
+ // console.log(this.mapServiceData);
+ // this.$refs.baseMapMapsMap.addMapService();
+ // },
+ checkDom(name, fn) {
+ // 声明定时器
+ let that = this;
+ var timer = null;
+ // 检查dom是否执行完成
+ function checkDom() {
+ let dom = that.$refs[name];
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (fn) {
+ //回调函数
+ fn(dom);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100);
+ }
+ }
+ // 首次执行
+ checkDom();
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+.flexCenter {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.baseMapMap {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .controlbaseMapMap {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ background-color: #fff;
+ padding: 10px;
+ border-radius: 10px;
+ box-shadow: 0px 0px 10px -3px #000;
+ }
+ // 验证
+ .notPath {
+ // border-bottom: 0.5px solid red;
+ }
+}
+
+//过度动画
+.list-enter {
+ opacity: 0;
+ transform: translateY(10px);
+}
+.list-leave-to {
+ opacity: 0;
+ transform: translateY(-10px);
+}
+
+.list-enter-to,
+.list-leave {
+ opacity: 1;
+}
+ .list-enter-active,
+.list-leave-active {
+ transition: all 0.3s;
+}
+.around_left {
+ padding: 0 5px;
+}
+</style>
--
Gitblit v1.9.3