@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