/*
|
* @Author: Morpheus
|
* @Name: 地图测距
|
* @Date: 2021-11-13 16:04:27
|
* @Last Modified by: mikey.zhaopeng
|
* @Last Modified time: 2022-02-09 13:38:58
|
*/
|
|
<template>
|
<div class="tool-ranging" ref="toolRangingBox">
|
<div class="header" @mousedown="move" :class="{ move: moveFlag }">
|
<div class="title">
|
<img class="icon deblurring" src="/img/icon/tool-ranging.png" alt />
|
<span>地图测距</span>
|
</div>
|
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
|
</div>
|
<div class="content">
|
<el-button type="primary" size="mini" @click.stop="calcDistance">开始</el-button>
|
|
<el-button type="danger" size="mini" @click.stop="deactivate">清除</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
|
export default {
|
data () {
|
return {
|
moveFlag: false
|
}
|
},
|
computed: {
|
...mapGetters(['viewer'])
|
},
|
created () { },
|
methods: {
|
move (e) {
|
const that = this
|
const odiv = this.$refs.toolRangingBox // 获取目标元素
|
// 算出鼠标相对元素的位置
|
const disX = e.clientX - odiv.offsetLeft
|
const disY = e.clientY - odiv.offsetTop
|
|
const disH = odiv.offsetHeight
|
const disW = odiv.offsetWidth
|
|
document.onmousemove = (e) => {
|
that.moveFlag = true
|
// 鼠标按下并移动的事件
|
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
|
let left = e.clientX - disX
|
let top = e.clientY - disY
|
|
// 绑定元素位置到positionX和positionY上面
|
|
if (left >= window.innerWidth - disW) {
|
left = window.innerWidth - disW
|
}
|
|
if (left <= 0) {
|
left = 0
|
}
|
|
if (top >= window.innerHeight - disH) {
|
top = window.innerHeight - disH
|
}
|
|
if (top <= 60) {
|
top = 60
|
}
|
|
// 移动当前元素
|
odiv.style.left = (left) + 'px'
|
odiv.style.top = (top) + 'px'
|
odiv.style.bottom = 'auto'
|
}
|
document.onmouseup = (e) => {
|
that.moveFlag = false
|
document.onmousemove = null
|
document.onmouseup = null
|
}
|
},
|
|
calcDistance () {
|
this.viewer.measure.distanceSurface()
|
},
|
|
deactivate () {
|
this.viewer.measure.deactivate()
|
},
|
|
closeModel () {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
}
|
},
|
destroyed () { }
|
}
|
</script>
|
|
<style lang="sass" scoped>
|
.move
|
cursor: move
|
</style>
|
