t

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

@@ -5,7 +5,7 @@
       :show-close="false"
       :close-on-click-modal="false"
       :visible.sync="isShow"
-      :title="mteStr === 'polygonAdd' || mteStr === 'polylineAdd' ? '多边形或折线操作' : '文字操作'"
+      :title="mteStr === 'polygonAdd' || mteStr === 'polylineAdd' ? '多边形或折线操作' : '文字或圆点操作'"
       :fullscreen="false"
       width="400px"
       custom-class="xl-dialog"
@@ -147,7 +147,7 @@ export default {
         ]
       } else {
         if (!params.color) {
-          params.color = '#fff'
+          params.color = '#d71139'
         }
         this.formData = [
           { label: '内容', key: 'text', rules: 1},

src/views/map/dtl.vue

@@ -21,6 +21,7 @@
       </div>
       <div class="sdb-add">
         <div class="b t2" @click="openMte('polygonAdd')">添加多边形</div>
+        <div class="b t2" @click="openMte('circleAdd')">添加圆点</div>
         <div class="b t2" @click="openMte('polylineAdd')">添加折线</div>
         <div class="b t2" @click="openMte('textAdd')">添加文字</div>
         <div class="b t2" @click="openImg()">添加图标</div>
@@ -42,6 +43,19 @@
           </div>
         </div>
       </div>
+      <div class="sdb-list" v-if="circles.length > 0">
+        <div class="label t2">圆点列表(选中:{{circleIndex + 1}})</div>
+        <div class="ul">
+          <div class="op" v-for="(circle, index) in circles" :key="index">
+            <p class="p1" @click="openMte('circleAdd', {obj: circle, index})">({{index + 1}}){{circle.text}}</p>
+            <p class="more">
+              <span v-if="circle.editable" class="d d1" @click="mapIsEdit(index, 'circles')">编辑</span>
+              <span v-else class="d d3" @click="mapIsEdit(index, 'circles')">只读</span>
+              <span class="d d4" @click="mapDel(index, 'circles')">删除</span>
+            </p>
+          </div>
+        </div>
+      </div>
       <div class="sdb-list" v-if="polylines.length > 0">
         <div class="label t2">折线列表(选中:{{polylineIndex + 1}})</div>
         <div class="ul">
@@ -154,7 +168,7 @@
       </el-amap-polygon>
       <el-amap-polyline
         v-for="(polyline, index) in polylines"
-        :key="index"
+        :key="20000 + index"
         :editable="polyline.editable"
         :fillColor="polyline.fillColor"
         :fillOpacity="polyline.fillOpacity"
@@ -168,6 +182,20 @@
       </el-amap-polyline>
       <!-- closeWhenClickMap="true"  -->
       <el-amap-info-window :isCustom="true" :position="winObj.position" :content="winObj.content"></el-amap-info-window>
+      <!-- <el-amap-circle :center="circleCenter" :radius="radius" :visible="visible" :editable="edit" :draggable="draggable" @click="click"></el-amap-circle> -->
+      <el-amap-circle
+        v-for="(circle, index) in circles" 
+        :key="30000 + index" 
+        :center="circle.center" 
+        :radius="circle.radius"
+        :editable="circle.editable"
+        :fillColor="'#d71139'"
+        :fillOpacity="0.7"
+        :strokeColor="'#d71139'"
+        :strokeOpacity="0.8"
+        :extData="{index}"
+        :events="circleEvents">
+      </el-amap-circle>
     </el-amap>
     <MapTextEdit
       :isShow="isMteShow"
@@ -198,6 +226,7 @@ export default {
     return {
       isImgShow: false,
       polylines: [],
+      circles: [],
       estateList: [],
       schoolList: [],
       medium_school_list: [],
@@ -291,6 +320,21 @@ export default {
           that.curMarkersIndex = eData.index
         },
       },
+      circleEvents: {
+        click(e) {
+          const eData = e.target.getExtData()
+          that.circleIndex = eData.index
+          const lnglatObj = e.lnglat
+          that.winObj.position = [lnglatObj.lng, lnglatObj.lat]
+          const cObj = that.circles[that.circleIndex]
+          that.winObj.content = `
+            <div style="border-radius: 6px;overflow:hidden;background:#fff;box-shadow: 0 0 3px #ccc;">
+              <div style="font-weight: bold;color:#fff;padding: 6px;background:#d71139;user-select: none;margin-bottom: 6px;text-align: left;font-size: 12px;">南昌地铁</div>
+              <div style="padding: 0 6px 6px;color: #999;font-size: 12px;">站点：${cObj.text}</div>
+            </div>
+          `
+        }
+      },
       polygonEvents: {
         click(e) {
           const eData = e.target.getExtData()
@@ -392,6 +436,7 @@ export default {
       polygonIndex: 0,
       polylineIndex: 0,
       curMarkersIndex: 0,
+      circleIndex: 0,
       plugin: [{
         pName: 'MouseTool',
       }],
@@ -718,6 +763,7 @@ export default {
             position: [data.mapDiyObj.center[0], data.mapDiyObj.center[1]],
           }
           this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
+          this.circles = data.circles && data.circles.length > 0 ? [...data.circles] : []
           let polygons = [...data.polygons]
           // 
           // polygons.forEach(item => {
@@ -857,6 +903,32 @@ export default {
         })
       })
     },
+    circleAdd (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 circles = [...that.circles]
+        circles.push({
+          center: [cPath.lng, cPath.lat],
+          editable: true,
+          radius: 50,
+          fillColor: obj.color || '#d71139',
+          strokeColor: obj.color || '#d71139',
+          text: obj.text,
+          // strokeStyle: obj.strokeStyle || 'solid',
+        })
+        that.circles = [...circles]
+        window.setTimeout(() => {
+          mouseTool.close(true)
+          that.isDbShow = true
+        }, 100)
+      })
+    },
     polygonAdd (obj) {
       const that = this
       const curMap = this.amapManager.getMap()
@@ -928,7 +1000,7 @@ export default {
     mapIsEdit (index, str) {
       this.curMarkersIndex = index
       let tempData = [...this[str]]
-      if (str === 'polygons' || str === 'polylines') {
+      if (str === 'polygons' || str === 'polylines' || str === 'circles') {
         if (tempData[index].editable) {
           tempData[index].editable = false
           // tempData[index].strokeStyle = 'solid'
@@ -1025,8 +1097,11 @@ export default {
           if (this.mteStr === 'polylineAdd') {
             str = 'polylines'
           }
+          if (this.mteStr === 'circleAdd') {
+            str = 'circles'
+          }
           let tempData = [...this[str]]
-          if (this.mteStr === 'textAdd') {
+          if (this.mteStr === 'textAdd' || this.mteStr === 'circleAdd') {
             tempData[index].content = obj.text
             tempData[index].text = obj.text
             tempData[index].color = obj.color