使用echarts实现一个可拖拽缩放的立体地图
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用echarts实现一个可拖拽缩放的立体地图相关的知识，希望对你有一定的参考价值。
参考技术A 近期根据全新的需求重构一个老的项目，首页需要做一个立体的中国地图，原先的平面地图使用的是高德与echarts结合，地图用高德，点用echarts，而现在要做立体的地图，并且不需要世界地图的背景，于是我直接放弃了高德直接改全部由echarts来实现。echarts 5.1.2
vue-echarts 6.0.0
lodash
element-ui
采用高德的地图json
https://datav.aliyun.com/tools/atlas/index.html
我绘制的立体地图的原理只是在页面上显示了两层的地图，简单来说就是底层使用暗色并且将中心点稍微下移，echarts的option配置如下
注意点：
通过监听 georoam 事件来实现，需要特别注意的是，缩放与拖动需要调用 echartsInstance.getOption() 来获取完整的option值并做出修改后覆盖原有的option，否则会出现bug。
单击事件有时会无法生效故改成了双击下钻(估计可能和拖拽有冲突)
说明：
1.code，centroid，level是数据组装的时候放入data中的，前两者直接从地图文件中取到，level的值只有'country'和'province'代表全国和省份。
至此一个完整的立体地图就实现了。
参考内容
https://www.makeapie.com/editor.html?c=xPRYVyWjUJ
5分钟实现一个可拖拽矩形
一、写在前面
写这个原因很简单，有这么一个需求如下：
编写代码实现以下要求：画一个矩形，拖拽矩形的4个角可以将矩形缩放，在矩形上按住鼠标拖动可以移动该矩形的位置。
要求如下：
- 整个矩形的最小大小为 5px * 5px，缩放到最小时不能发生移动；
- 鼠标快速移动时移动和缩放效果要保持流畅。
二、直接上代码
还是按照步骤一步一步的来吧。首先是要创建一个矩形，然后再写逻辑，下面一个矩形就画好了。。。
但是似乎屏幕上啥也没有。。 是的没宽高，所以就看不到了。别着急，继续画。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽缩放元素(工厂模式)</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#app-warpper {
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="app-warpper"></div>
</body>
<script>
//todo
</script>
</html>
这里开始写逻辑了，我们选择用工厂模式来创建一个可以拖拽编辑的矩形。下面就是代码工厂部分.若想看逻辑的可以一步一步的看代码注释,大概的思路就是,你需要计算你当前按下鼠标的位置,然后在移动的时候获取的鼠标位置与刚刚鼠标按下的位置进行一个计算.有个差值,这个差值就是需要移动的距离.
矩形缩放的时候就稍微要复杂一点了,大概思路如下:
- 左上角缩放: 计算 left坐标,top的坐标,以及宽高;
- 右上角缩放: 计算top坐标 和 宽高即可.
- 右下角缩放: 计算宽高即可.
- 左下角缩放: 计算left,top 和宽高.
可能描述有点抽象,但是动手写一遍的时候就知道大概是咋回事了.
/**
* 创建一个可拖拽的矩形
*/
function CreateDragRect(elm, options = {}) {
if (!elm) throw new Error('el 必须是一个document对象');
this.rect = elm;
this.isLeftMove = true;
this.isTopMove = true;
this.rectDefaultPosition = options.position || 'fixed';
this.rectDefaultLeft = options.x || 0;
this.rectDefaultTop = options.y || 0;
this.rectWidth = options.width || 100;
this.rectHeight = options.height || 100;
this.rectMinWidth = options.rectMinWidth || 5; //最小宽度(超过之后不允许再缩放)
this.rectMinHeight = options.rectMinHeight || 5; //最小高度(超过之后不允许再缩放)
this.rectBackgroundColor = options.background || '#ccc';
this.dragIconSize = options.dragIconSize || '4px';
this.dragIconColor = options.dragIconColor || '#f00';
//主矩形是否可以移动
this.isMove = false;
this.initStyle();
this.bindDragEvent(this.rect);
}
/**
* 主矩形绑定move事件
*/
CreateDragRect.prototype.bindDragEvent = function (dom, position) {
const _this = this;
dom.onmousedown = function (event) {
event.stopPropagation();
//按下矩形的时候可以移动，否则不可移动
_this.isMove = !position;
// 获取鼠标在wrapper中的位置
let boxX = event.clientX - dom.offsetLeft;
let boxY = event.clientY - dom.offsetTop;
//鼠标移动事件(如果计算太高,有拖影)
document.onmousemove = _this.throttle(function (moveEv) {
let ev = moveEv || window.event;
ev.stopPropagation();
let moveX = ev.clientX - boxX;
let moveY = ev.clientY - boxY;
switch (position) {
case 'top-left': //左上: 需计算top left width
_this.nwRectSize(moveX, moveY);
break;
case 'top-right': //右上 计算top 和 height
_this.neRectSize(moveX, moveY);
break;
case 'right-bottom': //只需计算当前鼠标位置
_this.seRectSize(moveX, moveY);
break;
case 'left-bottom': //计算left偏移量，计算w
_this.swRectSize(moveX, moveY);
break;
default: //拖拽矩形
if (!_this.isMove) return null;
_this.moveRect(ev.clientX - boxX, ev.clientY - boxY);
}
}, 15);
//鼠标松开，移除事件
document.onmouseup = function (event) {
document.onmousemove = null;
document.onmouseup = null;
// 存储当前的rect的宽高
_this.rectWidth = _this.rect.offsetWidth;
_this.rectHeight = _this.rect.offsetHeight;
// 获得当前矩形的offsetLeft 和 offsetTop
_this.rectOffsetLeft = _this.rect.offsetLeft;
_this.rectOffsetTop = _this.rect.offsetTop;
}
}
}
/**
* 初始化样式
*/
CreateDragRect.prototype.initStyle = function () {
this.rect.style.position = this.rectDefaultPosition;
this.rect.style.width = this.rectWidth + 'px';
this.rect.style.height = this.rectHeight + 'px';
this.rect.style.left = this.rectDefaultLeft + 'px';
this.rect.style.top = this.rectDefaultTop + 'px';
this.rect.style.background = this.rectBackgroundColor;
//依次为上 右 下 左
let dragIcons = [
{
cursor: 'nw-resize',
x: 'top',
y: 'left'
},
{
cursor: 'ne-resize',
x: 'top',
y: 'right'
},
{
cursor: 'se-resize',
x: 'right',
y: 'bottom'
},
{
cursor: 'sw-resize',
x: 'left',
y: 'bottom'
}
];
for (let i = 0, l = dragIcons.length; i < l; i++) {
let icon = document.createElement('i');
icon.id = Math.random().toString(36).substring(7);
icon.style.display = 'inline-block';
icon.style.width = this.dragIconSize;
icon.style.height = this.dragIconSize;
icon.style.position = 'absolute';
icon.style.zIndex = 10;
icon.style.cursor = dragIcons[i].cursor;
icon.style.backgroundColor = this.dragIconColor;
icon.style[dragIcons[i].x] = -parseInt(icon.style.width) / 2 + 'px';
icon.style[dragIcons[i].y] = -parseInt(icon.style.height) / 2 + 'px';
//绑定四个角的拖拽事件
this.bindDragEvent(icon, `${dragIcons[i].x}-${dragIcons[i].y}`);
//插入到矩形
this.rect.appendChild(icon);
}
};
/**
* 移动主矩形
*/
CreateDragRect.prototype.moveRect = function (x, y) {
if (this.isTopMove && this.isLeftMove) {
this.rect.style.left = x + 'px';
this.rect.style.top = y + 'px';
}
};
/**
* 移动主矩形缩放 - 左上
*/
CreateDragRect.prototype.nwRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, this.rectHeight - y);
if (isTopMove) {
this.rect.style.top = this.rectOffsetTop + y + 'px';
this.rect.style.height = height + 'px';
}
if (isLeftMove) {
this.rect.style.left = this.rectOffsetLeft + x + 'px';
this.rect.style.width = width + 'px';
}
};
/**
* 移动主矩形缩放 - 左下
*/
CreateDragRect.prototype.swRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, y);
if (isLeftMove) {
this.rect.style.left = this.rectOffsetLeft + x + 'px';
this.rect.style.width = width + 'px';
}
if (isTopMove) {
this.rect.style.height = height + 'px';
}
};
/**
* 移动主矩形缩放 - 右上
*/
CreateDragRect.prototype.neRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isTopMove, isLeftMove } = this.getMinSize(x, this.rectHeight - y);
if (isTopMove) {
this.rect.style.height = height + 'px';
this.rect.style.top = this.rectOffsetTop + y + 'px';
}
if (isLeftMove) {
this.rect.style.width = width + 'px';
}
};
/**
* 移动主矩形缩放 - 右下
*/
CreateDragRect.prototype.seRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height } = this.getMinSize(x, y);
this.rect.style.width = width + 'px';
this.rect.style.height = height + 'px';
};
/**
* 节流函数
* @param {*} fn
* @param {*} delay
*/
CreateDragRect.prototype.throttle = function (fn, delay) {
let last = 0;
return function () {
let curr = Date.now();
if (curr - last > delay) {
fn.apply(this, arguments);
last = curr;
}
}
}
/**
* 获取宽高
* @param {*} w
* @param {*} h
* @return { Object }
*/
CreateDragRect.prototype.getMinSize = function (w, h) {
let rectMinWidth = this.rectMinWidth;
let rectMinHeight = this.rectMinHeight;
//x拖拽
this.isLeftMove = w >= this.rectMinWidth;
//y拖拽
this.isTopMove = h >= this.rectMinHeight;
if (this.isLeftMove) rectMinWidth = w;
if (this.isTopMove) rectMinHeight = h;
return { width: rectMinWidth, height: rectMinHeight, isLeftMove: this.isLeftMove, isTopMove: this.isTopMove };
}
三、完整代码
只想用代码功能的,只需要复制到你的html文件中就可以直接使用了.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖拽缩放元素(工厂模式)</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#app-warpper {
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="app-warpper"></div>
</body>
<script>
/**
* 创建一个可拖拽的矩形
*/
function CreateDragRect(elm, options = {}) {
if (!elm) throw new Error('el 必须是一个document对象');
this.rect = elm;
this.isLeftMove = true;
this.isTopMove = true;
this.rectDefaultPosition = options.position || 'fixed';
this.rectDefaultLeft = options.x || 0;
this.rectDefaultTop = options.y || 0;
this.rectWidth = options.width || 100;
this.rectHeight = options.height || 100;
this.rectMinWidth = options.rectMinWidth || 5; //最小宽度(超过之后不允许再缩放)
this.rectMinHeight = options.rectMinHeight || 5; //最小高度(超过之后不允许再缩放)
this.rectBackgroundColor = options.background || '#ccc';
this.dragIconSize = options.dragIconSize || '4px';
this.dragIconColor = options.dragIconColor || '#f00';
//主矩形是否可以移动
this.isMove = false;
this.initStyle();
this.bindDragEvent(this.rect);
}
/**
* 主矩形绑定move事件
*/
CreateDragRect.prototype.bindDragEvent = function (dom, position) {
const _this = this;
dom.onmousedown = function (event) {
event.stopPropagation();
//按下矩形的时候可以移动，否则不可移动
_this.isMove = !position;
// 获取鼠标在wrapper中的位置
let boxX = event.clientX - dom.offsetLeft;
let boxY = event.clientY - dom.offsetTop;
//鼠标移动事件(如果计算太高,有拖影)<以上是关于使用echarts实现一个可拖拽缩放的立体地图的主要内容，如果未能解决你的问题，请参考以下文章