2d mark
npm install draw-mark-2d
npm i draw-mark-2d --save
or
yarn add draw-mark-2d
二、初始化
初始化时，需要为画布创建一个父元素，画布会根据父元素的大小，自动创建合适的大小。
引入二维标点库，进行相关操作
import { DrawMark2D} from 'draw-mark-2d'
三、创建画布
Vue
let el = this.refs.mapRef
let canvas = new SpaceMarker(el, {
...options // 初始化参数
})
画布初始化参数说明
{
mapWidth:0, // 图纸宽度（可以不传，会更加图纸大小计算）
mapHeight: 0, // 图纸高度（可以不传，会更加图纸大小计算）
scaleX: 1, // transform缩放点位修正
scaleY: 1, // transform缩放点位修正
mapImgUrl:''， // 图纸URL
on: (event, data) => {}, // 监听事件
marks: [], // 位置落点
ranges: [], // 区域落点，根据点位形成区域
paths: [], // 轨迹，根据点位形成轨迹
editModel: null, // 是否直接进入编辑模式。'mark': 点位标注, 'range':区域标注（待开发）
editOption: null, // 编辑模式附加参数。editModel='mark' 传点位的参数，editModel='range'时传区域参数，可改变图标，颜色，大小等
}
位置落点参数说明
{
id: 唯一标识，可以自定义，不传系统自动生成
center: {x: 0, y: 0}, // 落点坐标
w: 画布宽度（兼容图纸的现在的落点）
h: 画布高度（兼容图纸的现在的落点）
ext: {}, // 扩展参数
radius: 18, // 默认半径
padding: 9,// 中心圆边距
visible: true, //是否可见
highlight: false, // 是否显示高亮涟漪
highlightSize: 9, // 涟漪的大小
icon: 'default_icon', // 默认的图标，还可以传图片的URL
bgColor: 'blue' // 可以是其他自定义颜色，例如'#fff'
}区域落点说明
{
id: 唯一标识，可以自定义，不传系统自动生成
ext: {}, // 扩展参数
points:[], // 区域点位
w: 画布宽度（兼容企业的现在的落点）
h: 画布高度（兼容企业的现在的落点）
bgColor: 'blue' // 可以是其他自定义颜色，例如'rgba(255, 255, 255, 0.2)'
}
四、重新初始化
reset 方法，参数和创建时一样
canvas.reset({
...options
})
五、事件监听
on接收回调函数
let canvas = new SpaceMarker(el, {
...
on:(event, data) =>{
console.log(event, data);
}
})
mark_click: 点位点击事件
mark_enter: 点位鼠标悬浮事件
mark_leave: 点位鼠标移出事件
range_click: 区域点击事件
range_enter: 区域鼠标悬浮事件
range_leave: 区域鼠标移出事件
loaded: 初始化完成事件
rendered: 画布重新渲染事件回调
mark_pos: 标注点位成功事件
六、更新落点信息
#### 1. 更新位置点位
// 更新某个点位信息
updateMarkById(id, options, path = 'id')
// 更新所有点位信息，不刷新画布
updateMark(marks) // marks为新返回的点位数组
id:查询的值，
options: 更新的参数
{
icon,
bgColor,
ext,highlight,
highlightSize,
visible,
}
path: 查询值，所在路径
##### Example
canvas.updateMarkById('2', {
bgColor: (['blue','red','orange','yellow'])[Math.round(Math.random()*10) % 4],
ext:{},
icon: 'default_icon',
},'ext.index')
canvas.updateMark([{
{
id: 唯一标识，可以自定义，不传系统自动生成
ext: {}, // 扩展参数
points:[], // 区域点位
w: 画布宽度（兼容企业的现在的落点）
h: 画布高度（兼容企业的现在的落点）
bgColor: 'blue' // 可以是其他自定义颜色，例如'rgba(255, 255, 255, 0.2)'
}
}])
#### 2.更新区域
updateRangeById(id, options, path = 'id')
updateRange(ranges) // 最新的区域点位信息
id:查询的值，
options: 更新的参数
{
bgColor,
ext,
visible,
}
path: 查询值，所在路径七、更新画布信息
update(options)
可选参数
scaleX:
scaleY:八、批量设置区域和落点的辅助方法
// 高亮Mark
setMarkHighlight(id, path = 'id')
可选参数
id 可以是数组，为空则清除所有涟漪效果
path 是id的路径
// 显示Mark
setMarkVisible(id, path = 'id')
可选参数
id 可以是单个元素的id值，显示某一个；可以是数组，批量显示；可以为空，则显示所有；可以是bool值，true=都显示，false=都隐藏
path 是id的路径九、编辑模式
##### 编辑模式有两种进入方式:##### 第一种
初始化时传入editModel，editModel 参数
- editModel= 'mark' 点位标注
- editModel= 'range' 区域标注（待开发）
- editOption 编辑模式附加参数。editModel='mark' 传点位的参数，editModel='range'时传区域参数，可改变图标，颜色，大小等
##### 第二种
创建完画布以后，调用
// 设置编辑模式
setEditable(type, options)