增加绘制线段功能

src/assets/MouseTool.js

+export default class MouseTool {
+  constructor(map, opt) {
+    this._initialize(map, opt || {})
+  }
+  _initialize(map, opt) {
+    this._map = map
+    this._drawEvent = opt.drawEvent
+    this._fillColor = opt.fillColor || '#ffecb3'
+    this._fillOpacity = opt.fillOpacity || 0.4
+    this._strokeColor = opt.strokeColor || '#ffecb3'
+    this._strokeOpacity = opt.strokeOpacity || 1
+    this._callback = opt.callback
+    // this._drawType = opt.drawType || 'polyline'
+
+  }
+
+  startDraw() {
+    if (!this._mouseTool) {
+      this._mouseTool = new AMap.MouseTool(this._map)
+      this._mouseTool.polyline({
+        fillColor: this._fillColor,
+        fillOpacity: this._fillOpacity,
+        strokeColor: this._strokeColor,
+        strokeOpacity: this._strokeOpacity
+      })
+
+      this._mouseTool.on('draw', e => {
+        // console.log(e)
+        let lineObj = e.obj
+        lineObj.setMap(null)
+        typeof this._callback && this._callback(e)
+      })
+    }
+    // this._map.setDefaultCursor('crosshair')
+  }
+
+  endDraw() {
+    if (this._mouseTool) {
+
+      this._mouseTool.close()
+      this._mouseTool.setMap(null)
+      this._mouseTool = null
+    }
+  }
+
+  destory() {
+    this.endDraw()
+  }
+
+}
\ No newline at end of file

src/components/DrawLine.vue

 <script>
 // 线段编辑
+import MouseTool from '@/assets/MouseTool'
 export default {
   render () { return null },
   props: {
     draw: {
       type: Boolean,
       default: false
+    },
+    map: {
+      type: Object,
+      required: true
     }
   },
   mounted () {
+    this.$mouseTool = new MouseTool(this.map, {
+      strokeColor: 'red',
+      callback: this.drawCallback.bind(this)
+    })
     if (this.draw) {
       this.initDraw()
     }
   },
   beforeDestroy () {
     if (this.draw) this.destory()
+    this.$mouseTool.destory()
+    this.$mouseTool = null
   },
   methods: {
+    drawCallback (e) {
+      // console.log(e, this)
+      let lineObj = e.obj
+      let path = lineObj.getPath()
+      let list = path.map(t => {
+        return [t.getLng(), t.getLat()]
+      })
+      this.$emit('draw', list)
+    },
     initDraw () {
-
+      this.$mouseTool.startDraw()
     },
     destory () {
-
+      if (this.$mouseTool) {
+        this.$mouseTool.endDraw()
+      }
     }
   },
   watch: {

src/components/LineView.vue

-<template>
-  <div class="line-container" @mouseout="mouseout" @mouseover="mouseover">
-    <!-- <span class="name">{{name}} {{startPointName}}</span> -->
-    <div style="width:150px;margin-right:5px;" class="input-container">
-      <el-input :value="name" @input="changeName"></el-input>
-    </div>
-
-    <el-button type="success" size="mini" @click="reverse">反转</el-button>
-    <el-button @click="remove" type="danger" icon="el-icon-delete" size="mini" circle></el-button>
-    <el-button type="primary" size="mini" @click="copyLine">导出</el-button>
-    <el-switch :value="data.lock" size="mini" style="margin-left:5px;" @input="changeLock"></el-switch>
-
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    name () {
-      if (this.data) {
-        return this.data.name
-      }
-      return '无'
-    },
-    startPoint () {
-      if (this.data) {
-        let list = this.data.line
-        if (list && list.length > 0) {
-          return list[0]
-        }
-      }
-      return null
-    },
-    // startPointName () {
-    //   if (this.startPoint) {
-    //     return `${this.startPoint[0].toFixed(3)},${this.startPoint[1].toFixed(3)}...`
-    //   }
-    //   return ''
-    // }
-  },
-  methods: {
-    changeName (val) {
-      this.$emit('input', val)
-    },
-    changeLock () {
-      this.$emit('lock')
-    },
-    remove () {
-      this.$emit('remove')
-    },
-    reverse () {
-      this.$emit('reverse')
-    },
-    mouseout () {
-      this.$emit('mouseout')
-    },
-    mouseover () {
-      this.$emit('mouseover')
-    },
-    copyLine () {
-      this.$emit('copyLine')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.line-container {
-  width: 400px;
-  height: 30px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-left: 10px;
-  margin-top: 15px;
-  .name {
-    // color: #fff;
-
-    margin-left: 10px;
-    margin-right: 10px;
-  }
-}
-</style>
+<template>
+  <div class="line-container" @mouseout="mouseout" @mouseover="mouseover">
+    <!-- <span class="name">{{name}} {{startPointName}}</span> -->
+    <div style="width:150px;margin-right:5px;margin-left:5px;" class="input-container">
+      <el-input size="mini" :value="name" @input="changeName"></el-input>
+    </div>
+
+    <el-button type="success" size="mini" @click="reverse">反转</el-button>
+    <el-button @click="remove" type="danger" icon="el-icon-delete" size="mini" circle></el-button>
+    <el-button type="primary" size="mini" @click="copyLine">导出</el-button>
+    <el-switch :value="data.lock" size="mini" style="margin-left:5px;" @input="changeLock"></el-switch>
+
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    name () {
+      if (this.data) {
+        return this.data.name
+      }
+      return '无'
+    },
+    startPoint () {
+      if (this.data) {
+        let list = this.data.line
+        if (list && list.length > 0) {
+          return list[0]
+        }
+      }
+      return null
+    },
+    // startPointName () {
+    //   if (this.startPoint) {
+    //     return `${this.startPoint[0].toFixed(3)},${this.startPoint[1].toFixed(3)}...`
+    //   }
+    //   return ''
+    // }
+  },
+  methods: {
+    changeName (val) {
+      this.$emit('input', val)
+    },
+    changeLock () {
+      this.$emit('lock')
+    },
+    remove () {
+      this.$emit('remove')
+    },
+    reverse () {
+      this.$emit('reverse')
+    },
+    mouseout () {
+      this.$emit('mouseout')
+    },
+    mouseover () {
+      this.$emit('mouseover')
+    },
+    copyLine () {
+      this.$emit('copyLine')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.line-container {
+  width: 400px;
+  height: 40px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  // margin-left: 10px;
+  margin-top: 10px;
+  &:hover {
+    background-color: aquamarine;
+  }
+  .name {
+    // color: #fff;
+
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+</style>

src/views/Home.vue

@@ -3,16 +3,17 @@
     <div class="map-container" @mousemove="mapMouseMove" @mouseout="mapMouseOut">
       <div class="map" ref="map"></div>
       <LineManagerView v-if="map" :map="map" :data="lineList" ref="lineManager" :status="status" :x="x" :y="y" :clearWidth="clearNumber" />
-      <DrawLine :draw="isDrawLine" @createLine="createLine" />
+      <DrawLine v-if="map" :map="map" :draw="isDrawLine" @draw="createLine" />
     </div>
 
     <div class="control">
       <div class="button-control">
-        <label>{{statusName}}</label>
-        <el-button v-if="!exportVisible && !isDrawLine && statusName === '查看'"  style="margin-left:5px;" type="primary" @click="showAdd">新增</el-button>
-        <el-button v-if="!exportVisible && !isDrawLine"  style="margin-left:5px;" type="warning" @click="clearModel">{{statusName == '擦除' ? '取消擦除' : '擦除'}}</el-button>
+        <!-- <label>{{statusName}}</label> -->
+        <el-button v-if="!exportVisible && !isDrawLine && statusName === '查看'" style="margin-left:5px;" type="primary" @click="showAdd">新增</el-button>
+        <el-button v-if="!exportVisible && !isDrawLine" style="margin-left:5px;" type="warning" @click="clearModel">{{statusName == '擦除' ? '取消擦除' : '擦除'}}</el-button>
         <el-button v-if="!exportVisible && !isDrawLine && statusName === '查看'" style="margin-left:5px;" type="success" @click="merge">合并</el-button>
         <el-button style="margin-left:5px;" @click="exportAll">{{exportVisible ? '关闭导出' : '导出'}}</el-button>
+        <el-button v-if="!exportVisible && statusName === '查看'" @click="drawLine" style="margin-left:5px;">{{isDrawLine ? '关闭绘制' : '绘制线'}}</el-button>
       </div>
       <div class="line-control">
         <template v-if="statusName == '查看'">
@@ -72,7 +73,8 @@ export default {
       remark: null,
       imgBase64: null,
       exportVisible: false,
-      isDrawLine: false
+      isDrawLine: false,
+      drawIndex: 0
     }
   },
   computed: {
@@ -121,9 +123,7 @@ export default {
 
   },
   methods: {
-    createLine (line) {
-      console.log(line)
-    },
+
     copyLine (lineObj) {
       let line = lineObj.line
       let st = LineToString(line)
@@ -134,6 +134,9 @@ export default {
     exportAll () {
       this.exportVisible = !this.exportVisible
     },
+    drawLine () {
+      this.isDrawLine = !this.isDrawLine
+    },
     // 合并
     merge () {
       if (this.status == LineManager.VIEW) {
@@ -199,6 +202,19 @@ export default {
       })]
 
     },
+    createLine (line) {
+      // console.log(line)
+      this.drawIndex++
+      let name = '自定义线段' + this.drawIndex
+      let o = {
+        line: line,
+        id: ++__id,
+        name: name,
+        color: 'blue',
+        lock: false
+      }
+      this.lineList.unshift(o)
+    },
     addLine (obj) {
       // console.log(str)
 
@@ -324,7 +340,7 @@ export default {
     .line-control {
       width: 100%;
       height: 100%;
-      background-color: aqua;
+      // background-color: aqua;
       overflow-y: auto;
       // display: flex;
       // flex-flow: row wrap;