|
|
|
@ -1,13 +1,22 @@ |
|
|
|
<!-- 高德地图 --> |
|
|
|
<template> |
|
|
|
<div id="container"> |
|
|
|
<!-- <div class="box"> |
|
|
|
<span v-for="(checkpoint, index) in checkpoints" :key="index" @click="selectCheckpoint(checkpoint)">{{ |
|
|
|
checkpoint.name }}</span> |
|
|
|
</div> --> |
|
|
|
<div> |
|
|
|
<div id="container" @mouseenter="showTooltip = true" @mouseout="showTooltip = false" |
|
|
|
@mousemove="updateTooltipPosition"> |
|
|
|
<div class="tooltip" v-if="showTooltip" :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }"> |
|
|
|
左键选点，双击结束绘制，右键取消绘制 |
|
|
|
</div> |
|
|
|
<el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button> |
|
|
|
<Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer> |
|
|
|
</div> |
|
|
|
<div class="box"> |
|
|
|
<el-button size="mini" @click="addPoint = true"> |
|
|
|
<svg-icon icon-class="icon-line" /> |
|
|
|
绘制线路</el-button> |
|
|
|
<el-button :disabled="checkpoints.length < 1" style="width: 29px; padding: 7px;" size="mini" |
|
|
|
@click="clearLine"><svg-icon icon-class="icon-clear" /></el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import AMapLoader from "@amap/amap-jsapi-loader"; |
|
|
|
@ -24,7 +33,12 @@ export default { |
|
|
|
components: { Drawer }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
drawerVisible: false, |
|
|
|
drawerVisible: false, //抽屉开关 |
|
|
|
addPoint: false, //是否允许添加点位 |
|
|
|
showTooltip: false, //展示鼠标提示 |
|
|
|
addSum: 0, |
|
|
|
tooltipLeft: 0, |
|
|
|
tooltipTop: 0, |
|
|
|
checkpoints: [ |
|
|
|
// { |
|
|
|
// name: '检查点1', |
|
|
|
@ -49,6 +63,11 @@ export default { |
|
|
|
this.map?.destroy(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取鼠标位置 |
|
|
|
updateTooltipPosition(event) { |
|
|
|
this.tooltipLeft = event.clientX - 296 + 15; |
|
|
|
this.tooltipTop = event.clientY - 174; |
|
|
|
}, |
|
|
|
// 渲染线段 |
|
|
|
renderedPolyline() { |
|
|
|
this.map.remove(this.map.getAllOverlays('polyline')); |
|
|
|
@ -79,6 +98,12 @@ export default { |
|
|
|
bubble: true, |
|
|
|
label: { content: name, direction: 'top' }, |
|
|
|
}); |
|
|
|
marker.on("mouseover", () => { |
|
|
|
this.showTooltip = true |
|
|
|
}), |
|
|
|
marker.on("mouseout", () => { |
|
|
|
this.showTooltip = true |
|
|
|
}), |
|
|
|
marker.setMap(this.map); |
|
|
|
this.checkpoints.push({ name, location, marker }); |
|
|
|
this.renderedPolyline() |
|
|
|
@ -102,6 +127,17 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 清空路线 |
|
|
|
clearLine() { |
|
|
|
// this.removeLastCheckpoint(); |
|
|
|
this.addSum = 0 |
|
|
|
this.checkpoints.forEach((checkpoint) => { |
|
|
|
checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除 |
|
|
|
}); |
|
|
|
this.checkpoints = []; // 清空 checkpoints 数组 |
|
|
|
this.renderedPolyline() // 清空连线 |
|
|
|
this.saveInspectionRoute() // 保存 |
|
|
|
}, |
|
|
|
// 删除最后一个点位 |
|
|
|
removeLastCheckpoint() { |
|
|
|
const lastCheckpoint = this.checkpoints.pop(); |
|
|
|
@ -142,12 +178,6 @@ export default { |
|
|
|
console.log('未选中'); |
|
|
|
break; |
|
|
|
} |
|
|
|
// postDFInspectionRoute(this.$route.query.id, data).then((res) => { |
|
|
|
// this.$message({ |
|
|
|
// message: '保存成功', |
|
|
|
// type: 'success' |
|
|
|
// }); |
|
|
|
// }) |
|
|
|
}, |
|
|
|
// 加载地图 |
|
|
|
initAMap() { |
|
|
|
@ -255,26 +285,34 @@ export default { |
|
|
|
if (this.$route.query.editor) { |
|
|
|
// 点击添加检查点 |
|
|
|
this.map.on('click', (e) => { |
|
|
|
if (this.addPoint) { |
|
|
|
this.addSum++ |
|
|
|
const { lng, lat } = e.lnglat; |
|
|
|
const name = `检查点${this.checkpoints.length + 1}`; |
|
|
|
this.addCheckpoint(name, [lng, lat]); |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: '请先点击绘制线路', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
// 双击保存 |
|
|
|
this.map.on('dblclick', () => { |
|
|
|
if (this.addPoint) { |
|
|
|
this.addSum = 0 |
|
|
|
this.saveInspectionRoute() |
|
|
|
console.log('双击保存', this.checkpoints); |
|
|
|
this.addPoint = false |
|
|
|
} |
|
|
|
}); |
|
|
|
// 右键清空点位 |
|
|
|
// 右键取消保存 |
|
|
|
this.map.on('rightclick', () => { |
|
|
|
if (this.checkpoints.length > 0) { |
|
|
|
// this.removeLastCheckpoint(); |
|
|
|
this.checkpoints.forEach((checkpoint) => { |
|
|
|
checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除 |
|
|
|
}); |
|
|
|
this.checkpoints = []; // 清空 checkpoints 数组 |
|
|
|
this.renderedPolyline() // 清空连线 |
|
|
|
for (let i = 0; i < this.addSum; i++) { |
|
|
|
this.removeLastCheckpoint() |
|
|
|
} |
|
|
|
}); |
|
|
|
this.addSum = 0 |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((e) => { |
|
|
|
@ -290,23 +328,30 @@ export default { |
|
|
|
height: calc(100vh - 56px - 40px - 48px - 70px); |
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
width: 100px; |
|
|
|
background: #fff; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.open-drawer-btn { |
|
|
|
position: fixed; |
|
|
|
top: 125px; |
|
|
|
right: 40px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tooltip { |
|
|
|
position: absolute; |
|
|
|
z-index: 1; |
|
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
|
border-radius: 4px; |
|
|
|
padding: 8px 12px; |
|
|
|
font-size: 12px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
left: 26px; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
z-index: 9; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/.amap-marker-label { |
|
|
|
|
易浩轩
1 year ago
