增加绘制线段功能

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 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>
@@ -72,12 +72,15 @@ export default {
 <style lang="scss" scoped>
 .line-container {
   width: 400px;
-  height: 30px;
+  height: 40px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  margin-left: 10px;
-  margin-top: 15px;
+  // margin-left: 10px;
+  margin-top: 10px;
+  &:hover {
+    background-color: aquamarine;
+  }
   .name {
     // color: #fff;
 

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>
+        <!-- <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;