插件:DragMap

插件工具

最近做的一个拖拽定位工具类，主要应用场景为各种IOT项目的示意图，设备定位功能

目前分为两种模式

  • Canvas：地图由Canvas绘制，支持拖拽和缩放，包含位点数据的管理和一系列配置方法，相比定位版，使用起来更加方便，功能更加齐全，推荐使用
  • 定位：绝对定位版本，比较简易，主要提供了拖拽方法，事件发送和位点绝对定位数据的转换，不包含对dom结构和数据的管理，作者已放弃治疗，请慎用

GitHub

仓库地址: ‘https://github.com/gitliyu/drag-map’

Demo

Demo: ‘https://www.liyu.fun/demo/drag-map’

Demo源码示例： ‘Canvas’ ‘定位’

安装

1
npm install drag-map

使用

1
2
3
import DragMap from 'drag-map'

const dragMap = new DragMap();

Canvas版本

默认html结构如下，可在配置项中修改

1
2
3
4
5
6
7
<div id="drag-list">
  <div class="drag-target">1</div>
  <div class="drag-target">2</div>
  <div class="drag-target">3</div>
</div>

<canvas id="drag-map"></canvas>

配置项

在实例化时可接受参数，除type和options外均为非必填项，以下为默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new DragMap({
  document, // 文档对象注入
  type: 'canvas', // 使用canvas版本时必须设置
  list: '#drag-list',   // 可选目标列表
  map: '#drag-map',     // 拖拽目标区域
  target: '.drag-target',  // 拖拽目标
  options: {},  // 可选区域的数据列表
  data: [],  // 初始化的数据
  bgImage: 'bg.png',  // 背景图片地址
  maxScale: 3,  // 最大放大倍数，默认为3
  minScale: 1,  // 最小缩放倍数，默认为1
  scaleStep: 0.05, // 鼠标滑轮每次缩放比例, 默认为0.05
  readonly: false,  // 只读模式
  deleteImage: 'close.png', // 删除按钮图片地址
  deleteImageSize: 20, // 删除按钮尺寸，默认为20px
  labelStyle: {}  // 位点标签样式
})

其中options为拖拽位点图片数据，格式如下

1
2
3
4
5
6
7
{
  key: 1, // key值必须设置，作为唯一标识符，与drag-list索引值对应
  url: 'xxx.png', // 位点图片地址
  label: 'label', // 位点标签
  disabled: false, // 选项禁用
  ...options // 其他自定义数据，会在事件和记录的位点数据中一并记录
}

位点数据data格式如下

1
2
3
4
5
6
7
8
[{
  key: 1,
  x: 0.2, // 横坐标 保留4位
  y: 0.3, // 纵坐标
  width: 70,  // 位点图像宽度
  height: 70,  // 位点图像高度
  ...options // options中自定义数据
}]

位点标签样式labelStyle格式如下

1
2
3
4
5
6
{
  font: '16px bold 黑体', // 字体样式字符串
  fillStyle: '#333',  // 字体颜色
  margin: 15, // label间距，默认15
  position: 'bottom'  // label位置，默认bottom top|bottom|left|right
}

事件

对于拖拽各个过程的数据，都会以事件的形式发送出来，监听方式如下

1
2
3
4
5
6
7
8
const dragMap = new DragMap();

dragMap.on('drop', (data, event) => {
  console.log('drop', data, event);
});
dragMap.on('click', data => {
  console.log('click', data);
})

以下是所有事件介绍

  • dragstart(data, event) 拖拽开始
  • dragenter(data, event) 进入目标区域
  • dragover(data, event) 在目标区域中拖拽
  • drop(data, event) 拖拽完成
  • dragleave(data, event) 拖拽离开目标区域
  • click(data, event) 点击位点图像
  • delete(data) 点击位点删除按钮
  • mouseover(data, event) 鼠标经过位点
  • mouseleave(data, event) 鼠标移出位点

事件接受参数event为原生事件参数，data为当前位点数据格式同实力化格式一致

方法

操作类

  • refresh() 当dom元素发生变化后调用，重新刷新dom节点并绑定事件
  • draw() 重绘画布
  • clear() 清空数据并重置画布，保留背景图

数据类

  • setOptions(options) 设置可选项数据，返回Promise，设置后需要等待图片加载完成再进行下一步

    1
    2
    3
    dragMap.setOptions(options).then(() => {
      // do something
    })

  • setData(data) 设置位点数据

  • getData() 获取位点数据

配置类

  • setBgImage(url) 设置背景图
  • setScale(scale) 设置当前缩放倍数
  • setMinScale(scale) 设置最小缩放倍数，默认1
  • setMaxScale(scale) 设置最大缩放倍数，默认3
  • setScaleStep(step) 设置每次缩放比例，默认0.05

  • setImageSize(width, height) 设置位点图片大小，默认为图片本身大小,height不传时默认和width相同

    1
    2
    dragMap.setImageSize(70)
    dragMap.setImageSize(50, 60)

  • setDeleteImage(url) 设置删除按钮图片

  • setDeleteImageSize(size) 设置删除按钮尺寸

  • setOptionDisabled(index, disabled) 设置选项禁用

    1
    2
    dragMap.setOptionDisabled(1) // 索引为1的禁用
    dragMap.setOptionDisabled(2, false) // 取消禁用

  • setLabelStyle(style) 设置label样式

    1
    2
    3
    4
    5
    6
    dragMap.setLabelStyle({
      font: '16px bold 黑体',
      fillStyle: '#333',
      margin: 15,
      position: 'bottom'
    })

定位版本

默认html结构为

1
2
3
4
5
6
7
<div id="drag-list">
  <div class="drag-target">1</div>
  <div class="drag-target">2</div>
  <div class="drag-target">3</div>
</div>

<div id="drag-map"></div>

配置项

在实例化时可接受参数，以下为默认值

1
2
3
4
5
6
new DragMap({
  document, // 文档对象注入
  list: '#drag-list',   // 可选目标列表
  map: '#drag-map',     // 拖拽目标区域
  target: '.drag-target'  // 拖拽目标
})

事件

  • dragstart(data, event) 拖拽开始
  • dragenter(data, event) 进入目标区域
  • dragover(data, event) 在目标区域中拖拽
  • drop(data, event) 拖拽完成
  • dragleave(data, event) 拖拽离开目标区域

移动端只支持drop事件

相比于canvas版本，data数据格式有所不同

1
2
3
4
5
6
7
8
9
10
{
  action: 'add'   // 操作类型 'add'|'edit'
  index: 1  // 拖拽对象索引值
  offsetX: 155  // 水平偏移量，单位px
  offsetY: 106  // 垂直偏移量，单位px
  percentX: 10.18   // 水平偏移百分比
  percentY: 27.04   // 垂直偏移百分比
  style: 'left: 155px;top: 106px;', // style字符串
  percentStyle: 'left: 10.18%;top: 27.04%;' // 百分比style字符串
}

方法

  • refresh() 当dom元素发生变化后调用，重新刷新dom节点并绑定事件

本文标题:插件:DragMap

文章作者:Li Yu

发布时间:2020-01-15, 18:04:15

最后更新:2020-08-21, 11:56:23

原始链接:https://www.liyu.fun/2020/01/15/drag-map/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. GitHub
  2. 2. Demo
  3. 3. 安装
  4. 4. 使用
  5. 5. Canvas版本
    1. 5.1. 配置项
    2. 5.2. 事件
    3. 5.3. 方法
  6. 6. 定位版本
    1. 6.1. 配置项
    2. 6.2. 事件
  7. 7. 方法
|