t

src/views/map/components/popup/MapImgEdit.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <el-dialog
+      v-loading="loading"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :visible.sync="isShow"
+      :title="'添加图案操作'"
+      :fullscreen="false"
+      width="400px"
+      custom-class="xl-dialog"
+      center
+    >
+      <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="70px">
+      </base-form>
+      <div class="scoped-img-quick">
+        <div class="t">快速选择图标</div>
+        <div :class="curImgUrl === item.url ? 'op cur' : 'op'" v-for="(item, i) in imgArr" @click="imgHandle(item)" :key="i">
+          <img :src="item.url" alt="img" class="img">
+        </div>
+      </div>
+      <div class="xl-form">
+        <div class="xl-form-footer">
+          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
+          <el-button v-if="curObj.obj" class="xl-form-btn t1" @click="close('confirm')">保存</el-button>
+          <el-button v-else class="xl-form-btn t3" @click="close('confirm')">去画图</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { arrToObj } from '@/utils'
+export default {
+  components: { },
+  mixins,
+  props: {
+    isShow: Boolean,
+    curObj: Object,
+  },
+  data() {
+    return {
+      loading: false,
+      formData: [],
+      curImgUrl: '',
+      imgArr: [
+        {url: 'https://img2.honglounews.com/20221205054341-4368.png'},
+        {url: 'https://img2.honglounews.com/20221205054412-6635.png'},
+      ],
+      cObj: {},
+    }
+  },
+  watch: {
+    isShow: function(val) {
+      if (val) {
+        this.cObj = JSON.parse(JSON.stringify(this.curObj))
+        this.getDef()
+      }
+    },
+  },
+  methods: {
+    getDef (str) {
+      let params = { ...this.curObj.obj }
+      if (str === 'color') {
+        const oldform = this.$refs.ruleForm.baseForm
+        params = {...oldform}
+        params.icon = this.curImgUrl
+      }
+      if (!params.text) params.text = '标题示例'
+      if (!params.icon) params.icon = 'https://img2.honglounews.com/20221205054341-4368.png'
+      this.formData = [
+        { label: '站点', key: 'text', rules: 1},
+        { label: '图标', key: 'icon', type: 'uploads', rules: 1 },
+      ]
+      this.setDefaultValue(params)
+    },
+    imgHandle (item) {
+      this.curImgUrl = item.url
+      this.getDef('color')
+    },
+    close (str) {
+      if (str === 'confirm') {
+        this.$refs['ruleForm'].$refs['baseForm'].validate((valid) => {
+          if (valid) {
+            const oldform = this.$refs.ruleForm.baseForm
+            const newForm = { ...oldform }
+            if (this.curObj.obj) {
+              this.$emit('close', newForm, 'edit')
+            } else {
+              this.$emit('close', newForm)
+            }
+            this.setDefaultValue()
+          }
+        })
+      } else {
+        this.$emit('close')
+        this.setDefaultValue()
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../../../../styles/libEdit.scss';
+.lib-edit {
+  padding-top: 0;
+  ::v-deep .el-date-editor.el-input {
+    width: 100%;
+  }
+  ::v-deep .el-textarea__inner {
+    height: 300px;
+  }
+}
+
+.scoped-img-quick {
+  margin-bottom: 20px;
+  .t {
+    color: #313131;
+  }
+  .op {
+    display: inline-block;
+    vertical-align: middle;
+    width: 44px;
+    height: 44px;
+    color: #fff;
+    cursor: pointer;
+    text-align: center;
+    margin-right: 10px;
+    &.cur {
+      border: 2px solid #19be6b;
+    }
+    .img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+</style>

src/views/map/dtl.vue

@@ -23,6 +23,7 @@
         <div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
         <div class="b t2" @click="openMte('polylineAdd')">添加折线</div>
         <div class="b t2" @click="openMte('textAdd')">添加文字</div>
+        <div class="b t2" @click="openImg()">添加图标</div>
       </div>
       <div class="sdb-add">
         <div class="b t3" @click="saveHandle()">保 存</div>
@@ -59,7 +60,8 @@
         <div class="label t2">文字列表(选中:{{curMarkersIndex + 1}})</div>
         <div class="ul">
           <div class="op" v-for="(t, index) in markerData" :key="index">
-            <p class="p1" @click="openMte('textAdd', {obj: t, index})">({{index + 1}}){{t.content}}</p>
+            <p class="p1" v-if="t.icon" @click="openImg({obj: t, index})">({{index + 1}}){{t.text}}</p>
+            <p class="p1" v-else @click="openMte('textAdd', {obj: t, index})">({{index + 1}}){{t.content || t.text}}</p>
             <p class="more">
               <span v-if="t.draggable" class="d d1" @click="mapIsEdit(index, 'markerData')">编辑</span>
               <span v-else class="d d3" @click="mapIsEdit(index, 'markerData')">只读</span>
@@ -113,8 +115,9 @@
           :animation="marker.animation"
           :offset="marker.offset"
           :extData="{index}"
+          :icon="marker.icon"
           :events="markersEvents">
-          <div class="scoped-marker-text" :style="`color: ${marker.color}`">{{marker.content}}</div>
+          <div class="scoped-marker-text" v-if="!marker.icon" :style="`color: ${marker.color}`">{{marker.content}}</div>
         </el-amap-marker>
       </template>
       <template v-else>
@@ -166,23 +169,29 @@
       :mteStr="mteStr"
       :curObj="mteObj"
       @close="closeMte"/>
+    <MapImgEdit
+      :isShow="isImgShow"
+      :curObj="mteObj"
+      @close="closeImg"/>
   </div>
 </template>
 <script>
 import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'
 const amapManager = new AMapManager()
+import MapImgEdit from './components/popup/MapImgEdit'
 import MapTextEdit from './components/popup/MapTextEdit'
 import { arrToObj } from '@/utils'
 export default {
   name: 'map',
-  components: {},
-    components: {
-    MapTextEdit
+  components: {
+    MapTextEdit,
+    MapImgEdit,
   },
   mixins,
   data() {
     const that = this
     return {
+      isImgShow: false,
       polylines: [],
       estateList: [],
       schoolList: [],
@@ -840,6 +849,58 @@ export default {
         this.$storage(`map_${str}`, JSON.stringify(tempData))
       })
     },
+    openImg (obj) {
+      this.isImgShow = true
+      if (obj) {
+        this.mteObj = {...obj}
+      }
+    },
+    closeImg (obj, bcStr) {
+      this.isImgShow = false
+      if (obj) {
+        if (bcStr && bcStr === 'edit') {
+          const index = this.mteObj.index || 0
+          let tempData = [...this.markerData]
+          tempData[index].content = obj.text
+          tempData[index].text = obj.text
+          tempData[index].color = obj.color
+          this.markerData = [...tempData]
+          this.$storage(`map_markerData`, JSON.stringify(tempData))
+        } else {
+          console.log(obj)
+          this.imgAdd(obj)
+          this.isDbShow = false
+          this.$msgs('请在地图上操作')
+        }
+      }
+      this.mteObj = {}
+    },
+    imgAdd (obj) {
+      const that = this
+      const curMap = this.amapManager.getMap()
+      let mouseTool = new AMap.MouseTool(curMap)
+      mouseTool.marker({
+        content: ' ',
+      })
+      AMap.event.addListener(mouseTool,'draw',function(e){
+        let cPath = e.obj.getPosition()
+        let markerData = [...that.markerData]
+        markerData.push({
+          position: [cPath.lng, cPath.lat],
+          draggable: true,
+          animation: 'AMAP_ANIMATION_DROP',
+          content: '',
+          offset: [0, -10],
+          text: obj.text,
+          icon: obj.icon,
+        })
+        that.markerData = [...markerData]
+        window.setTimeout(() => {
+          mouseTool.close(true)
+          that.isDbShow = true
+        }, 100)
+      })
+    },
     openMte (str, obj) {
       this.mteStr = str
       this.isMteShow = true
@@ -1082,8 +1143,10 @@ export default {
   opacity:0;
 }
 ::v-deep .amap-icon img {
-  width: 11px !important;
-  height: 11px !important;
+  // width: 11px !important;
+  // height: 11px !important;
+  width: 20px !important;
+  height: 20px !important;
 }
 
 .scoped-marker-area {