edit

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
     "echarts": "^4.2.1",
+    "element-ui": "^2.11.1",
     "normalize.css": "^8.0.1",
     "qs": "^6.7.0",
     "store": "^2.0.12",

src/assets/js/axios.js

@@ -4,7 +4,7 @@ import env from '@/assets/env'
 import res from '@/assets/result-model'
 import {
   errMessage,
-  getItem
+  // getItem
 } from '@/assets/js/utils'
 
 let baseAxios = axios.create({
@@ -14,22 +14,22 @@ let baseAxios = axios.create({
   // }
 })
 
-let __token = null
+// let __token = null
 let __http_one_only = false
 
 // 发送信息钩子
 baseAxios.interceptors.request.use(
   function (config) {
-    if (!config.headers.Authorization) {
-      if (__token === null) {
-        __token = getItem('token') || null
-      }
-      let tokenValue = __token
+    // if (!config.headers.Authorization) {
+    //   if (__token === null) {
+    //     __token = getItem('token') || null
+    //   }
+    //   let tokenValue = __token
 
-      if (tokenValue) {
-        config.headers.Authorization = `Bearer ${tokenValue}`;
-      }
-    }
+    //   if (tokenValue) {
+    //     config.headers.Authorization = `Bearer ${tokenValue}`;
+    //   }
+    // }
     return config
   },
   function (error) {

src/assets/setting.js

@@ -3,7 +3,7 @@ export const AMAP_KEY = '104a0cc0ce15a396dde189f4f7d438ff'
 // 高德地图版本号
 export const AMAP_VERSION = '1.4.14'
 // 高德地图插件
-export const AMAP_PLUGIN = null // 'AMap.MarkerClusterer'
+export const AMAP_PLUGIN = 'AMap.MouseTool,AMap.PolyEditor' // 'AMap.MarkerClusterer'
 // 适配rem (用到宽和html默认font-size) rem 1 = 100px
 export const SCREEN_WIDTH = 1920
 export const SCREEN_HEIGHT = 1080

src/components/map/LineManager.vue

+<script>
+import register from '@/components/map/Register'
+// import { mapGetters } from 'vuex'
+// import { getDateString } from '@/assets/js/utils'
+// import AMapUtils from 'amap-utils'
+export default {
+  mixins: [register],
+  data () {
+    return {
+      drawing: false
+    }
+  },
+  methods: {
+    // 组件入口 不需要写在create中
+    init (map) {
+      let mousetool = new AMap.MouseTool(map)
+      mousetool.on('draw', this.onDraw, this)
+      this.setObject(mousetool)
+    },
+    drawLine () {
+      this.$emit('drawstart')
+      let mousetool = this.getObject()
+      mousetool.close(true)
+      mousetool.polyline();
+      this.drawing = true
+    },
+    cancelDrawLine () {
+      this.$emit('drawcancel')
+      this.drawing = false
+      let mousetool = this.getObject()
+      mousetool.close(true)
+    },
+    onDraw (e) {
+      // console.log(e)
+      let polyline = e.obj
+      let paths = polyline.getPath()
+      this.$emit('drawend', {
+        paths
+      })
+      // 关闭 并且销毁绘制的线条
+      this.drawing = false
+      let mousetool = this.getObject()
+      mousetool.close(true)
+    },
+    // 销毁组件调用.
+    destroy () {
+      let mousetool = this.getObject()
+      mousetool.close(true)
+      mousetool.off('draw', this.onDraw, this)
+    },
+    importPath () {
+      this.$emit('import')
+    }
+  },
+  render () {
+    let buttons = []
+    if (!this.drawing) {
+      let button = ([<el-button size="mini" type="primary" on-click={this.drawLine} >画线</el-button>,
+        <el-button size="mini" type="primary" on-click={this.importPath} >导入</el-button>]
+      )
+      buttons.push(button)
+    } else {
+      let button = (<el-button size="mini" type="primary" on-click={this.cancelDrawLine} >取消</el-button>)
+      buttons.push(button)
+    }
+
+    return (
+      <div class="buttons">
+        {buttons}
+      </div>
+    )
+  }
+}
+</script>
+<style lang="scss" scoped>
+.buttons {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+
+  z-index: 99999999;
+}
+</style>

src/components/map/MapPolyLine.vue

+<script>
+import register from '@/components/map/Register'
+// import { mapGetters } from 'vuex'
+// import { getDateString } from '@/assets/js/utils'
+import AMapUtils from 'amap-utils'
+export default {
+  mixins: [register],
+  props: {
+    path: String,
+    lineStyle: Object,
+    edit: Boolean
+  },
+  computed: {
+    pathArray () {
+      let arr = AMapUtils.Utils.transposePolyrect(this.path)
+      if (arr.length > 0) {
+        return arr[0]
+      } else {
+        return null
+      }
+    },
+    defaultStyle () {
+      let style = {
+        strokeColor: '#1FBA54',
+        strokeOpacity: 1,
+      }
+      if (!this.lineStyle) {
+        return style
+      } else {
+        return {
+          ...style,
+          ...this.lineStyle
+        }
+      }
+    }
+  },
+  methods: {
+    // 组件入口 不需要写在create中
+    init () {
+      this.createLine()
+
+    },
+    createLine () {
+      this.removeLine()
+      this.destroyEditor()
+      if (this.pathArray) {
+        let map = this.getMap()
+        let line = new AMap.Polyline({
+          map,
+          path: this.pathArray,
+          ...this.defaultStyle
+        })
+        this.setObject(line)
+        if (this.edit) {
+          this.initEditor()
+        }
+      }
+    },
+    setStyle () {
+      let line = this.getObject()
+      if (line) {
+        line.setOptions(this.defaultStyle)
+      }
+    },
+    removeLine () {
+      let line = this.getObject()
+      if (line) {
+        line.setMap(null)
+        this.setObject(null)
+      }
+    },
+    initEditor () {
+      this.destroyEditor()
+      if (!this.edit) return
+      let map = this.getMap()
+      let polyline = this.getObject()
+      if (polyline) {
+        let polyEditor = new AMap.PolyEditor(map, polyline)
+        polyEditor.on('adjust', this.editHandle, this)
+        polyEditor.on('removenode', this.editHandle, this)
+        polyEditor.on('addnode', this.editHandle, this)
+        polyEditor.open()
+        this.$editor = polyEditor
+      }
+    },
+    destroyEditor () {
+      if (this.$editor) {
+        this.$editor.close()
+        this.$editor.off('adjust', this.editHandle, this)
+        this.$editor.off('removenode', this.editHandle, this)
+        this.$editor.off('addnode', this.editHandle, this)
+        this.$editor = null
+      }
+    },
+    editHandle (e) {
+      // console.log(e)
+      this.$emit('edit', e)
+    },
+    // 销毁组件调用.
+    destroy () {
+      this.destroyEditor()
+    }
+  },
+  watch: {
+    pathArray () {
+      this.createLine()
+    },
+    lineStyle () {
+      this.setStyle()
+    }
+  }
+}
+</script>

src/main.js

@@ -2,12 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store/index'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
 import 'normalize.css'
 import '@/assets/css/global.scss'
 // REM
 import '@/assets/rem'
 
+Vue.use(ElementUI)
+
 Vue.config.productionTip = false
 
 new Vue({

src/router.js

 import Vue from 'vue'
 import Router from 'vue-router'
-import app from '@/assets/js/utils'
+// import app from '@/assets/js/utils'
 
 import Home from './views/Home'
 import MapView from './views/MapView'
@@ -9,7 +9,7 @@ import Login from './views/Login'
 Vue.use(Router)
 
 let router = new Router({
-  mode: 'history',
+  // mode: 'history',
   base: process.env.BASE_URL,
   routes: [{
       path: '/login',
@@ -47,13 +47,14 @@ let router = new Router({
 router.beforeEach((to, from, next) => {
   console.log(to, 'router');
   if (to.meta.requiresAuth !== false) {
-    let token = app.getItem('Authorization')
-    if (!token) {
-      next('/login');
-      return;
-    } else {
-      next();
-    }
+    // let token = app.getItem('Authorization')
+    // if (!token) {
+    //   next('/login');
+    //   return;
+    // } else {
+    //   next();
+    // }
+    next()
   } else {
     next();
   }

src/store/modules/user.js

 // import axios from '@/assets/js/axios.js'
 // import utils from '@/assets/js/utils.js'
 
-const state = {}
-const getters = {}
-const mutations = {}
+const state = {
+  path: null
+}
+const getters = {
+  path: state => state.path
+}
+const mutations = {
+  setPath(state, path) {
+    state.path = path
+  }
+}
 const actions = {}
 
 export default {

src/views/Header.vue

 <template>
   <div class="header-container">
     <div class="logo">
-      logo
+      <el-input type="textarea" :rows="4" :value="path" readonly>
+      </el-input>
     </div>
     <div class="menu">
-      <span class="menu-item">隐患监测</span>
-      <span class="menu-item">研判分析</span>
-      <span class="menu-item">统计报表</span>
-      <span class="menu-item">数据管理</span>
-      <span class="menu-item">系统设置</span>
+      <el-button>画线</el-button>
     </div>
   </div>
 </template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  computed: {
+    ...mapGetters(['path'])
+  }
+}
+</script>
+
 <style lang="scss" scoped>
 .header-container {
   width: 100%;
@@ -27,7 +33,6 @@
     top: 0;
     bottom: 0;
     width: 5rem;
-    background-color: red;
   }
   .menu {
     .menu-item {

src/views/Home.vue

 <template>
   <div class="home-router">
-    <Header />
+    <!-- <Header /> -->
     <div class="home-router-body">
       <router-view />
     </div>
   </div>
 </template>
 <script>
-import Header from '@/views/Header'
+// import Header from '@/views/Header'
 export default {
-  components: { Header }
+  // components: { Header }
 }
 </script>
 

src/views/Home/MapView.vue

 <template>
   <a-map :opts="opts">
-
+    <LineManager @drawend="updateLine" @import="importPath" />
+    <MapPolyLine :path="path" ref="line" edit @edit="changeLine" />
   </a-map>
 </template>
 <script>
 import AMap from '@/components/map/AMap'
+import LineManager from '@/components/map/LineManager'
+import MapPolyLine from '@/components/map/MapPolyLine'
+import { mapGetters } from 'vuex'
 export default {
-  components: { AMap },
+  components: { AMap, LineManager, MapPolyLine },
   data () {
     return {
       opts: {
@@ -14,6 +18,47 @@ export default {
         center: [120.672913, 27.980921]
       }
     }
+  },
+  computed: {
+    ...mapGetters(['path'])
+  },
+  methods: {
+    updateLine ({ paths }) {
+      let strPaths = pathsToString(paths)
+      // console.log(strPaths)
+      this.$store.commit('setPath', strPaths)
+    },
+    changeLine (e) {
+      let line = e.target
+      // console.log(line)
+      let lineArray = line.getPath()
+      let strPaths = pathsToString(lineArray)
+      this.$store.commit('setPath', strPaths)
+    },
+    importPath () {
+      this.$prompt('请输入路径', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(({ value }) => {
+        this.$store.commit('setPath', value)
+      }).catch(() => {
+
+      });
+    }
+  }
+}
+
+function pathsToString (paths) {
+  let st = ''
+  for (let i = 0; i < paths.length; i++) {
+    const point = paths[i];
+    let strPoint = `${point.getLng()},${point.getLat()}`
+    if (i === 0) {
+      st = strPoint
+    } else {
+      st += ';' + strPoint
+    }
   }
+  return st;
 }
 </script>

src/views/MapView.vue

 <template>
   <div class="home">
     <MapView />
+    <div class="float">
+      <el-input type="textarea" :rows="6" :value="path" readonly>
+      </el-input>
+    </div>
   </div>
 </template>
 
@@ -8,11 +12,15 @@
 // @ is an alias to /src
 // import AMap from '@/components/map/AMap'
 import MapView from './Home/MapView'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'home',
   components: {
     MapView
+  },
+  computed: {
+    ...mapGetters(['path'])
   }
 }
 </script>
@@ -21,27 +29,11 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  .left-context {
-    width: 5rem;
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-  }
-  .right-context {
-    width: 5rem;
+  .float {
     position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
+    right: 5px;
+    top: 40px;
+    width: 200px;
   }
 }
 </style>

vue.config.js

 module.exports = {
-  publicPath: '/',
-  
+  publicPath: '/tools/amap-road-edit/'
 }