1:首先echars地图是有自己的拖拽功能的也就是option内的geo中的roam属性
roam: true,
但是此处不能使用该功能,为什么呢?
因为在上一篇文章内写了echars地图的点击下钻 返回上一级(主要是因为地图为了做伪3D,将2张echars地图叠到一块了,导致使用自带的功能,会拖拽一个,而底层的会留在原地)
基于这种情况,我们写一个拖拽整体的功能,也就是拖拽echars地图外层的div,从而达到拖拽整体的效果
那么基于这种情况我们开始我们的代码:
<div style="height: 100%; width: 100%;" @wheel="handleWheel" class="draggable-container" @mousedown.capture="startDrag"
@mousemove.capture="doDrag"
@mouseup.capture="endDrag" :style="{ transform: `scale(${scale})` }">
<div
:style="{ top: dragTop + 'px', left: dragLeft + 'px' }"
class="draggable-item"
ref="mapChartRef" style="height: 100%; width: 100%;"></div>
</div>
首先我们是写了一个echars地图(mapChartRef)让他的style根据你手势能移动 给到了top和left属性,在外层有一个div主要是为了包裹它同时给到的style属性中的transform是为了缩放它
缩放比较简单,我们先讲缩放,wheel是监听鼠标滚轮的
handleWheel(event) {
// 判断滚轮方向
const delta = event.wheelDelta ? event.wheelDelta : -event.deltaY;
console.log(delta)
if (delta < 0) {
// 向上滚动(向着放大)
scale.value *= 1.05; // 增加5%
} else {
// 向下滚动(向着缩小)
scale.value /= 1.05; // 减少5%
}
}
套入代码,即可实现 我们的缩放功能,内有注释 可以根据需要 自行更改
接下来是拖动
function doDrag(event) {
if (dragging.value) {
const deltaX = event.clientX - startX.value;
const deltaY = event.clientY - startY.value;
dragTop.value += deltaY / scale.value;
dragLeft.value += deltaX / scale.value;
startX.value = event.clientX;
startY.value = event.clientY;
if(dragTop.value!==0){
setDragg.value='3'
}
}
}
const startDrag=(event)=>{
dragging.value = true;
startX.value = event.clientX;
startY.value = event.clientY;
}
function endDrag() {
if(setDragg.value=='3'){
setDragg.value='4'
}else{
setDragg.value='1'
}
console.log(setDragg.value,'endDrag')
dragging.value=false
}
拖动的所有代码在此,
此处要注意,因为是接上篇文章中的下钻功能,会出现一个bug也就是拖拽是一个点击前 点击中 点击后的过程,那么click是会被这个过程所影响的,所以我们此处加入了一个setDragg 当点击了以后 dragging.value会产生值那么 如果触发点击中(dodrag)会将这个值改为3(也就是拖拽否则就是点击 让其进入点击事件)