@wecity/img-mark

npm i @wecity/img-mark -S

@wecity/img-mark是一个二次封装的图片标注工具

imgMark

imgMark.initMap

初始化画布,返回Promise

<div id='cvs'></div>  

import { imgMark } from '@wecity/img-mark'
const gmap = await imgMark.initMap({ id: 'cvs', img: pic, options: { zoom, mode: 'BAN' } })

字段名	类型	描述
id	object	map container
img	png/gif等	标注图片
options	object	配置项

imgMark.initImg

初始化标注图片，返回Promise

<div id='cvs'></div>  

import { imgMark } from '@wecity/img-mark'
const gmap = await imgMark.initMap({ id: 'cvs', img: pic, options: { zoom, mode: 'BAN' } })
const imgLayer = await imgMark.initImg({ img: pic, map: gMap })

字段名	类型	描述
map	gMap	gMap
img	png/gif等	标注图片
zIndex	int	层级

imgMark.initFeature

初始化Feature，返回Promise

<div id='cvs'></div>  

import { imgMark } from '@wecity/img-mark'
const gmap = await imgMark.initMap({ id: 'cvs', img: pic, options: { zoom, mode: 'BAN' } })
const imgLayer = await imgMark.initImg({ img: pic, map: gMap })
const featureLayer = await imgMark.initFeature({ map: gMap, img: pic, registerEvt: true })

字段名	类型	描述
map	gMap	gMap
img	png/gif等	标注图片
zIndex	int	层级
registerEvt	boolean	默认注册一些通用的事件

registerEvt注册事件

1. 标注新增、编辑上图
2. 选中图层

    map.events.on('featureSelected', feature => {
      map.setActiveFeature(feature);
    })
    map.events.on('featureUnselected', () => {
      map.setActiveFeature(null);
    })
    map.events.on('featureUpdated', (feature, shape) => {
      feature.updateShape(shape);
    })
    map.events.on('drawDone', async (type, data) => {
      const drawingStyle = map.drawingStyle
      const uuid = utils.getUuid(type)
      if (FEATURE_MODULE.includes(type)) {
        const module = utils.bigCamel(type)
        const instance = new AILabel.Feature[module](
          uuid, // id
          getModeData(type, data), // shape
          {name: uuid}, // props
          drawingStyle // style
        )
        feature.addFeature(instance)
      }
    })

imgMark.binExtraData

绑定自定义数据大屏props到feature

字段名	类型	描述
any	any	自定义数据

// 设置
const instance = new AILabel.Feature[module](
    uuid, // id
    shape, // shape
    { name: uuid, extra: this.extraData }, // props
    drawingStyle // style
)
feature.addFeature(instance)


// 获取
feature = {
    props: {
        extra: ''
    }
}   

utils

方法名	参数	描述
bigCamel	str => string	字符串转大驼峰，如: Camel
getUuid	str => string	uuid
getImgInfo	image	获取图片信息：宽高等， 返回promise
hex2rgb	color(16进制), 透明的	16进制转rgba

import { utils } from '@wecity/img-mark' 

utils.bigCamel('CAMEL') // Camel
utils.bigCamel('camel') // Camel

其他包含ailabel方法

import AILabel from 'ailabel'
const imgMark = {
  ...AILabel
}
export default imgMark