Skip to content

A
amap-line-edit
Commit 2724a1a1 authored by aoobao's avatar aoobao
Browse files
Options

调整页面布局,合并界面增加图片方便合并不出错

parent b1083e06
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 15 deletions
public/index.html
View file @ 2724a1a1
...@@ -6,7 +6,7 @@ ...@@ -6,7 +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> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=c81eeaf774b25626ffb1b32e13acbd99&plugin=AMap.CustomLayer"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/assets/LineManager.js
View file @ 2724a1a1
...@@ -29,6 +29,7 @@ export default class LineManager { ...@@ -29,6 +29,7 @@ export default class LineManager {
this._pointSize = opt.pointSize || 3 this._pointSize = opt.pointSize || 3
this._pointColor = opt.pointColor || this._color this._pointColor = opt.pointColor || this._color
this._lastPointColor = opt.lastPointColor || 'red' this._lastPointColor = opt.lastPointColor || 'red'
this._lastPointSize = opt.lastPointSize || this._pointSize
// this._status = LineManager.STATUS.VIEW // 默认查看模式 // this._status = LineManager.STATUS.VIEW // 默认查看模式
...@@ -108,7 +109,7 @@ export default class LineManager { ...@@ -108,7 +109,7 @@ export default class LineManager {
let pixel = pixels[pixels.length - 1] // 最后一个点 let pixel = pixels[pixels.length - 1] // 最后一个点
ctx.fillStyle = this._lastPointColor ctx.fillStyle = this._lastPointColor
ctx.beginPath() ctx.beginPath()
ctx.arc(pixel.getX(), pixel.getY(), this._pointSize, 0, 2 * Math.PI) ctx.arc(pixel.getX(), pixel.getY(), this._lastPointSize, 0, 2 * Math.PI)
ctx.fill() ctx.fill()
...@@ -117,6 +118,27 @@ export default class LineManager { ...@@ -117,6 +118,27 @@ export default class LineManager {
ctx.restore() ctx.restore()
} }
// 生成线段
createLine(list) {
return new Promise(resolve => {
let canvas = document.createElement('canvas')
canvas.width = this._width
canvas.height = this._height
let ctx = canvas.getContext('2d')
ctx.strokeStyle = '#000'
ctx.lineWidth = 2
ctx.beginPath()
for (let i = 0; i < list.length; i++) {
const point = list[i];
let pixel = this._map.lngLatToContainer(point)
ctx.lineTo(pixel.getX(), pixel.getY())
}
ctx.stroke()
let dataUrl = canvas.toDataURL('image/png', 1.0)
resolve(dataUrl)
})
}
getLineList() { getLineList() {
let list = this._lines.map(lineObj => { let list = this._lines.map(lineObj => {
let obj = { let obj = {
......
src/components/LineManager.vue
View file @ 2724a1a1
...@@ -43,7 +43,8 @@ export default { ...@@ -43,7 +43,8 @@ export default {
this.map.on('mousemove', this.mapMouseMove, this) this.map.on('mousemove', this.mapMouseMove, this)
this.manager = new LineManager(this.map, { this.manager = new LineManager(this.map, {
color: 'blue', color: 'blue',
pointSize: 3 pointSize: 3,
lastPointSize: 6
}) })
if (this.data.length > 0) { if (this.data.length > 0) {
this.manager.setData(this.data) this.manager.setData(this.data)
...@@ -108,6 +109,16 @@ export default { ...@@ -108,6 +109,16 @@ export default {
} else { } else {
return [] return []
} }
},
createLine (list) {
return new Promise(resolve => {
if (this.manager) {
this.manager.createLine(list).then(base64 => {
resolve(base64)
})
}
})
} }
}, },
watch: { watch: {
......
src/components/LineView.vue
View file @ 2724a1a1
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.line-container { .line-container {
width: 300px; width: 400px;
height: 30px; height: 30px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
...@@ -68,6 +68,7 @@ export default { ...@@ -68,6 +68,7 @@ export default {
margin-top: 10px; margin-top: 10px;
.name { .name {
// color: #fff; // color: #fff;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
......
src/components/TransferDialog.vue
View file @ 2724a1a1
<template> <template>
<el-dialog title="合并线段" width="840px" :visible="visible" :center="false" :before-close="handleClose"> <el-dialog title="合并线段" width="840px" :visible="visible" :center="false" :before-close="handleClose">
<div class="context"> <div class="context">
<span class="title">待合并线段</span>
<div class="select-container"> <div class="select-container">
<span class="title">待合并线段</span>
<el-button style="margin-left:10px;" @click="addLine(item,index)" v-for="(item,index) in chooseList" :key="item.key">{{item.label}}</el-button> <el-button style="margin-left:10px;" @click="addLine(item,index)" v-for="(item,index) in chooseList" :key="item.key">{{item.label}}</el-button>
</div> </div>
<div class="image-container" :style="getImageStyle()">
<!-- <img v-if="base64" :src="base64" alt=""> -->
</div>
<div style="clear :both;"></div>
<span class="title">需合并线段</span> <span class="title">需合并线段</span>
<div class="choose-model"> <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> <el-tag style="margin-left:10px;" v-for="(item,index) in data" :key="item.key" closable @close="tagClose(item,index)">{{item.label}}</el-tag>
...@@ -13,6 +18,7 @@ ...@@ -13,6 +18,7 @@
<span slot="footer" class="dialog-footer "> <span slot="footer" class="dialog-footer ">
<el-button type="primary " @click="submit ">确 定</el-button> <el-button type="primary " @click="submit ">确 定</el-button>
<el-button type="primary " @click="createImage ">生成图片</el-button>
</span> </span>
</el-dialog> </el-dialog>
...@@ -20,7 +26,8 @@ ...@@ -20,7 +26,8 @@
<script> <script>
export default { export default {
props: { props: {
dataList: Array dataList: Array,
base64: String
}, },
data () { data () {
return { return {
...@@ -40,6 +47,7 @@ export default { ...@@ -40,6 +47,7 @@ export default {
methods: { methods: {
handleClose () { handleClose () {
this.visible = false this.visible = false
this.$emit('close')
}, },
show () { show () {
this.visible = true this.visible = true
...@@ -50,11 +58,21 @@ export default { ...@@ -50,11 +58,21 @@ export default {
}) })
this.visible = false this.visible = false
}, },
createImage () {
this.$emit('createImage', {
data: this.data
})
},
addLine (data) { addLine (data) {
this.data.push(data) this.data.push(data)
}, },
tagClose (item, index) { tagClose (item, index) {
this.data.splice(index, 1) this.data.splice(index, 1)
},
getImageStyle () {
return {
backgroundImage: `url('${this.base64}')`
}
} }
}, },
watch: { watch: {
...@@ -68,11 +86,21 @@ export default { ...@@ -68,11 +86,21 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.select-container { .select-container {
width: 100%; width: 50%;
height: 150px; height: 150px;
background-color: aqua; background-color: aqua;
text-align: left; text-align: left;
float: left;
} }
.image-container {
width: 50%;
height: 150px;
float: left;
//overflow: auto;
background-size: contain;
background-repeat: no-repeat;
}
.title { .title {
text-align: left; text-align: left;
} }
......
src/views/Home.vue
View file @ 2724a1a1
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<AddDialog ref="addDialog" @add="addLine" /> <AddDialog ref="addDialog" @add="addLine" />
<TransferDialog ref="transferDialog" :dataList="generateData" @merge="mergeLine" /> <TransferDialog ref="transferDialog" :dataList="generateData" :base64="imgBase64" @close="imgBase64 = null" @merge="mergeLine" @createImage="createImageLine" />
<RemarkDialog ref="remarkDialog" :value="remark" @close="remark = null" /> <RemarkDialog ref="remarkDialog" :value="remark" @close="remark = null" />
</div> </div>
</template> </template>
...@@ -60,7 +60,8 @@ export default { ...@@ -60,7 +60,8 @@ export default {
clearNumberList: [10, 15, 20, 30, 40, 50], clearNumberList: [10, 15, 20, 30, 40, 50],
clearNumber: 20, clearNumber: 20,
mergeList: [], mergeList: [],
remark: null remark: null,
imgBase64: null
} }
}, },
computed: { computed: {
...@@ -126,16 +127,30 @@ export default { ...@@ -126,16 +127,30 @@ export default {
} }
this.status = clear ? LineManager.VIEW : LineManager.CLEAR this.status = clear ? LineManager.VIEW : LineManager.CLEAR
}, },
createImageLine (obj) {
this.imgBase64 = null
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
})
// 合并后的线段
let mlist = list.reduce((pre, sur) => {
return [...pre, ...sur.line]
}, [])
this.$refs.lineManager.createLine(mlist).then(base64 => {
this.imgBase64 = base64
})
},
mergeLine (obj) { mergeLine (obj) {
// console.log(obj, '合并线段')
let data = obj.data let data = obj.data
if (data.length == 0) return if (data.length == 0) return
let list = data.map(item => { let list = data.map(item => {
let obj = this.lineList.find(t => t.id == item.key) let obj = this.lineList.find(t => t.id == item.key)
return obj return obj
}) })
console.log(list) // console.log(list)
let name = list.reduce((pre, sur) => { let name = list.reduce((pre, sur) => {
let name = pre + ',' + sur.name let name = pre + ',' + sur.name
...@@ -226,9 +241,8 @@ export default { ...@@ -226,9 +241,8 @@ export default {
height: 100vh; height: 100vh;
display: flex; display: flex;
.map-container { .map-container {
width: 540px;
height: 100%; height: 100%;
flex-shrink: 0; width: 100%;
position: relative; position: relative;
.map { .map {
width: 100%; width: 100%;
...@@ -237,7 +251,8 @@ export default { ...@@ -237,7 +251,8 @@ export default {
} }
.control { .control {
width: 100%; flex-shrink: 0;
width: 400px;
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
......
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