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

src/api/aqpt/visualEditor.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+/**
+ * 查询
+ */
+export function getLayersApi() {
+  return request({
+    url: '/JobActivitys/vedit/list'
+  })
+}
+
+/**
+ * 新增
+ */
+export function addApi(data) {
+  return request({
+    url: '/JobActivitys/vedit/add',
+    method: 'post',
+    data
+  })
+}
+/**
+ * 删除
+ */
+export function delApi(veditId) {
+  return request({
+    url: `/JobActivitys/vedit/delete/${veditId}`,
+    method: 'delete'
+  })
+}

src/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import { MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import { appID, appKey, appSecret, serverUrl, devServerUrl } from '@/settings'
@@ -11,7 +11,7 @@ const service = axios.create({
   timeout: 1000 * 60 * 3 // request timeout
 })
 
-// let loadingInstance = null
+let loadingInstance = null
 
 // request interceptor
 service.interceptors.request.use(
@@ -20,7 +20,7 @@ service.interceptors.request.use(
     config.headers['AppID'] = appID
     config.headers['AppKey'] = appKey
     config.headers['AppSecret'] = appSecret
-
+    loadingInstance = Loading.service({ fullscreen: true })
     if (store.getters.token) {
       config.headers['Authorization'] = 'Bearer ' + getToken()
     }
@@ -36,6 +36,7 @@ service.interceptors.request.use(
 // response interceptor
 service.interceptors.response.use(
   response => {
+    loadingInstance.close()
     const res = response.data
     if (res.code !== 0) {
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
@@ -63,6 +64,7 @@ service.interceptors.response.use(
     }
   },
   error => {
+    loadingInstance.close()
     Message({
       message: error.message || 'Error',
       type: 'error',

src/views/aqpt/visualEditor/index.vue

@@ -55,7 +55,7 @@
           </div>
         </div>
         <div class="bt-wrap">
-          <div class="bt">保存</div>
+          <div class="bt" @click="save">保存</div>
           <div class="bt delete margin" @click="delMarker">删除</div>
         </div>
       </div>
@@ -65,6 +65,7 @@
 <script>
 import * as L from 'leaflet'
 import '@geoman-io/leaflet-geoman-free'
+import { getLayersApi, addApi, delApi } from '@/api/aqpt/visualEditor'
 export default {
   data() {
     return {
@@ -80,21 +81,21 @@ export default {
         name: ''
       },
       map: undefined,
+      markerGroup: [],
       mapList: [],
       mapId: undefined,
-      mapRasterLayer: require('./images/bg.png'),
+      mapRasterLayer: require('./images/layout_cont.png'),
       layer: null,
-      state: 0
+      state: 0,
+      veditId: undefined
     }
   },
   created() {
     this.init()
   },
   methods: {
-
     init() {
       this.initProject()
-
       this.$nextTick(() => {
         this.initMap()
       })
@@ -134,12 +135,22 @@ export default {
         this.type = 1
       } else {
         // 新增
-        console.log(this.layer)
-        this.type = 1
-        this.checkItemIndex = -1
-        this.state = 2
-        this.saveForm.icon = ''
-        this.saveForm.name = ''
+        addApi({
+          'jobactivityTitle': this.layer.options.icon.options.name,
+          'jobactQywzjd': this.layer._latlng.lng,
+          'jobactQywzwd': this.layer._latlng.lat,
+          '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.markerGroup.clearLayers()
+          this.getLayers()
+        })
       }
     },
     cancel() {
@@ -153,10 +164,30 @@ export default {
       }
     },
     delMarker() {
-      this.type = 1
-      this.state = 2
-      if (this.map._layers[this.markerId]) {
-        this.map.removeLayer(this.map._layers[this.markerId])
+      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 {
+        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])
+        }
       }
     },
     initMap() {
@@ -168,11 +199,6 @@ export default {
         crs: L.CRS.Simple,
         zoomControl: false
       })
-      // L.control.zoom({
-      //   position: 'bottomleft',
-      //   zoomInTitle: '放大',
-      //   zoomOutTitle: '缩小'
-      // }).addTo(this.map)
       this.setRasterLayer()
       this.mapListener()
     },
@@ -184,12 +210,52 @@ export default {
         }
         return yx(y, x)
       }
-      var bounds = [xy(-200, -200), xy(200, 150)]
+      var bounds = [xy(-200, -200), xy(300, 185)]
       L.imageOverlay(this.mapRasterLayer, bounds).addTo(this.map)
       this.map.fitBounds(bounds)
+      this.getLayers()
     },
-    resetMapControl() {
-
+    getLayers() {
+      const self = this
+      getLayersApi().then((res) => {
+        const markers = L.layerGroup()
+        const coordinates = [-100, 100]
+        const options = { id: 1 }
+        const icon = 'project-12'
+        const tip = '盲板抽堵作业'
+        const iconSize = [27, 33]
+        function drawMark(option = { tip, icon, options, coordinates }) {
+          const myIcon = L.divIcon({
+            // iconUrl: require(`./images/layers/${option.options.typeId}.png`),
+            className: option.icon,
+            iconSize: iconSize
+          })
+          const marker = L.marker(option.coordinates, { ...option.options, icon: myIcon })
+          // .bindPopup(option.tip)
+            .addTo(markers)
+          marker.on('click', function(ev) {
+            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`)
+          })
+        }
+        markers.addTo(this.map)
+        this.markerGroup = markers
+        const markerList = res.data
+        if (markerList && markerList.length > 0) {
+          for (let i = 0; i < markerList.length; i++) {
+            drawMark({
+              // tip: `${markerList[i].jobactivityTitle}`,
+              icon: `project-${markerList[i].typeId}`,
+              coordinates: [markerList[i].jobactQywzwd, markerList[i].jobactQywzjd],
+              options: { id: markerList[i].veditId, typeId: markerList[i].typeId, name: markerList[i].jobactivityTitle }
+            })
+          }
+        }
+      })
     },
     mapListener() {
       const self = this
@@ -208,10 +274,12 @@ export default {
         if (e.shape === 'Marker') {
           const iconUrl = this.saveForm.icon
           const name = this.saveForm.name
+          const typeId = this.checkItemIndex + 1
           const layer = e.layer
           var icon = L.icon({
             iconUrl,
             name,
+            typeId,
             iconSize: [27, 33]
           })
           layer.setIcon(icon)
@@ -222,6 +290,7 @@ export default {
             self.deleteForm.icon = ev.target.options.icon.options.iconUrl
           })
           self.layer = layer
+          layer.addTo(this.markerGroup)
         }
         this.map.pm.disableDraw(e.shape)
       })
@@ -238,10 +307,10 @@ export default {
         console.log(e, 'rotateend')
         this.handleType = undefined
       })
-      this.map.on('contextmenu', () => {
-        // 取消所有状态
-        this.resetMapControl()
-      })
+      // this.map.on('contextmenu', () => {
+      //   // 取消所有状态
+      //   this.resetMapControl()
+      // })
     }
   }
 }
@@ -368,6 +437,10 @@ export default {
         background-color: rgba(24, 144, 255, 0.3);
         display: inline-block;
         cursor: pointer;
+        user-select: none;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
         &.save{
           background-color: #1890ff;
         }
@@ -381,3 +454,49 @@ export default {
     }
 }
 </style>
+<style>
+/* 标记点 */
+.leaflet-marker-icon{
+  background-size: 100%;
+
+}
+.leaflet-marker-icon.project-1{
+  background-image: url("./images/layers/1.png");
+}
+.leaflet-marker-icon.project-2{
+  background-image: url("./images/layers/2.png");
+}
+.leaflet-marker-icon.project-3{
+  background-image: url("./images/layers/3.png");
+}
+.leaflet-marker-icon.project-4{
+  background-image: url("./images/layers/4.png");
+}
+.leaflet-marker-icon.project-5{
+  background-image: url("./images/layers/5.png");
+}
+.leaflet-marker-icon.project-6{
+  background-image: url("./images/layers/6.png");
+}
+.leaflet-marker-icon.project-7{
+  background-image: url("./images/layers/7.png");
+}
+.leaflet-marker-icon.project-8{
+  background-image: url("./images/layers/8.png");
+}
+.leaflet-marker-icon.project-9{
+  background-image: url("./images/layers/9.png");
+}
+.leaflet-marker-icon.project-10{
+  background-image: url("./images/layers/10.png");
+}
+.leaflet-marker-icon.project-11{
+  background-image: url("./images/layers/11.png");
+}
+.leaflet-marker-icon.project-12{
+  background-image: url("./images/layers/12.png");
+}
+.leaflet-marker-icon.project-13{
+  background-image: url("./images/layers/12.png");
+}
+</style>