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' ? '多边形操作' : '文字操作'"
+      :title="mteStr === 'polygonAdd' || mteStr === 'polylineAdd' ? '多边形或折线操作' : '文字操作'"
       :fullscreen="false"
       width="400px"
       custom-class="xl-dialog"
@@ -13,7 +13,7 @@
     >
       <base-form ref="ruleForm" :data="formData" :is-inline="false" label-width="70px">
       </base-form>
-      <div class="scoped-color-quick" v-if="mteStr === 'polygonAdd'">
+      <div class="scoped-color-quick" v-if="mteStr === 'polygonAdd' || mteStr === 'polylineAdd'">
         <div class="t">快速选择颜色</div>
         <div :class="fillColor === item.color ? 'op cur' : 'op'" v-for="(item, i) in colorArr" @click="colorHandle(item)" :style="`background: ${item.color}`" :key="i">{{fillColor === item.color ? '已选' : ' '}}</div>
       </div>
@@ -72,7 +72,7 @@ export default {
         params.strokeColor = this.strokeColor
       }
       if (!params.text) params.text = '标题示例'
-      if (this.mteStr === 'polygonAdd') {
+      if (this.mteStr === 'polygonAdd' || this.mteStr === 'polylineAdd') {
         if (!params.fillColor) {
           params.fillColor = this.fillColor
           params.fillOpacity = '0.4'

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('polylineAdd')">添加折线</div>
         <div class="b t2" @click="openMte('textAdd')">添加文字</div>
       </div>
       <div class="sdb-add">
@@ -40,6 +41,20 @@
           </div>
         </div>
       </div>
+      <div class="sdb-list" v-if="polylines.length > 0">
+        <div class="label t2">折线列表(选中:{{polylineIndex + 1}})</div>
+        <div class="ul">
+          <div class="op" v-for="(polyline, index) in polylines" :key="index">
+            <p class="p1" @click="openMte('polylineAdd', {obj: polyline, index})">({{index + 1}}){{polyline.text}}</p>
+            <p class="more">
+              <!-- <span v-if="polyline.editable" class="d d2" @click="textAdd(polyline)">标点</span> -->
+              <span v-if="polyline.editable" class="d d1" @click="mapIsEdit(index, 'polylines')">编辑</span>
+              <span v-else class="d d3" @click="mapIsEdit(index, 'polylines')">只读</span>
+              <span class="d d4" @click="mapDel(index, 'polylines')">删除</span>
+            </p>
+          </div>
+        </div>
+      </div>
       <div class="sdb-list" v-if="markerData.length > 0">
         <div class="label t2">文字列表(选中:{{curMarkersIndex + 1}})</div>
         <div class="ul">
@@ -132,6 +147,19 @@
         :extData="{index}"
         :events="polygonEvents">
       </el-amap-polygon>
+      <el-amap-polyline
+        v-for="(polyline, index) in polylines"
+        :key="index"
+        :editable="polyline.editable"
+        :fillColor="polyline.fillColor"
+        :fillOpacity="polyline.fillOpacity"
+        :strokeColor="polyline.strokeColor"
+        :strokeWeight="polyline.strokeWeight"
+        :strokeOpacity="polyline.strokeOpacity"
+        :extData="{index}"
+        :events="polylineEvents"
+        :path="polyline.path">
+      </el-amap-polyline>
     </el-amap>
     <MapTextEdit
       :isShow="isMteShow"
@@ -155,6 +183,7 @@ export default {
   data() {
     const that = this
     return {
+      polylines: [],
       estateList: [],
       schoolList: [],
       medium_school_list: [],
@@ -249,6 +278,12 @@ export default {
           // wx.miniProgram.navigateTo({url: '/pagesSchool/indexDtl?id=25'})
         },
       },
+      polylineEvents: {
+        click(e) {
+          const eData = e.target.getExtData()
+          that.polylineIndex = eData.index
+        },
+      },
       estateEvents: {
         click(e) {
           const eData = e.target.getExtData()
@@ -268,6 +303,7 @@ export default {
         },
       },
       polygonIndex: 0,
+      polylineIndex: 0,
       curMarkersIndex: 0,
       plugin: [{
         pName: 'MouseTool',
@@ -588,6 +624,7 @@ export default {
       }).then(res => {
         if (res.data) {
           const data = JSON.parse(res.data)
+          this.polylines = data.polylines && data.polylines.length > 0 ? [...data.polylines] : []
           this.polygons = [...data.polygons]
           this.markerData = [...data.markerData]
           this.mapDiyObj = {
@@ -682,12 +719,22 @@ export default {
           })
           one.path = tPath
         })
+        let polylines = JSON.parse(JSON.stringify(this.polylines))
+        polylines.map(one=> {
+          let tPath = []
+          one.editable = false
+          one.path.forEach(sub => {
+            tPath.push([sub.lng, sub.lat])
+          })
+          one.path = tPath
+        })
         let markerData = JSON.parse(JSON.stringify(this.markerData))
         markerData.map(one => {
           one.draggable = false
         })
         const data = {
           polygons,
+          polylines,
           markerData,
           mapDiyObj: this.mapDiyObj,
         }
@@ -735,10 +782,42 @@ export default {
         that.isDbShow = true
       })
     },
+    polylineAdd (obj) {
+      const that = this
+      const curMap = this.amapManager.getMap()
+      let mouseTool = new AMap.MouseTool(curMap)
+      mouseTool.polyline({
+        fillColor:'#00b0ff',
+        strokeColor:'#80d8ff',
+        editable: true,
+        strokeStyle: 'dashed',
+      })
+      AMap.event.addListener(mouseTool,'draw',function(e) {
+        let cPath = [...e.obj.getPath()]
+        let tempPath = []
+        cPath.forEach(item => {
+          tempPath.push([item.lng, item.lat])
+        })
+        let polylines = [...that.polylines]
+        polylines.push({
+          path: tempPath,
+          editable: true,
+          fillColor: obj.fillColor || '#DC3021', // 填充色
+          fillOpacity: obj.fillOpacity || 0.4, // 填充透明度
+          strokeColor: obj.strokeColor || '#DC3021', // 轮廓颜色
+          strokeWeight: 5, // 轮廓宽度
+          strokeOpacity: 0.8, // 轮廓透明度
+          text: obj.text,
+        })
+        that.polylines = [...polylines]
+        mouseTool.close(true)
+        that.isDbShow = true
+      })
+    },
     mapIsEdit (index, str) {
       this.curMarkersIndex = index
       let tempData = [...this[str]]
-      if (str === 'polygons') {
+      if (str === 'polygons' || str === 'polylines') {
         if (tempData[index].editable) {
           tempData[index].editable = false
           tempData[index].strokeStyle = 'solid'
@@ -773,7 +852,17 @@ export default {
       if (obj) {
         if (bcStr && bcStr === 'edit') {
           const index = this.mteObj.index || 0
-          const str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
+          let str = ''
+          // let str = this.mteStr === 'textAdd' ? 'markerData' : 'polygons'
+          if (this.mteStr === 'textAdd') {
+            str = 'markerData'
+          }
+          if (this.mteStr === 'polygonAdd') {
+            str = 'polygons'
+          }
+          if (this.mteStr === 'polylineAdd') {
+            str = 'polylines'
+          }
           let tempData = [...this[str]]
           if (this.mteStr === 'textAdd') {
             tempData[index].content = obj.text
@@ -884,6 +973,7 @@ export default {
       margin-right: 10px;
       font-size: 14px;
       text-align: center;
+      margin-bottom: 10px;
       &:last-child {
         margin-right: 0;
       }