Skip to content

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

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

parent b1083e06
Show whitespace changes
Inline Side-by-side
Showing with 92 additions and 15 deletions
public/index.html
View file @ 2724a1a1
......@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<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>
<body>
<noscript>
......
src/assets/LineManager.js
View file @ 2724a1a1
......@@ -29,6 +29,7 @@ export default class LineManager {
this._pointSize = opt.pointSize || 3
this._pointColor = opt.pointColor || this._color
this._lastPointColor = opt.lastPointColor || 'red'
this._lastPointSize = opt.lastPointSize || this._pointSize
// this._status = LineManager.STATUS.VIEW // 默认查看模式
......@@ -108,7 +109,7 @@ export default class LineManager {
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.arc(pixel.getX(), pixel.getY(), this._lastPointSize, 0, 2 * Math.PI)
ctx.fill()
......@@ -117,6 +118,27 @@ export default class LineManager {
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() {
let list = this._lines.map(lineObj => {
let obj = {
......
src/components/LineManager.vue
View file @ 2724a1a1
......@@ -43,7 +43,8 @@ export default {
this.map.on('mousemove', this.mapMouseMove, this)
this.manager = new LineManager(this.map, {
color: 'blue',
pointSize: 3
pointSize: 3,
lastPointSize: 6
})
if (this.data.length > 0) {
this.manager.setData(this.data)
......@@ -108,6 +109,16 @@ export default {
} else {
return []
}
},
createLine (list) {
return new Promise(resolve => {
if (this.manager) {
this.manager.createLine(list).then(base64 => {
resolve(base64)
})
}
})
}
},
watch: {
......
src/components/LineView.vue
View file @ 2724a1a1
......@@ -59,7 +59,7 @@ export default {
<style lang="scss" scoped>
.line-container {
width: 300px;
width: 400px;
height: 30px;
display: flex;
justify-content: flex-start;
......@@ -68,6 +68,7 @@ export default {
margin-top: 10px;
.name {
// color: #fff;
margin-left: 10px;
margin-right: 10px;
}
......
src/components/TransferDialog.vue
View file @ 2724a1a1
<template>
<el-dialog title="合并线段" width="840px" :visible="visible" :center="false" :before-close="handleClose">
<div class="context">
<span class="title">待合并线段</span>
<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>
</div>
<div class="image-container" :style="getImageStyle()">
<!-- <img v-if="base64" :src="base64" alt=""> -->
</div>
<div style="clear :both;"></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>
......@@ -13,6 +18,7 @@
<span slot="footer" class="dialog-footer ">
<el-button type="primary " @click="submit ">确 定</el-button>
<el-button type="primary " @click="createImage ">生成图片</el-button>
</span>
</el-dialog>
......@@ -20,7 +26,8 @@
<script>
export default {
props: {
dataList: Array
dataList: Array,
base64: String
},
data () {
return {
......@@ -40,6 +47,7 @@ export default {
methods: {
handleClose () {
this.visible = false
this.$emit('close')
},
show () {
this.visible = true
......@@ -50,11 +58,21 @@ export default {
})
this.visible = false
},
createImage () {
this.$emit('createImage', {
data: this.data
})
},
addLine (data) {
this.data.push(data)
},
tagClose (item, index) {
this.data.splice(index, 1)
},
getImageStyle () {
return {
backgroundImage: `url('${this.base64}')`
}
}
},
watch: {
......@@ -68,11 +86,21 @@ export default {
</script>
<style lang="scss" scoped>
.select-container {
width: 100%;
width: 50%;
height: 150px;
background-color: aqua;
text-align: left;
float: left;
}
.image-container {
width: 50%;
height: 150px;
float: left;
//overflow: auto;
background-size: contain;
background-repeat: no-repeat;
}
.title {
text-align: left;
}
......
src/views/Home.vue
View file @ 2724a1a1
......@@ -26,7 +26,7 @@
</div>
</div>
<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" />
</div>
</template>
......@@ -60,7 +60,8 @@ export default {
clearNumberList: [10, 15, 20, 30, 40, 50],
clearNumber: 20,
mergeList: [],
remark: null
remark: null,
imgBase64: null
}
},
computed: {
......@@ -126,16 +127,30 @@ export default {
}
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) {
// 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)
// console.log(list)
let name = list.reduce((pre, sur) => {
let name = pre + ',' + sur.name
......@@ -226,9 +241,8 @@ export default {
height: 100vh;
display: flex;
.map-container {
width: 540px;
height: 100%;
flex-shrink: 0;
width: 100%;
position: relative;
.map {
width: 100%;
......@@ -237,7 +251,8 @@ export default {
}
.control {
width: 100%;
flex-shrink: 0;
width: 400px;
height: 100%;
display: flex;
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