From d5fb65532736b996aa3176423e11e8fb114bce90 Mon Sep 17 00:00:00 2001
From: 李红刚 <p-honggang.li@pcitc.com>
Date: 星期三, 17 三月 2021 14:41:44 +0800
Subject: [PATCH] 修改标绘绘制圆出现中心点BUG及同时清楚多个
---
src/components/panel/ToolBoxPanel.vue | 44 ++++----
src/views/MapTemplate.vue | 3
src/Sgis.js | 4
src/components/plugin/PathDrag.js | 228 ++++++++++++++++++++++-----------------------
4 files changed, 140 insertions(+), 139 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index 19c9dfb..ee53051 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -1,7 +1,7 @@
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
import ServiceLayerHelper from '@components/helpers/ServiceLayerHelper'
-import PathDrag from '@components/plugin/PathDrag'
+import '@components/plugin/PathDrag'
// import MagicMarker from '@components/plugin/MagicMarker'
// import WmtsSupport from '@components/plugin/wmts_plugins'
import MapConfig from '@/conf/MapConfig'
@@ -27,7 +27,7 @@
// Leaflet鎵╁睍浠ｇ爜
// Editable.init(L) // 鍥惧眰缂栬緫
- PathDrag.init(L) // 璺緞鎷栨嫿
+ // PathDrag.init(L) // 璺緞鎷栨嫿
// MagicMarker.init(L) // 鍔ㄧ敾Marker
// WmtsSupport.init(L) // 鎵╁睍锛屼娇鏀寔WMTS
// CustomPopup.init(L) // 鑷畾涔夊脊鍑烘
diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue
index 8d942da..ec51eff 100644
--- a/src/components/panel/ToolBoxPanel.vue
+++ b/src/components/panel/ToolBoxPanel.vue
@@ -242,6 +242,7 @@
],
selectGroup: false,
drawLayer: null,
+ drawLayerArray: [],
map: null,
// L: window.L,
active: -1,
@@ -284,7 +285,7 @@
},
changeChoose (index) {
this.active = index
- if (this.drawLayer == null) {
+ if (this.drawLayer == null && index === 0) {
this.drawLayer = this.L.layerGroup().addTo(this.map)
}
},
@@ -298,33 +299,34 @@
iconAnchor: [13, 16],
popupAnchor: [26, -32]
})
- var drawLayerMarker = this.map.editTools.startMarker()
- drawLayerMarker.setIcon(myIcon)
- this.drawLayer.addLayer(drawLayerMarker)
- this.setLogic(drawLayerMarker)
+ this.drawLayer = this.map.editTools.startMarker()
+ this.drawLayer.setIcon(myIcon)
+ this.drawLayerArray.push(this.drawLayer)
break
case '绾挎爣缁�':
- var drawLayerLine = this.map.editTools.startPolyline()
- this.drawLayer.addLayer(drawLayerLine)
- this.setLogic(drawLayerLine)
+ this.drawLayer = this.map.editTools.startPolyline()
+ this.drawLayerArray.push(this.drawLayer)
+ this.setLogic()
break
case '澶氳竟褰�':
- var drawLayerPolygonD = this.map.editTools.startPolygon()
- this.drawLayer.addLayer(drawLayerPolygonD)
- this.setLogic(drawLayerPolygonD)
+ this.drawLayer = this.map.editTools.startPolygon()
+ this.drawLayerArray.push(this.drawLayer)
+ this.setLogic()
break
case '鐭╁舰':
- var drawLayerPolygonJ = this.map.editTools.startRectangle()
- this.drawLayer.addLayer(drawLayerPolygonJ)
- this.setLogic(drawLayerPolygonJ)
+ this.drawLayer = this.map.editTools.startRectangle()
+ this.drawLayerArray.push(this.drawLayer)
+ this.setLogic()
break
case '鍦嗗舰':
- var drawLayerPolygonY = this.map.editTools.startCircle()
- this.drawLayer.addLayer(drawLayerPolygonY)
- this.setLogic(drawLayerPolygonY)
+ this.drawLayer = this.map.editTools.startCircle()
+ this.drawLayerArray.push(this.drawLayer)
+ this.setLogic()
break
case '鍒犻櫎':
- this.drawLayer.clearLayers()
+ for (let i = 0; i < this.drawLayerArray.length; i++) {
+ this.map.removeLayer(this.drawLayerArray[i])
+ }
break
case '娓呴櫎':
Measure.clearMeasure(this.map, this.L)
@@ -365,9 +367,9 @@
break
}
},
- setLogic (layer) {
- layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit)
- layer.setStyle({
+ setLogic () {
+ this.drawLayer.on('dblclick', this.L.DomEvent.stop).on('dblclick', this.drawLayer.toggleEdit)
+ this.drawLayer.setStyle({
color: 'red'
})
},
diff --git a/src/components/plugin/PathDrag.js b/src/components/plugin/PathDrag.js
index 88998a5..4566b86 100644
--- a/src/components/plugin/PathDrag.js
+++ b/src/components/plugin/PathDrag.js
@@ -1,143 +1,139 @@
-'use strict'
-const init = (L) => {
- /* A Draggable that does not update the element position
- and takes care of only bubbling to targetted path in Canvas mode. */
- L.PathDraggable = L.Draggable.extend({
+/* eslint-disable */
+'use strict';
+const L = window.L
+/* A Draggable that does not update the element position
+and takes care of only bubbling to targetted path in Canvas mode. */
+L.PathDraggable = L.Draggable.extend({
- initialize: function (path) {
- this._path = path
- this._canvas = (path._map.getRenderer(path) instanceof L.Canvas)
- const element = this._canvas ? this._path._map.getRenderer(this._path)._container : this._path._path
- L.Draggable.prototype.initialize.call(this, element, element, true)
- },
+ initialize: function (path) {
+ this._path = path;
+ this._canvas = (path._map.getRenderer(path) instanceof L.Canvas);
+ var element = this._canvas ? this._path._map.getRenderer(this._path)._container : this._path._path;
+ L.Draggable.prototype.initialize.call(this, element, element, true);
+ },
- _updatePosition: function () {
- const e = { originalEvent: this._lastEvent }
- this.fire('drag', e)
- },
+ _updatePosition: function () {
+ var e = {originalEvent: this._lastEvent};
+ this.fire('drag', e);
+ },
- _onDown: function (e) {
- const first = e.touches ? e.touches[0] : e
- this._startPoint = new L.Point(first.clientX, first.clientY)
- if (this._canvas && !this._path._containsPoint(this._path._map.mouseEventToLayerPoint(first))) {
- return
- }
- L.Draggable.prototype._onDown.call(this, e)
- }
+ _onDown: function (e) {
+ var first = e.touches ? e.touches[0] : e;
+ this._startPoint = new L.Point(first.clientX, first.clientY);
+ if (this._canvas && !this._path._containsPoint(this._path._map.mouseEventToLayerPoint(first))) { return; }
+ L.Draggable.prototype._onDown.call(this, e);
+ }
- })
+});
- L.Handler.PathDrag = L.Handler.extend({
- initialize: function (path) {
- this._path = path
- },
+L.Handler.PathDrag = L.Handler.extend({
- getEvents: function () {
- return {
- dragstart: this._onDragStart,
- drag: this._onDrag,
- dragend: this._onDragEnd
- }
- },
+ initialize: function (path) {
+ this._path = path;
+ },
- addHooks: function () {
- if (!this._draggable) {
- this._draggable = new L.PathDraggable(this._path)
- }
- this._draggable.on(this.getEvents(), this).enable()
- L.DomUtil.addClass(this._draggable._element, 'leaflet-path-draggable')
- },
+ getEvents: function () {
+ return {
+ dragstart: this._onDragStart,
+ drag: this._onDrag,
+ dragend: this._onDragEnd
+ };
+ },
- removeHooks: function () {
- this._draggable.off(this.getEvents(), this).disable()
- L.DomUtil.removeClass(this._draggable._element, 'leaflet-path-draggable')
- },
+ addHooks: function () {
+ if (!this._draggable) { this._draggable = new L.PathDraggable(this._path); }
+ this._draggable.on(this.getEvents(), this).enable();
+ L.DomUtil.addClass(this._draggable._element, 'leaflet-path-draggable');
+ },
- moved: function () {
- return this._draggable && this._draggable._moved
- },
+ removeHooks: function () {
+ this._draggable.off(this.getEvents(), this).disable();
+ L.DomUtil.removeClass(this._draggable._element, 'leaflet-path-draggable');
+ },
- _onDragStart: function () {
- this._startPoint = this._draggable._startPoint
- this._path
+ moved: function () {
+ return this._draggable && this._draggable._moved;
+ },
+
+ _onDragStart: function () {
+ this._startPoint = this._draggable._startPoint;
+ this._path
.closePopup()
.fire('movestart')
- .fire('dragstart')
- },
+ .fire('dragstart');
+ },
- _onDrag: function (e) {
- const path = this._path
- const event = (e.originalEvent.touches && e.originalEvent.touches.length === 1 ? e.originalEvent.touches[0] : e.originalEvent)
- const newPoint = L.point(event.clientX, event.clientY)
- const latlng = path._map.layerPointToLatLng(newPoint)
+ _onDrag: function (e) {
+ var path = this._path,
+ event = (e.originalEvent.touches && e.originalEvent.touches.length === 1 ? e.originalEvent.touches[0] : e.originalEvent),
+ newPoint = L.point(event.clientX, event.clientY),
+ latlng = path._map.layerPointToLatLng(newPoint);
- this._offset = newPoint.subtract(this._startPoint)
- this._startPoint = newPoint
+ this._offset = newPoint.subtract(this._startPoint);
+ this._startPoint = newPoint;
- this._path.eachLatLng(this.updateLatLng, this)
- path.redraw()
+ this._path.eachLatLng(this.updateLatLng, this);
+ path.redraw();
- e.latlng = latlng
- e.offset = this._offset
- path.fire('drag', e)
- e.latlng = this._path.getCenter ? this._path.getCenter() : this._path.getLatLng()
- path.fire('move', e)
- },
+ e.latlng = latlng;
+ e.offset = this._offset;
+ path.fire('drag', e);
+ e.latlng = this._path.getCenter ? this._path.getCenter() : this._path.getLatLng();
+ path.fire('move', e);
+ },
- _onDragEnd: function (e) {
- if (this._path._bounds) this.resetBounds()
- this._path.fire('moveend')
- .fire('dragend', e)
- },
+ _onDragEnd: function (e) {
+ if (this._path._bounds) this.resetBounds();
+ this._path.fire('moveend')
+ .fire('dragend', e);
+ },
- latLngToLayerPoint: function (latlng) {
- // Same as map.latLngToLayerPoint, but without the round().
- const projectedPoint = this._path._map.project(L.latLng(latlng))
- return projectedPoint._subtract(this._path._map.getPixelOrigin())
- },
+ latLngToLayerPoint: function (latlng) {
+ // Same as map.latLngToLayerPoint, but without the round().
+ var projectedPoint = this._path._map.project(L.latLng(latlng));
+ return projectedPoint._subtract(this._path._map.getPixelOrigin());
+ },
- updateLatLng: function (latlng) {
- const oldPoint = this.latLngToLayerPoint(latlng)
- oldPoint._add(this._offset)
- const newLatLng = this._path._map.layerPointToLatLng(oldPoint)
- latlng.lat = newLatLng.lat
- latlng.lng = newLatLng.lng
- },
+ updateLatLng: function (latlng) {
+ var oldPoint = this.latLngToLayerPoint(latlng);
+ oldPoint._add(this._offset);
+ var newLatLng = this._path._map.layerPointToLatLng(oldPoint);
+ latlng.lat = newLatLng.lat;
+ latlng.lng = newLatLng.lng;
+ },
- resetBounds: function () {
- this._path._bounds = new L.LatLngBounds()
- this._path.eachLatLng(function (latlng) {
- this._bounds.extend(latlng)
- })
- }
+ resetBounds: function () {
+ this._path._bounds = new L.LatLngBounds();
+ this._path.eachLatLng(function (latlng) {
+ this._bounds.extend(latlng);
+ });
+ }
- })
+});
- L.Path.include({
+L.Path.include({
- eachLatLng: function (callback, context) {
- context = context || this
- const loop = function (latlngs) {
- for (let i = 0; i < latlngs.length; i++) {
- if (L.Util.isArray(latlngs[i])) loop(latlngs[i])
- else callback.call(context, latlngs[i])
- }
+ eachLatLng: function (callback, context) {
+ context = context || this;
+ var loop = function (latlngs) {
+ for (var i = 0; i < latlngs.length; i++) {
+ if (L.Util.isArray(latlngs[i])) loop(latlngs[i]);
+ else callback.call(context, latlngs[i]);
}
- loop(this.getLatLngs ? this.getLatLngs() : [this.getLatLng()])
- }
+ };
+ loop(this.getLatLngs ? this.getLatLngs() : [this.getLatLng()]);
+ }
- })
+});
- L.Path.addInitHook(function () {
- this.dragging = new L.Handler.PathDrag(this)
- if (this.options.draggable) {
- this.once('add', function () {
- this.dragging.enable()
- })
- }
- })
-}
-export default {
- init
-}
+L.Path.addInitHook(function () {
+
+ this.dragging = new L.Handler.PathDrag(this);
+ if (this.options.draggable) {
+ this.once('add', function () {
+ this.dragging.enable();
+ });
+ }
+
+});
\ No newline at end of file
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 612e145..be0702d 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -170,5 +170,8 @@
left: 100px;
z-index: 9999;
}
+ .leaflet-custom-icon{
+ background: white;
+ }
}
</style>
--
Gitblit v1.8.0