Skip to content

A
amap-line-edit
Commit 7437d876 authored by aoobao's avatar aoobao
Browse files
Options

init

parent a476ce95
Expand all Show whitespace changes
Inline Side-by-side
Showing with 979 additions and 85 deletions
.eslintrc.js
View file @ 7437d876
...@@ -9,7 +9,8 @@ module.exports = { ...@@ -9,7 +9,8 @@ module.exports = {
], ],
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-undef': 'off'
}, },
parserOptions: { parserOptions: {
parser: 'babel-eslint' parser: 'babel-eslint'
......
package.json
View file @ 7437d876
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"element-ui": "^2.6.1",
"normalize.css": "^8.0.1",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.0.1" "vuex": "^3.0.1"
......
public/index.html
View file @ 7437d876
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>amap-line-edit</title> <title>amap-line-edit</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=c81eeaf774b25626ffb1b32e13acbd99"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/App.vue
View file @ 7437d876
<template> <template>
<div id="app"> <div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/> <router-view/>
</div> </div>
</template> </template>
......
src/assets/HANGZHOU.js 0 → 100644
View file @ 7437d876
This diff is collapsed.
src/assets/LineManager.js 0 → 100644
View file @ 7437d876
// const STATUS = {
// VIEW: 0, // 查看模式
// CLEAR: 1, // 清除模式
// EDIT: 2 // 编辑模式
// }
/**
* opt
* color : String 线段默认颜色 '#fff'
* pointSize : Number 点位大小 3
*/
export default class LineManager {
constructor(map, opt) {
this._initialize(map, opt || {})
}
// static STATUS = {
// VIEW: 0, // 查看模式
// CLEAR: 1, // 清除模式
// EDIT: 2 // 编辑模式
// }
static VIEW = 0
static CLEAR = 1
static EDIT = 2
_initialize(map, opt) {
this._map = map
this._color = opt.color || 'yellow'
this._pointSize = opt.pointSize || 3
this._pointColor = opt.pointColor || this._color
this._lastPointColor = opt.lastPointColor || 'red'
// this._status = LineManager.STATUS.VIEW // 默认查看模式
this._status = LineManager.VIEW
this._lines = []
this._createCustomLayer()
this.show()
}
_createCustomLayer() {
let canvas = this._canvas = document.createElement('canvas')
this._ctx = canvas.getContext('2d')
let size = this._map.getSize()
canvas.width = this._width = size.width
canvas.height = this._height = size.height
this._cus = new AMap.CustomLayer(canvas, {
zIndex: 10
})
this._cus.render = this._redraw.bind(this)
}
_redraw() {
this._lines = this._lines.map(lineObj => {
let pixels = lineObj.line.map(t => this._map.lngLatToContainer(t))
let obj = {
...lineObj,
pixels
}
return obj
})
this._draw()
}
_draw() {
this._clearCanvas()
this._drawCanvas()
}
_clearCanvas() {
this._ctx.clearRect(0, 0, this._width, this._height)
}
_drawCanvas() {
if (!this._lines || this._lines.length == 0) return
let ctx = this._ctx
ctx.save()
this._lines.forEach(lineObj => {
let pixels = lineObj.pixels
// 线条颜色
ctx.strokeStyle = lineObj.color ? lineObj.color : this._color
ctx.lineWidth = 1
ctx.beginPath()
for (let i = 0; i < pixels.length; i++) {
let pixel = pixels[i];
ctx.lineTo(pixel.getX(), pixel.getY())
}
// ctx.closePath()
ctx.stroke()
// 标记每个点位.
if (this._status != LineManager.VIEW) {
ctx.fillStyle = lineObj.pointColor ? lineObj.pointColor : this._pointColor
for (let i = 0; i < pixels.length; i++) {
const pixel = pixels[i];
ctx.beginPath()
ctx.arc(pixel.getX(), pixel.getY(), this._pointSize, 0, 2 * Math.PI)
ctx.fill()
}
}
// 绘制最后一个点
let pixel = pixels[pixels.length - 1] // 最后一个点
ctx.fillStyle = this._lastPointColor
ctx.beginPath()
ctx.arc(pixel.getX(), pixel.getY(), this._pointSize, 0, 2 * Math.PI)
ctx.fill()
});
ctx.restore()
}
getLineList() {
let list = this._lines.map(lineObj => {
let obj = {
...lineObj,
pixels: null
}
delete obj.pixels
return obj
})
return list
}
// 擦除
clearLine(pixel, clearWidth) {
// console.log(pixel, clearWidth)
let flag = false
let lines = this._lines.map(lineObj => {
let obj = this.filterPixels(lineObj, pixel, clearWidth)
if (obj == null) {
return lineObj
} else {
flag = true
return obj
}
})
if (flag) {
this._lines = lines
this._draw()
}
}
filterPixels(lineObj, pixel, clearWidth) {
let minX = pixel.getX() - clearWidth / 2
let minY = pixel.getY() - clearWidth / 2
let maxX = pixel.getX() + clearWidth / 2
let maxY = pixel.getY() + clearWidth / 2
let rowIndex = null
let pixels = lineObj.pixels
let lines = lineObj.line
let points = []
let pointPixels = []
for (let i = 0; i < pixels.length; i++) {
const p = pixels[i]
let line = lines[i]
// 判断当前点位是否在擦除范围内.
if (isInPath(p, minX, minY, maxX, maxY)) {
if (rowIndex == null) rowIndex = i - 1 // 拿到上一个点位.
} else {
if (rowIndex != null) { // 已经有点被擦除.
points.push(line)
pointPixels.push(p)
}
}
}
// 有点位被擦除
if (rowIndex != null) {
if (rowIndex > -1) { // 将头部的点加到新数组的末尾.
points.push(...lines.slice(0, rowIndex + 1))
pointPixels.push(...pixels.slice(0, rowIndex + 1))
}
return {
...lineObj,
pixels: pointPixels,
line: points
}
} else {
// 没有点位被擦除,不需要修改,返回null,优化性能
return null
}
}
setClearModel() {
// this._status = LineManager.STATUS.CLEAR
this._map.setStatus({
dragEnable: false
})
this._status = LineManager.CLEAR
this._draw()
}
setViewModel() {
this._map.setStatus({
dragEnable: true
})
this._status = LineManager.VIEW
this._draw()
}
setEditModel() {
this._map.setStatus({
dragEnable: true
})
this._status = LineManager.EDIT
this._draw()
}
setData(list) {
this._lines = list
this._redraw()
}
show() {
this._cus.setMap(this._map)
}
hide() {
this._cus.setMap(null)
}
destroy() {
this.hide()
}
}
function isInPath(pixel, minX, minY, maxX, maxY) {
let x = pixel.getX()
let y = pixel.getY()
if (x >= minX && x <= maxX) {
if (y >= minY && y <= maxY) {
return true
}
}
return false
}
\ No newline at end of file
src/assets/utils.js 0 → 100644
View file @ 7437d876
export function transposePolyrect(coordinate, sep = '|') {
var arr = []
let pattern = /\d+(\.\d+)?/g
if (typeof coordinate === 'string') {
let temp = coordinate.split(sep)
temp.forEach(t => {
if (t) {
let re = [];
let mat = t.match(pattern);
for (var i = 1; i < mat.length; i += 2) {
var x = parseFloat(mat[i - 1]);
var y = parseFloat(mat[i]);
re.push([x, y]);
}
arr.push(re)
}
})
} else {
console.warn('经纬度格式有误:', coordinate)
}
return arr;
}
export function LineToString(arr) {
let st = arr.toString()
st = st.replace(/(\d+(\.\d+)?,\d+(\.\d+)?)(,|$)/g, '$1;');
return st;
}
\ No newline at end of file
src/components/AddDialog.vue 0 → 100644
View file @ 7437d876
<template>
<el-dialog title="添加线段" width="840px" :visible="visible" :before-close="handleClose">
<el-input v-model="name" placeholder="请输入名称"></el-input>
<el-input style="margin-top:10px;" type="textarea" v-model="text" :rows="10" placeholder="输入内容x,y;x,y"></el-input>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
visible: false,
text: '',
name: ''
}
},
methods: {
handleClose () {
this.visible = false
},
show () {
this.visible = true
},
submit () {
this.$emit('add', {
name: this.name,
text: this.text
})
this.visible = false
}
},
watch: {
visible (val) {
if (!val) {
this.text = ''
this.name = ''
}
}
}
}
</script>
src/components/HelloWorld.vue deleted 100644 → 0
View file @ a476ce95
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/LineManager.vue 0 → 100644
View file @ 7437d876
<template>
<div class="line-container">
<div v-if="isClear" class="clearRect" :style="clearStyle()"></div>
</div>
</template>
<script>
import LineManager from '../assets/LineManager'
export default {
props: {
map: {
type: Object,
required: true
},
data: {
type: Array
},
status: {
type: Number
},
clearWidth: {
type: Number,
default: 10
},
x: Number,
y: Number
},
data () {
return {
down: false
}
},
computed: {
isClear () {
return this.status == LineManager.CLEAR
}
},
created () {
// this.map.on('mousemove', this.mapMouseMove, this)
this.map.on('mousedown', this.mapMouseDown, this)
this.map.on('mouseup', this.mapMouseUp, this)
this.map.on('mousemove', this.mapMouseMove, this)
this.manager = new LineManager(this.map, {
color: 'blue',
pointSize: 3
})
if (this.data.length > 0) {
this.manager.setData(this.data)
}
},
beforeDestroy () {
if (this.manager) {
this.manager.destroy()
this.manager = null
}
if (this.map) {
this.map.off('mousedown', this.mapMouseDown, this)
this.map.off('mousedown', this.mapMouseUp, this)
this.map.off('mousemove', this.mapMouseMove, this)
}
},
methods: {
mapMouseUp () {
this.down = false
},
mapMouseDown (e) {
// console.log(e)
this.down = true
if (this.manager) {
this.manager.clearLine(e.pixel, this.clearWidth)
}
},
mapMouseMove (e) {
// console.log(e)
if (this.down && this.manager) {
this.manager.clearLine(e.pixel, this.clearWidth)
}
},
draw () {
if (this.manager) {
this.manager._draw()
}
},
clearStyle () {
let opt = {}
if (this.isClear) {
opt = {
top: this.y + 'px',
left: this.x + 'px',
width: this.clearWidth + 'px',
height: this.clearWidth + 'px',
marginLeft: -(this.clearWidth / 2) + 'px',
marginTop: -(this.clearWidth / 2) + 'px'
}
} else {
opt = {
display: 'none'
}
}
return opt
},
getLineList () {
if (this.manager) {
return this.manager.getLineList()
} else {
return []
}
}
},
watch: {
data (list) {
if (this.manager) {
this.manager.setData(list)
}
},
status (val) {
if (this.manager) {
if (val == LineManager.VIEW) {
this.manager.setViewModel()
} else if (val == LineManager.CLEAR) {
this.manager.setClearModel()
} else if (val == LineManager.EDIT) {
this.manager.setEditModel()
}
}
}
}
}
</script>
<style lang="scss" scoped>
.clearRect {
position: absolute;
background-color: red;
pointer-events: none;
}
</style>
src/components/LineView.vue 0 → 100644
View file @ 7437d876
<template>
<div class="line-container" @mouseout="mouseout" @mouseover="mouseover">
<span class="name">{{name}} {{startPointName}}</span>
<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>
</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: {
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: 300px;
height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 10px;
margin-top: 10px;
.name {
// color: #fff;
margin-left: 10px;
margin-right: 10px;
}
}
</style>
src/components/RemarkDialog.vue 0 → 100644
View file @ 7437d876
<template>
<el-dialog title="导出线段" width="840px" :visible="visible" :before-close="handleClose">
<el-input type="textarea" :rows="10" :value="value"></el-input>
</el-dialog>
</template>
<script>
export default {
props: {
value: String
},
data () {
return {
visible: false
}
},
methods: {
handleClose () {
this.visible = false
this.$emit('close')
},
show () {
this.visible = true
}
}
}
</script>
src/components/TransferDialog.vue 0 → 100644
View file @ 7437d876
<template>
<el-dialog title="合并线段" width="840px" :visible="visible" :center="false" :before-close="handleClose">
<div class="context">
<span class="title">待合并线段</span>
<div class="select-container">
<el-button style="margin-left:10px;" @click="addLine(item,index)" v-for="(item,index) in chooseList" :key="item.key">{{item.label}}</el-button>
</div>
<span class="title">需合并线段</span>
<div class="choose-model">
<el-tag style="margin-left:10px;" v-for="(item,index) in data" :key="item.key" closable @close="tagClose(item,index)">{{item.label}}</el-tag>
</div>
</div>
<span slot="footer" class="dialog-footer ">
<el-button type="primary " @click="submit ">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
dataList: Array
},
data () {
return {
visible: false,
data: []
}
},
computed: {
chooseList () {
let list = this.dataList.filter(t => {
let m = this.data.find(a => a.key == t.key)
return !m
})
return list
}
},
methods: {
handleClose () {
this.visible = false
},
show () {
this.visible = true
},
submit () {
this.$emit('merge', {
data: this.data
})
this.visible = false
},
addLine (data) {
this.data.push(data)
},
tagClose (item, index) {
this.data.splice(index, 1)
}
},
watch: {
visible (val) {
if (!val) {
this.data = []
}
}
}
}
</script>
<style lang="scss" scoped>
.select-container {
width: 100%;
height: 150px;
background-color: aqua;
text-align: left;
}
.title {
text-align: left;
}
.choose-model {
text-align: left;
}
</style>
src/main.js
View file @ 7437d876
import Vue from 'vue' import Vue from 'vue'
import ElementUI from 'element-ui';
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import 'normalize.css'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ new Vue({
......
src/router.js
View file @ 7437d876
...@@ -12,14 +12,15 @@ export default new Router({ ...@@ -12,14 +12,15 @@ export default new Router({
path: '/', path: '/',
name: 'home', name: 'home',
component: Home component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
} }
// ,
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
// }
] ]
}) })
src/views/About.vue deleted 100644 → 0
View file @ a476ce95
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue
View file @ 7437d876
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <div class="map-container" @mousemove="mapMouseMove" @mouseout="mapMouseOut">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div class="map" ref="map"></div>
<LineManagerView v-if="map" :map="map" :data="lineList" ref="lineManager" :status="status" :x="x" :y="y" :clearWidth="clearNumber" />
</div>
<div class="control">
<div class="button-control">
<label>{{statusName}}</label>
<el-button style="margin-left:15px;" type="primary" @click="showAdd">新增</el-button>
<el-button style="margin-left:15px;" type="warning" @click="clearModel">擦除</el-button>
<el-button style="margin-left:15px;" type="success" @click="merge">合并</el-button>
</div>
<div class="line-control">
<template v-if="statusName == '查看'">
<LineView v-for="(line,index) in lineList" :key="line.id" :data="line" @remove="removeLine(index)" @reverse="reverseLine(line,index)" @mouseout="lineMouseOut(line,index)" @mouseover="lineMouseOver(line,index)" @copyLine="copyLine(line)" />
</template>
<template v-else-if="statusName == '擦除'">
<div class="clear-container">
<div v-for="width in clearNumberList" :key="width" class="clear-block" :style="getClearStyle(width)" :class="{active:width == clearNumber}" @click="clearNumber = width"></div>
</div>
</template>
</div>
</div>
<AddDialog ref="addDialog" @add="addLine" />
<TransferDialog ref="transferDialog" :dataList="generateData" @merge="mergeLine" />
<RemarkDialog ref="remarkDialog" :value="remark" @close="remark = null" />
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src let __id = 0
import HelloWorld from '@/components/HelloWorld.vue' // import HANG_ZHOU from '../assets/HANGZHOU'
import AddDialog from '@/components/AddDialog'
import RemarkDialog from '@/components/RemarkDialog'
import TransferDialog from '@/components/TransferDialog'
import LineView from '@/components/LineView'
import LineManagerView from '@/components/LineManager'
import LineManager from '@/assets/LineManager'
import { transposePolyrect, LineToString } from '../assets/utils'
export default { export default {
name: 'home', name: 'home',
components: { components: {
HelloWorld AddDialog,
LineView,
LineManagerView,
TransferDialog,
RemarkDialog
},
data () {
return {
lineList: [],
map: null,
status: LineManager.VIEW,
x: -1000,
y: -1000,
clearNumberList: [10, 15, 20, 30, 40, 50],
clearNumber: 20,
mergeList: [],
remark: null
}
},
computed: {
statusName () {
if (this.status == LineManager.VIEW) {
return '查看'
} else if (this.status == LineManager.CLEAR) {
return '擦除'
} else if (this.status == LineManager.EDIT) {
return '编辑'
}
return 'err'
},
generateData () {
let list = this.lineList.map(t => {
return {
key: t.id,
label: t.name
}
})
return list
}
},
mounted () {
this.map = new AMap.Map(this.$refs.map, {
zoom: 8,
center: [120, 30]
})
// // 测试代码
// setTimeout(() => {
// this.addLine({
// name: '杭州',
// text: HANG_ZHOU
// })
// }, 500);
},
methods: {
copyLine (lineObj) {
let line = lineObj.line
let st = LineToString(line)
// console.log(st)
this.remark = st
this.$refs.remarkDialog.show()
},
// 合并
merge () {
if (this.status == LineManager.VIEW) {
this.$refs.transferDialog.show()
}
},
showAdd () {
if (this.status == LineManager.VIEW) {
this.$refs.addDialog.show();
}
},
clearModel () {
let clear = this.status == LineManager.CLEAR
if (clear) { // 当前状态是清除模式
let list = this.$refs.lineManager.getLineList()
this.lineList = list
}
this.status = clear ? LineManager.VIEW : LineManager.CLEAR
},
mergeLine (obj) {
// console.log(obj, '合并线段')
let data = obj.data
if (data.length == 0) return
let list = data.map(item => {
let obj = this.lineList.find(t => t.id == item.key)
return obj
})
console.log(list)
let name = list.reduce((pre, sur) => {
let name = pre + ',' + sur.name
return name
}, '').substr(1);
let mlist = list.reduce((pre, sur) => {
return [...pre, ...sur.line]
}, [])
let mergeObj = {
id: list[0].id,
color: list[0].color,
name: name,
line: mlist
}
this.lineList = [mergeObj, ...this.lineList.filter(lineObj => {
let m = data.find(d => d.key == lineObj.id)
return !m
})]
},
addLine (obj) {
// console.log(str)
let arr = transposePolyrect(obj.text)
let num = arr.length == 1 ? '' : 1;
// console.log(arr)
let list = arr.map(t => {
let o = {
line: t,
id: ++__id,
name: obj.name + num,
color: 'blue'
}
if (num) num++;
return o;
})
this.lineList.push(...list)
},
removeLine (index) {
this.lineList.splice(index, 1)
// let index = this.lineList.findIndex(t=> t == )
},
reverseLine (data, index) {
this.lineList.splice(index, 1, {
...data,
line: data.line.reverse()
})
},
lineMouseOut (data, index) {
this.lineList.splice(index, 1, {
...data,
color: 'blue'
})
},
lineMouseOver (data, index) {
this.lineList.splice(index, 1, {
...data,
color: 'yellow'
})
//data.color = 'yellow'
},
draw () {
this.$refs.lineManager.draw()
},
mapMouseMove (e) {
this.x = e.clientX
this.y = e.clientY
// console.log(this.x, this.y, 'move')
},
mapMouseOut () {
this.x = -1000
this.y = -1000
},
getClearStyle (width) {
return {
width: width + 'px',
height: width + 'px'
}
}
} }
} }
</script> </script>
<style lang="scss" scoped>
.home {
width: 100vw;
height: 100vh;
display: flex;
.map-container {
width: 540px;
height: 100%;
flex-shrink: 0;
position: relative;
.map {
width: 100%;
height: 100%;
}
}
.control {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
.button-control {
width: 100%;
height: 50px;
display: flex;
align-items: center;
}
.line-control {
width: 100%;
height: 100%;
background-color: aqua;
overflow-y: auto;
// display: flex;
// flex-flow: row wrap;
// justify-content: flex-start;
// align-items: flex-start;
.clear-container {
display: flex;
align-items: center;
margin-top: 15px;
.clear-block {
float: left;
margin-left: 10px;
background-color: #fff;
&.active {
border: 1px solid red;
}
}
}
}
}
}
</style>
vue.config.js 0 → 100644
View file @ 7437d876
module.exports = {
publicPath: '/amap-line-edit/',
}
yarn.lock
View file @ 7437d876
...@@ -1214,6 +1214,12 @@ async-limiter@~1.0.0: ...@@ -1214,6 +1214,12 @@ async-limiter@~1.0.0:
version "1.0.0" version "1.0.0"
resolved "http://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8" resolved "http://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
async-validator@~1.8.1:
version "1.8.5"
resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
dependencies:
babel-runtime "6.x"
async@^1.5.2: async@^1.5.2:
version "1.5.2" version "1.5.2"
resolved "http://registry.npm.taobao.org/async/download/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" resolved "http://registry.npm.taobao.org/async/download/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
...@@ -1264,6 +1270,10 @@ babel-eslint@^10.0.1: ...@@ -1264,6 +1270,10 @@ babel-eslint@^10.0.1:
eslint-scope "3.7.1" eslint-scope "3.7.1"
eslint-visitor-keys "^1.0.0" eslint-visitor-keys "^1.0.0"
babel-helper-vue-jsx-merge-props@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
babel-loader@^8.0.5: babel-loader@^8.0.5:
version "8.0.5" version "8.0.5"
resolved "http://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33" resolved "http://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
...@@ -1279,6 +1289,13 @@ babel-plugin-dynamic-import-node@^2.2.0: ...@@ -1279,6 +1289,13 @@ babel-plugin-dynamic-import-node@^2.2.0:
dependencies: dependencies:
object.assign "^4.1.0" object.assign "^4.1.0"
babel-runtime@6.x:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
core-js "^2.4.0"
regenerator-runtime "^0.11.0"
balanced-match@^1.0.0: balanced-match@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" resolved "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
...@@ -1951,7 +1968,7 @@ copy-webpack-plugin@^4.6.0: ...@@ -1951,7 +1968,7 @@ copy-webpack-plugin@^4.6.0:
p-limit "^1.0.0" p-limit "^1.0.0"
serialize-javascript "^1.4.0" serialize-javascript "^1.4.0"
core-js@^2.5.7, core-js@^2.6.5: core-js@^2.4.0, core-js@^2.5.7, core-js@^2.6.5:
version "2.6.5" version "2.6.5"
resolved "http://registry.npm.taobao.org/core-js/download/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895" resolved "http://registry.npm.taobao.org/core-js/download/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
...@@ -2275,7 +2292,7 @@ deep-is@~0.1.3: ...@@ -2275,7 +2292,7 @@ deep-is@~0.1.3:
version "0.1.3" version "0.1.3"
resolved "http://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" resolved "http://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
deepmerge@^1.5.2: deepmerge@^1.2.0, deepmerge@^1.5.2:
version "1.5.2" version "1.5.2"
resolved "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&other_urls=http%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753" resolved "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&other_urls=http%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
...@@ -2493,6 +2510,17 @@ electron-to-chromium@^1.3.116: ...@@ -2493,6 +2510,17 @@ electron-to-chromium@^1.3.116:
version "1.3.116" version "1.3.116"
resolved "http://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.116.tgz#1dbfee6a592a0c14ade77dbdfe54fef86387d702" resolved "http://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.116.tgz#1dbfee6a592a0c14ade77dbdfe54fef86387d702"
element-ui@^2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/element-ui/-/element-ui-2.6.1.tgz#86db79ff5de9b1bcc3187b65b3772b0c54074718"
dependencies:
async-validator "~1.8.1"
babel-helper-vue-jsx-merge-props "^2.0.0"
deepmerge "^1.2.0"
normalize-wheel "^1.0.1"
resize-observer-polyfill "^1.5.0"
throttle-debounce "^1.0.1"
elliptic@^6.0.0: elliptic@^6.0.0:
version "6.4.1" version "6.4.1"
resolved "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a" resolved "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
...@@ -4755,6 +4783,14 @@ normalize-url@^3.0.0: ...@@ -4755,6 +4783,14 @@ normalize-url@^3.0.0:
version "3.3.0" version "3.3.0"
resolved "http://registry.npm.taobao.org/normalize-url/download/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" resolved "http://registry.npm.taobao.org/normalize-url/download/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
normalize-wheel@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
normalize.css@^8.0.1:
version "8.0.1"
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
npm-bundled@^1.0.1: npm-bundled@^1.0.1:
version "1.0.6" version "1.0.6"
resolved "http://registry.npm.taobao.org/npm-bundled/download/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd" resolved "http://registry.npm.taobao.org/npm-bundled/download/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
...@@ -5701,6 +5737,10 @@ regenerate@^1.2.1, regenerate@^1.4.0: ...@@ -5701,6 +5737,10 @@ regenerate@^1.2.1, regenerate@^1.4.0:
version "1.4.0" version "1.4.0"
resolved "http://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" resolved "http://registry.npm.taobao.org/regenerate/download/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
regenerator-runtime@^0.12.0: regenerator-runtime@^0.12.0:
version "0.12.1" version "0.12.1"
resolved "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" resolved "http://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
...@@ -5863,6 +5903,10 @@ requires-port@^1.0.0: ...@@ -5863,6 +5903,10 @@ requires-port@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "http://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" resolved "http://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
resize-observer-polyfill@^1.5.0:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
resolve-cwd@^2.0.0: resolve-cwd@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "http://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" resolved "http://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
...@@ -6609,6 +6653,10 @@ thread-loader@^2.1.2: ...@@ -6609,6 +6653,10 @@ thread-loader@^2.1.2:
loader-utils "^1.1.0" loader-utils "^1.1.0"
neo-async "^2.6.0" neo-async "^2.6.0"
throttle-debounce@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
through2@^2.0.0: through2@^2.0.0:
version "2.0.5" version "2.0.5"
resolved "http://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd" resolved "http://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment