Signed-off-by: zhaobao <528046418@qq.com>

src/api/aqpt/visualEditor.js

@@ -27,3 +27,13 @@ export function delApi(veditId) {
     method: 'delete'
   })
 }
+/**
+ * 删除
+ */
+export function updateApi(data) {
+  return request({
+    url: `/JobActivitys/vedit/update`,
+    method: 'put',
+    data
+  })
+}

src/views/aqpt/visualEditor/index.vue

@@ -19,7 +19,7 @@
           <li>3.编辑信息保存点位</li>
         </ul>
       </div>
-      <div v-if="type==2" class="saveForm">
+      <div v-if="type==2||type=='drage'" class="saveForm">
         <div class="title">作业点基本信息</div>
         <div class="item">
           <div class="lable">作业项目：</div>
@@ -65,7 +65,7 @@
 <script>
 import * as L from 'leaflet'
 import '@geoman-io/leaflet-geoman-free'
-import { getLayersApi, addApi, delApi } from '@/api/aqpt/visualEditor'
+import { getLayersApi, addApi, delApi, updateApi } from '@/api/aqpt/visualEditor'
 export default {
   data() {
     return {
@@ -80,6 +80,7 @@ export default {
         icon: '',
         name: ''
       },
+      dragstartMarker: undefined,
       map: undefined,
       markerGroup: [],
       mapList: [],
@@ -133,12 +134,31 @@ export default {
       if (this.type === 3) {
         // 删除表单里面的保存
         this.type = 1
+      } else if (this.type === 'drage') {
+        updateApi({
+          'jobactivityTitle': this.layer.options.icon.options.name,
+          'jobactQywzjd': this.layer._latlng.lng,
+          'jobactQywzwd': this.layer._latlng.lat,
+          'veditId': this.veditId,
+          'typeId': this.layer.options.icon.options.typeId
+        }).then(() => {
+          this.type = 1
+          this.checkItemIndex = -1
+          this.state = 2
+          this.saveForm.icon = ''
+          this.saveForm.name = ''
+          this.$message.success('修改成功！')
+          this.dragstartMarker = undefined
+          this.markerGroup.clearLayers()
+          this.getLayers()
+        })
       } else {
         // 新增
         addApi({
           'jobactivityTitle': this.layer.options.icon.options.name,
           'jobactQywzjd': this.layer._latlng.lng,
           'jobactQywzwd': this.layer._latlng.lat,
+          'veditId': this.veditId,
           'typeId': this.layer.options.icon.options.typeId
         }).then(() => {
           this.type = 1
@@ -154,32 +174,23 @@ export default {
       }
     },
     cancel() {
-      this.type = 1
       this.state = 2
       this.checkItemIndex = -1
       this.saveForm.icon = ''
       this.saveForm.name = ''
+      if (this.type === 'drage') {
+        this.type = 1
+        this.dragstartMarker.marker.setLatLng(this.dragstartMarker._latlng)
+        this.dragstartMarker.marker.dragging.disable()
+        this.dragstartMarker = undefined
+        return
+      }
       if (this.map._layers[this.layer._leaflet_id]) {
         this.map.removeLayer(this.map._layers[this.layer._leaflet_id])
       }
     },
     delMarker() {
-      if (this.veditId) {
-        delApi(this.veditId).then(() => {
-          this.type = 1
-          this.state = 2
-          this.checkItemIndex = -1
-          this.deleteForm.icon = ''
-          this.deleteForm.name = ''
-          if (this.map._layers[this.markerId]) {
-            this.map.removeLayer(this.map._layers[this.markerId])
-          }
-          this.$message.success('删除成功！')
-
-          this.markerGroup.clearLayers()
-          this.getLayers()
-        })
-      } else {
+      delApi(this.veditId).then(() => {
         this.type = 1
         this.state = 2
         this.checkItemIndex = -1
@@ -188,7 +199,11 @@ export default {
         if (this.map._layers[this.markerId]) {
           this.map.removeLayer(this.map._layers[this.markerId])
         }
-      }
+        this.$message.success('删除成功！')
+
+        this.markerGroup.clearLayers()
+        this.getLayers()
+      })
     },
     initMap() {
       this.map = L.map('vmap', {
@@ -230,16 +245,35 @@ export default {
             className: option.icon,
             iconSize: iconSize
           })
-          const marker = L.marker(option.coordinates, { ...option.options, icon: myIcon })
+          const marker = L.marker(option.coordinates, { ...option.options, icon: myIcon, draggable: false })
           // .bindPopup(option.tip)
             .addTo(markers)
           marker.on('click', function(ev) {
+            if (self.type === 'drage') {
+              self.$message.success('请先确认当前标记点操作！')
+              return
+            }
             const id = ev.target.options?.id
             self.type = 3
             self.veditId = id
             self.markerId = ev.target._leaflet_id
             self.deleteForm.name = ev.target.options.name
             self.deleteForm.icon = require(`./images/layers/${ev.target.options.typeId}.png`)
+            marker.dragging.enable()
+          })
+          marker.on('dragstart', function(ev) {
+            const id = ev.target.options?.id
+            self.type = 'drage'
+            if (self.dragstartMarker === undefined) {
+              self.dragstartMarker = { marker, _latlng: ev.target._latlng }
+            }
+            self.veditId = id
+            self.markerId = ev.target._leaflet_id
+            self.saveForm.name = ev.target.options.name
+            self.saveForm.icon = require(`./images/layers/${ev.target.options.typeId}.png`)
+          })
+          marker.on('dragend', function(ev) {
+            self.layer = ev.target
           })
         }
         markers.addTo(this.map)
@@ -460,6 +494,11 @@ export default {
   background-size: 100%;
 
 }
+.leaflet-marker-icon.leaflet-marker-draggable{
+  box-shadow: 0 2px 4px #154c74;
+  background-color: #52b6ff;
+  border-radius: 4px;
+}
 .leaflet-marker-icon.project-1{
   background-image: url("./images/layers/1.png");
 }