<template>
|
<div class="InfoPopup">
|
<Popup
|
ref="pop"
|
v-for="(data, index) in PopupData"
|
:key="data.id"
|
title="图层管理"
|
:maxHeight="data.maxHeight || '700px'"
|
@close="close(data.id)"
|
:left="data.left || left"
|
:top="data.top || top + index * 30 + 'px'"
|
>
|
<div id="eagleMapContainer">
|
<div
|
style="height:400px;"
|
v-drag
|
@mousedown="dragEagle"
|
>
|
<layer-tree />
|
</div>
|
</div>
|
<!-- <div class="InfoPopupContianer">
|
|
</div> -->
|
</Popup>
|
</div>
|
</template>
|
|
<script>
|
import Popup from "./Popup.vue";
|
import LayerTree from "./LayerTree.vue";
|
export default {
|
name: "maplayer",
|
|
components: {
|
Popup,
|
LayerTree,
|
},
|
data() {
|
return {
|
// 弹窗数据
|
PopupData: ["maplayer"],
|
left: "calc(100% - 370px)",
|
top: 10,
|
};
|
},
|
directives: {
|
drag: {
|
inserted: function (el) {
|
const dragDom = el;
|
dragDom.style.cursor = "nwse-resize";
|
dragDom.onmousedown = (e) => {
|
// 鼠标按下，计算当前元素距离可视区的距离
|
const disX = e.clientX;
|
const w = dragDom.clientWidth;
|
const minW = 300;
|
const maxW = 1000;
|
const disY = e.clientY;
|
const h = dragDom.clientHeight;
|
const minH = 300;
|
const maxH = 700;
|
var nw, nh;
|
document.onmousemove = function (e) {
|
// 通过事件委托，计算移动的距离
|
const l = e.clientX - disX;
|
const r = e.clientY - disY;
|
// 改变当前元素宽度，不可超过最小最大值
|
nw = w + l;
|
nw = nw < minW ? minW : nw;
|
nw = nw > maxW ? maxW : nw;
|
dragDom.style.width = `${nw}px`;
|
nh = h + r;
|
nh = nh < minH ? minH : nh;
|
nh = nh > maxH ? maxH : nh;
|
dragDom.style.height = `${nh}px`;
|
};
|
|
document.onmouseup = function (e) {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
};
|
};
|
},
|
},
|
},
|
computed: {},
|
mounted() { },
|
methods: {
|
dragEagle: function (e) {
|
var targetDiv = document.getElementById('eagleMapContainer');
|
//得到点击时该地图容器的宽高：
|
var targetDivHeight = targetDiv.offsetHeight;
|
var startX = e.clientX;
|
var startY = e.clientY;
|
var _this = this;
|
document.onmousemove = function (e) {
|
e.preventDefault();
|
//得到鼠标拖动的宽高距离：取绝对值
|
var distX = Math.abs(e.clientX - startX);
|
var distY = Math.abs(e.clientY - startY);
|
//往上方拖动：
|
if (e.clientY < startY) {
|
targetDiv.style.height = targetDivHeight + distY + 'px';
|
}
|
//往下方拖动：
|
if (e.clientX < startX && e.clientY > startY) {
|
targetDiv.style.height = (targetDivHeight - distY) + 'px';
|
}
|
if (parseInt(targetDiv.style.height) >= 300) {
|
targetDiv.style.height = 300 + 'px';
|
}
|
if (parseInt(targetDiv.style.height) <= 150) {
|
targetDiv.style.height = 150 + 'px';
|
}
|
}
|
document.onmouseup = function () {
|
document.onmousemove = null;
|
}
|
},
|
// 关闭所有
|
closeAll() {
|
this.PopupData.forEach((item) => {
|
item.close && item.close();
|
});
|
this.PopupData = [];
|
},
|
// 关闭弹窗
|
close(id) {
|
this.$bus.$emit("treeDataCopy", "true");
|
let index = this.PopupData.findIndex((item) => {
|
return item.id === id;
|
});
|
let data = this.PopupData.splice(index, 1)[0];
|
data.close && data.close();
|
this.$store.state.layerMnage = false;
|
},
|
// 打开弹窗
|
open(title, value, style = {}) {
|
this.PopupData.push({
|
id: this.createRandomId(),
|
title,
|
value,
|
...style,
|
});
|
let index = this.PopupData.length - 1;
|
this.$nextTick(() => {
|
this.$refs.pop[index].open();
|
});
|
return this.PopupData[index];
|
},
|
// 随机id
|
createRandomId() {
|
return (
|
(Math.random() * 10000000).toString(16).substr(0, 4) +
|
"-" +
|
new Date().getTime() +
|
"-" +
|
Math.random().toString().substr(2, 5)
|
);
|
},
|
},
|
};
|
</script>
|
