1. 概述

在前端开发过程中难免遇到针对图片的缩放平移；以及在图片上进行矢量数据、文本、标注的展示； 如果你有上面的任何需求，恭喜你，找到组织了....在此背景下，AILabel.js诞生了

1.1. 特性

1. 多类型要素展示：图片/矢量数据/文本/标注
2. 高效绘图：canvas矢量数据绘制
3. 使用方便简单 ✨✨✨✨✨

1.2. 名词解释

1. zoom：容器宽代表的实际距离宽
2. 实际坐标系：要素或实体代表的实际坐标值所在的坐标系
3. 屏幕标注系：用来展示的坐标系
4. ...

1.3. 授权

....

2. AILabel.Map

2.1. 实例化

// js: 伪代码
const gMap = new AILabel.Map(domId: string, mapOptions?: IMapOptions);
// js: demo【gMap将作为后续使用的容器实例，不再进行重复实例操作】
const gMap = new AILabel.Map('map', {
   center: {x: 0, y: 0},
   zoom: 800,
   mode: 'PAN' // 绘制线段
});

Params

IMapOptions

IPoint

ISize

2.2. setMode

AILabel.Map实例设置当前模式

gMap.setMode(mode: EMapMode);

Params

EMapMode

2.3. setZoomWheelRatio

AILabel.Map实例设置滑轮缩放比例, 取值区间[0, 10)

gMap.setZoomWheelRatio(0);

2.4. setDrawingStyle

AILabel.Map设置绘制过程中的样式

gMap.setDrawingStyle(drawingStyle: IFeatureStyle);

IFeatureStyle

canvas样式：比如lineWidth/strokeStyle/fillStyle等

2.5. setEditingColor

AILabel.Map设置编辑时拖拽对象的绘制颜色

gMap.setEditingColor('#000');

2.6. enableDrawingTip

AILabel.Map设置绘制过程中提示文字开启【默认开启】

gMap.enableDrawingTip();

2.7. disableDrawingTip

AILabel.Map设置绘制过程中提示文字关闭

gMap.disableDrawingTip();

2.8. enableDrawingCrosshair

AILabel.Map设置绘制过程中十字丝开启

gMap.enableDrawingCrosshair();

2.9. disableDrawingCrosshair

AILabel.Map设置绘制过程中十字丝关闭

gMap.disableDrawingCrosshair();

2.10. enableHotKeys

AILabel.Map设置快捷键开启

gMap.enableHotKeys();

2.11. disableHotKeys

AILabel.Map设置快捷键关闭

gMap.disableHotKeys();

2.12. enableZoomWhenDrawing

开启绘制时可鼠标滑轮缩放

// define
enableZoomWhenDrawing()
// demo
gMap.enableZoomWhenDrawing();

2.13. disableZoomWhenDrawing

禁用绘制时可鼠标滑轮缩放

// define
disableZoomWhenDrawing()
// demo
gMap.disableZoomWhenDrawing();

2.14. enablePanWhenDrawing

开启绘制时鼠标达到边界外自动平移

// define
enablePanWhenDrawing()
// demo
gMap.enablePanWhenDrawing();

2.15. disablePanWhenDrawing

禁用绘制时鼠标达到边界外自动平移

// define
disablePanWhenDrawing()
// demo
gMap.disablePanWhenDrawing();

2.16. getSize

获取传入容器的大小

// define
getSize(): ISize
// demo
const containerSize = gMap.getSize();

ISize

2.17. getScale

获取当前缩放比例 (containerWidth / zoom)

// define
getScale(zoom?: number): number
// demo
const scale = gMap.getScale();

params

2.18. setCenter

设置中心点（即容器的中心点对应的实际坐标的中心点）

// define
setCenter(center: IPoint): Map
// demo
gMap.setCenter(center);

params

2.19. getCenter

获取中心点（即容器的中心点对应的实际坐标的中心点）

// define
getCenter(): IPoint
// demo
const center = gMap.getCenter();

2.20. getScreenCenter

获取屏幕中心点坐标（即containerWidth/2, containerHeight/2）

// define
getScreenCenter(): IPoint
// demo
const center = gMap.getScreenCenter();

params

2.21. getBounds

获取视野范围

// define【option为预留参数字段】
getBounds(option?: IObject = {}): IRectShape
// demo
const bounds = gMap.getBounds();

IRectShape

2.22. centerAndZoom

定位并缩放到指定位置

// define
centerAndZoom(option: ICenterAndZoom): Map
// demo
const bounds = gMap.centerAndZoom({center: {x,y}, zoom: 1000});

ICenterAndZoom

2.23. zoomIn

放大

// define
zoomIn()
// demo
gMap.zoomIn();

2.24. zoomOut

缩小

zoomOut()
// demo
gMap.zoomOut();

2.25. addLayer

添加Layer至当前Map实例

// define
addLayer(layer: Layer)
// demo
const featureLayer = new AILabel.Layer.Feature(...);
gMap.addLayer(featureLayer);

params

Layer 详细解释见Layer：api |参数|说明|类型| |---|---|---| |Image|图片图层|AILabel.Layer.Image| |Feature|矢量图层|AILabel.Layer.Feature| |Mask|涂抹图层|AILabel.Layer.Mask| |Text|文本图层|AILabel.Layer.Text|

2.26. removeLayerById

删除指定layerId的图layer

// define
removeLayerById(targetLayerId: string)
// demo
const featureLayer = new AILabel.Layer.Feature(...);
gMap.addLayer(featureLayer);
gMap.removeLayerById(featureLayer.id);

params

2.27. removeAllLayers

删除所有layers【内置图层除外】

// define
removeAllLayers()
// demo
const featureLayer = new AILabel.Layer.Feature(...);
gMap.addLayer(featureLayer);
gMap.removeAllLayers();

2.28. getLayers

获取当前map实例上的所有layer

// define
getLayers(): Array<Layer>
// demo
const allLayers = gMap.getLayers();

2.29. refresh

刷新map

// define
refresh()
// demo
gMap.refresh();

2.30. resize

大小重设map，可以指定size大小或者不传入(会自动获取dom-size大小进行重设)

// define
resize(size?: ISize)
// demo
gMap.resize();

2.31. setActiveFeature

设置map当前的待编辑feature，最多只会存在一个activeFeature

// define
setActiveFeature(feature: Feature | null)
// demo
// 设置编辑feature，需要配合gMap.events.on('featureSelected')使用【后续事件部分会详细讲解】
gMap.setActiveFeature(feature);
// 取消编辑对象，需要配合gMap.events.on('featureUnselected')使用【后续事件部分会详细讲解】
gMap.setActiveFeature(null);

params

2.32. getActiveFeature

获取当前activeFeature

// define
getActiveFeature(): Feature | null
// demo
gMap.getActiveFeature();

2.33. getTargetFeatureWithPoint

获取命中的矢量Feature对象，没有命中，则返回null

// define
getTargetFeatureWithPoint(globalPoint: IPoint): Feature | null
// demo
const targetFeature = gMap.getTargetFeatureWithPoint(point);

2.34. transformScreenToGlobal

屏幕坐标转实际坐标

// define
transformScreenToGlobal(screenPoint: IPoint): IPoint
// demo
const globalPoint = gMap.transformScreenToGlobal({x, y});

params

2.35. transformGlobalToScreen

实际坐标转屏幕坐标

// define
transformGlobalToScreen(globalPoint: IPoint): IPoint
// demo
const screenPoint = gMap.transformGlobalToScreen({x, y});

params

2.36. exportLayersToImage

AILabel.Map将layers导出为图片（支持导出text/image/feature/mask等图层，“图片不能跨域“）

// define
exportLayersToImage(bounds: IRectShape, option: IExportOption = {})
// demo
const base64 = await gMap.exportLayersToImage(
        {x: 0, y: 0, width: 500, height: 354},
        {type: 'base64', format: 'image/png'}
    );
const blob = await gMap.exportLayersToImage(
        {x: 0, y: 0, width: 500, height: 354},
        {type: 'blob', format: 'image/png'}
    );

params

IExportOption

2.37. destroy

AILabel.Map实例销毁【如果在切换实例时最好要将上一次实例进行destroy】

gMap && gMap.destroy();

2.38. events

事件监听

// define
events.on(eventType: EEventType, callback: Function);
// demo
gMap.events.on('boundsChanged', () => {console.log('bounds has changed')});

params

EEventType

BoundsChanged

// define
callback: () => void
// demo
gMap.events.on('boundsChanged', callback);

FeatureSelected

// define
callback: (feature: Feature) => void
// demo
gMap.events.on('featureSelected', callback);

FeatureUnselected

// define
callback: (feature: Feature) => void
// demo
gMap.events.on('featureUnselected', callback);

DrawDone

// define
callback: (mapMode: EMapMode, shape) => void
// demo
gMap.events.on('drawDone', callback);

FeatureUpdated

// define
callback: (feature: Feature, shape) => void
// demo
gMap.events.on('featureUpdated', callback);

FeatureDeleted

// define [目前只针对点在选中态右键触发]
callback: (feature:PointFeature) => void
// demo
gMap.events.on('featureDeleted', callback);

MouseCallback

// define
callback: (point:IBasePoint) => void
// demo
gMap.events.on('click', callback);

IBasePoint

2.39. slots

事件拦截器：callback返回值false，会阻断后续流程

// define
slots.on(eventType: EEventSlotType, callback: Function);
// demo
// 此示例为双击选中feature对象时阻止系统默认的高亮点样式，改为自定义样式
// gMap.slots.on('drawActivePoint', (point, overLayerInstance) => {
gMap.slots.on('drawActiveMiddlePoint', (point, overLayerInstance) => {
    overLayerInstance.addCircleFeature(
        {sr: 3.5, cx: point.x, cy: point.y},
        {
            clear: false,
            style: {strokeStyle: '#00f', fillStyle: '#00f', stroke: true, fill: true, lineWidth: 1}
        }
    );
    return false;
});

params

EEventSlotType

2.40. 快捷键

目前AILabel中内置已有快捷键

3. AILabel.Layer.Image

图片图层

3.1. 实例化

// define
constructor(id: string, image: IImageInfo, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstImageLayer = new AILabel.Layer.Image(
   'first-layer-image', // id
   {
       src: 'https://img2.baidu.com/it/u=2053804264,1341330775&fm=26&fmt=auto&gp=0.jpg',
       width: 500, // 图片宽度
       height: 354, // 图片高度
       crossOrigin: false, // 图片是否跨域
       position: { // 图片左上角对应的坐标位置
           x: -250,
           y: 177
       },
       grid: { // 3 * 3
           columns: [{color: '#9370DB'}, {color: '#FF6347'}],
           rows: [{color: '#9370DB'}, {color: '#FF6347'}]
       }
   }, // imageInfo
   {name: '第一个图片图层'}, // props
   {zIndex: 5} // style
);
gMap.addLayer(gFirstImageLayer);

Params

IImageInfo

IGridInfo

IGridItemInfo

ILayerStyle

3.2. updateGrid

更新网格

// define
updateGrid(gridInfo: IGridInfo)
// demo
gFirstImageLayer.updateGrid({columns: [{color: '#333'}], rows: [{color: '#666'}]});

3.3. events

事件监听

// define
events.on(eventType: ELayerImageEventType, callback: Function);
// demo
gFirstImageLayer.events.on('loadStart', (url, instance) => {
   console.log('--loadStart--');
});
gFirstImageLayer.events.on('loadEnd', (url, instance) => {
   console.log('--loadEnd--');
});
gFirstImageLayer.events.on('loadError', (url, instance) => {
   console.log('--loadError--');
});

params

ELayerImageEventType

4. AILabel.Layer.Feature

矢量图层（用于承载Feature.Point, Feature.Line, Feature.Polyline, Feature.Polygon, Feature.Rect, Feature.Circle等矢量要素的展示）

4.1. 实例化

// define
constructor(id: string, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstFeatureLayer = new AILabel.Layer.Feature(
   'first-layer-feature', // id
   {name: '第一个矢量图层'}, // props
   {zIndex: 10} // style
);
gMap.addLayer(gFirstFeatureLayer);

Params

4.2. addFeature

添加矢量要素（Feature.Point, Feature.Line, Feature.Polyline, Feature.Polygon, Feature.Rect, Feature.Circle等）

// define
addFeature(feature: Feature, option?: IFeatureAddOption)
// demo (AILabel.Feature.Polygon见下文)
const gFirstFeaturePolygon = new AILabel.Feature.Polygon(
   'first-feature-polygon', // id
   {points: [
       {x: 0, y: 0}, {x: 100, y: 100},
       {x: 100, y: 200}
   ]}, // shape
   {name: '第一个多边形'}, // props
   {strokeStyle: '#FFD500', lineWidth: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeaturePolygon);

params

IFeatureAddOption

4.3. removeFeatureById

移除指定featureId的feature

// define
removeFeatureById(targetFeatureId: string)
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
gFirstFeatureLayer.removeFeatureById(polygonFeature.id);

params

4.4. getFeatureById

获取指定featureId的feature，如果没有，则返回null

// define
getFeatureById(targetFeatureId: string)
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
gFirstFeatureLayer.getFeatureById(polygonFeature.id);

4.5. getAllFeatures

获取当前Layer.Feature上的所有features

// define
getAllFeatures(): Feature[]
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
const allFeatures = gFirstFeatureLayer.getAllFeatures();

4.6. removeAllFeatures

移出当前featureLayer上所有features

// define
removeAllFeatures()
// demo
const polygonFeature = new AILabel.Feature.Polygon(...);
gFirstFeatureLayer.addFeature(polygonFeature);
gFirstFeatureLayer.removeAllFeatures();

4.7. getTargetFeatureWithPoint

根据point获取捕捉到的features中第一个，如果没有则返回null

// define
getTargetFeatureWithPoint(point: IPoint): Feature | null
// demo
gFirstFeatureLayer.getTargetFeatureWithPoint({x,y});

params

5. AILabel.Layer.Marker

注记层【注：此层为Map内置图层，不对外暴露二次开发进行实例】； gMap.markerLayer即为AILabel.Layer.Marker

5.1. 实例化

内置实例，不需要进行二次开发进行实例

5.2. addMarker

添加marker注记

// define
addMarker(marker: Marker, option?: IObject)
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);

params

5.3. removeMarkerById

移除指定markerId的marker

// define
removeMarkerById(targetMarkerId: string)
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
gMap.markerLayer.removeMarkerById(marker.id);

params

5.4. getMarkerById

获取指定markerId的marker，如果没有，则返回null

// define
getMarkerById(targetMarkerId: string)
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
gMap.markerLayer.getMarkerById(marker.id);

5.5. getAllMarkers

获取Layer.Marker上的所有markers

// define
getAllMarkers(): Marker[]
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
const allMarkers = gMap.markerLayer.getAllMarkers();

5.6. removeAllMarkers

移除所有markers

// define
removeAllMarkers()
// demo
const marker = new AILabel.Marker(...);
gMap.markerLayer.addMarker(marker);
gMap.markerLayer.removeAllMarkers();

6. AILabel.Layer.Text

文本图层，显示文本对象

6.1. 实例化

// define
constructor(id: string, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstTextLayer = new AILabel.Layer.Text(
   'first-layer-text', // id
   {name: '第一个文本图层'}, // props
   {zIndex: 12, opacity: 1} // style
);
gMap.addLayer(gFirstTextLayer);

Params

6.2. addText

添加text文本

// define
addText(text: Text, option?: ITextAddOption)
// demo (AILabel.Text见下文)
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);

params

IFeatureAddOption

6.3. removeTextById

移除指定textId的text

// define
removeTextById(targetTextId: string)
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
gFirstTextLayer.removeTextById(text.id);

params

6.4. getTextById

获取指定textId的text，如果没有，则返回null

// define
getTextById(targetTextId: string)
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
gFirstTextLayer.getTextById(text.id);

6.5. getAllTexts

获取Layer.Text上的所有texts对象

// define
getAllTexts(): Text[]
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
const allTexts = gFirstTextLayer.getAllTexts();

6.6. removeAllTexts

移除所有texts

// define
removeAllTexts()
// demo
const text = new AILabel.Text(...);
gFirstTextLayer.addText(text);
gFirstTextLayer.removeAllTexts();

7. AILabel.Layer.Mask

文本图层，显示文本对象

7.1. 实例化

// define
constructor(id: string, props: IObject = {}, style: ILayerStyle = {})
// demo
const gFirstMaskLayer = new AILabel.Layer.Mask(
   'first-layer-mask', // id
   {name: '第一个涂抹图层'}, // props
   {zIndex: 11, opacity: .5} // style
);
gMap.addLayer(gFirstMaskLayer);

Params

7.2. addAction

添加涂抹Action，此处我们把绘制【DrawAction】/擦除【ClearAction】/数据回显【ImageAction】定义为action

// define
addAction(action: Action, option?: IObject)
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);

params

Action

7.3. removeActionById

移除指定action

// define
removeActionById(targetActionId: string)
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
gFirstMaskLayer.removeActionById(drawAction.id);

params

7.4. removeAllActions

移除所有actions

// define
removeAllActions()
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
gFirstMaskLayer.removeAllActions();

7.5. getAllActions

获取Layer.Mask上的所有actions

// define
getAllActions(): Action[]
// demo (AILabel.Action见下文)
const drawAction = new AILabel.Action.Draw(...);
gFirstMaskLayer.addAction(drawAction);
const allActions = gFirstMaskLayer.getAllActions();

7.6. getRleData

根据分类获取分类分类rle数据, 截取某个范围的rle数据

// define
getRleData(bounds: IRectShape)
// demo (AILabel.Action见下文)
const imageAction = new AILabel.Action.Image(...);
const drawAction = new AILabel.Action.Draw(...);
const clearAction = new AILabel.Action.Clear(...);
gFirstMaskLayer.addAction(imageAction);
gFirstMaskLayer.addAction(drawAction);
gFirstMaskLayer.addAction(clearAction);
const rleData = gFirstMaskLayer.getRleData({x: -250, y: 177, width: 500, height: 354});

params

8. AILabel.Feature

Feature.Point, Feature.Line, Feature.Polyline, Feature.Polygon, Feature.Rect, Feature.Circle等子类的基类

8.1. 实例化

子类复写构造函数

8.2. updateShape

改变矢量要素shape信息

// define
updateShape(shape: IFeatureShape)
// demo
const feature = new AILabel.Feature.Point(...);
feature.updateShape(newPointShape)

params

IFeatureShape枚举

8.3. setStyle

设置feature样式

// define
setStyle(style: IFeatureStyle, option?: IObject)
// demo
const feature = new AILabel.Feature.Point(...);
feature.setStyle({fillStyle: '#FF0000'});

params

8.4. captureWithPoint

判断point是否捕捉到当前feature

// define
captureWithPoint(point: IPoint): boolean
// demo
const feature = new AILabel.Feature.Point(...);
const isCaptured = feature.captureWithPoint{x, y};

params

9. AILabel.Feature.Point

点对象【实心】

9.1. 实例化

// define
constructor(id: string, shape: IPointShape, props: IObject = {}, style: IFeatureStyle = {}, option?: IObject)
// demo
const gFirstFeaturePoint = new AILabel.Feature.Point(
   'first-feature-point', // id
   {x: -100, y: -100, sr: 3}, // shape
   {name: '第一个点'}, // props
   {fillStyle: '#00f'} // style
);
gFirstFeatureLayer.addFeature(gFirstFeaturePoint);

Params

IPointShape

注：r 和 sr 【sr与r只会存在一个，如果同时存在，r优先级高】

9.2. updateShape

见AILabel.Feature

9.3. setStyle

见AILabel.Feature

9.4. captureWithPoint

见AILabel.Feature

10. AILabel.Feature.Line

线段对象

10.1. 实例化

// define
constructor(id: string, shape: ILineShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeatureLine = new AILabel.Feature.Line(
   'first-feature-line', // id
   {start: {x: 10, y: 10}, end: {x: 100, y: -100}, width: 10}, // shape
   {name: '第一个线段'}, // props
   {strokeStyle: '#FF4500', lineCap: 'round'} // style
);
gFirstFeatureLayer.addFeature(gFirstFeatureLine);

Params

ILineShape

10.2. updateShape

见AILabel.Feature

10.3. setStyle

见AILabel.Feature

10.4. captureWithPoint

见AILabel.Feature

11. AILabel.Feature.Polyline

多段线对象

11.1. 实例化

// define
constructor(id: string, shape: IPolylineShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const polylineFeature = new AILabel.Feature.Polyline(
  'first-feature-polyline', // id
  {points: data, width}, // shape
  {name: '第一个矢量图层'}, // props
  drawingStyle // style
);
gFirstFeatureLayer.addFeature(polylineFeature);

Params

IPolylineShape

11.2. updateShape

见AILabel.Feature

11.3. setStyle

见AILabel.Feature

11.4. captureWithPoint

见AILabel.Feature

12. AILabel.Feature.Rect

矩形对象

12.1. 实例化

// define
constructor(id: string, shape: IRectShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeatureRect = new AILabel.Feature.Rect(
   'first-feature-rect', // id
   {x: -50, y: 50, width: 100, height: 100}, // shape
   {name: '第一个矢量图层'}, // props
   {strokeStyle: '#808080', lineWidth: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeatureRect);

Params

IRectShape 见上文

12.2. getPoints

获取矩形四个顶点坐标集合

// define
getPoints(): IPoint[]
// demo
const gFirstFeatureRect = new AILabel.Feature.Rect(...);
const rectPoints = gFirstFeatureRect.getPoints();

12.3. updateShape

见AILabel.Feature

12.4. setStyle

见AILabel.Feature

12.5. captureWithPoint

见AILabel.Feature

13. AILabel.Feature.Polygon

多边形对象

13.1. 实例化

// define
constructor(id: string, shape: IPolygonShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeaturePolygon = new AILabel.Feature.Polygon(
   'first-feature-polygon', // id
   {points: [
       {x: 0, y: 0}, {x: 100, y: 100},
       {x: 100, y: 200}
   ]}, // shape
   {name: '第一个多边形'}, // props
   {strokeStyle: '#FFD500', lineWidth: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeaturePolygon);

Params

IPolygonShape

13.2. updateShape

见AILabel.Feature

13.3. setStyle

见AILabel.Feature

13.4. captureWithPoint

见AILabel.Feature

14. AILabel.Feature.Circle

圆对象

14.1. 实例化

// define
constructor(id: string, shape: ICircleShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstFeatureCircle = new AILabel.Feature.Circle(
   'first-feature-circle', // id
   {cx: 0, cy: 0, r: 100}, // shape
   {name: '第一个矢量图层'}, // props
   {fillStyle: '#F4A460', strokeStyle: '#D2691E', globalAlpha: 1} // style
);
gFirstFeatureLayer.addFeature(gFirstFeatureCircle);

Params

ICircleShape

注：r 和 sr 【sr与r只会存在一个，如果同时存在，r优先级高】

14.2. updateShape

见AILabel.Feature

14.3. setStyle

见AILabel.Feature

14.4. captureWithPoint

见AILabel.Feature

15. AILabel.Action

Action.Draw, Action.Clear, Action.Image等子类的基类

15.1. 实例化

子类复写构造函数

16. AILabel.Action.Draw

涂抹对象【众所周知，涂抹/擦除的动作分为down->move->up，实际上绘制的就是一条具有宽度的具有多个点的多段线】

16.1. 实例化

// define
constructor(id: string, category: string, shape: IDrawActionShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const drawMaskAction = new AILabel.Mask.Draw(
  'first-action-draw', // id
  '铅笔',
  {points: data, width}, // shape
  {name: '港币', price: '1元'}, // props
  {strokeStyle: '#FF0000'} // style
);
gFirstMaskLayer.addAction(drawMaskAction);

Params

IDrawActionShape

16.2. setStyle

设置action样式【除Action.Image】

// define
setStyle(style: IFeatureStyle, option?: IObject)
// demo
const drawAction = new AILabel.Action.Draw(...);
drawAction.setStyle({strokeStyle: '#FF0000'});

params

17. AILabel.Action.Clear

涂抹擦除对象【众所周知，涂抹/擦除的动作分为down->move->up，实际上绘制的就是一条具有宽度的具有多个点的多段线】

17.1. 实例化

// define
constructor(id: string, shape: IDrawActionShape, props: IObject = {}, style: IFeatureStyle = {})
// demo
const clearMaskAction = new AILabel.Mask.Clear(
  'first-action-clear', // id
  {points: data, width} // shape
);
gFirstMaskLayer.addAction(clearMaskAction);

Params

IDrawActionShape

18. AILabel.Action.Image

涂抹数据的回显时，如果返回rle数据，前端需要需要进行像素级处理，此时相当耗性能，此对象的设计就是为了既能满足涂抹数据的回显，又能尽可能最大的优化性能而产生； 注：对后端要求：需要按照把每一个分类涂抹rle数据生成图片指定大小的二值.png图片

18.1. 实例化

// define
constructor(id: string, category: string, image: IImageInfo, props: IObject = {}, style: IFeatureStyle = {})
// demo
const gFirstMaskImageAction = new AILabel.Mask.Image(
   'first-image-action', // id
   '钢笔',
   {
       src: './mask_min.png',
       width: 500,
       height: 354,
       crossOrigin: false,
       position: { // 图片左上角坐标
           x: -250,
           y: 177
       }
   }, // imageInfo
   {}
);
gFirstMaskLayer.addAction(gFirstMaskImageAction);

Params

IImageInfo 见上文

19. AILabel.Marker

注记marker对象

19.1. 实例化

// define
constructor(id: string, marker: IMarkerInfo, props: IObject = {}, option: IObject = {})
// demo
const gFirstMarker = new AILabel.Marker(
   'first-marker', // id
   {
       src: './marker.png',
       position: { // marker坐标位置
           x: 0,
           y: 0
       },
       offset: {
           x: -16,
           y: 32
       }
   }, // markerInfo
   {name: '第一个marker注记'} // props
);
gMap.markerLayer.addMarker(gFirstMarker);

Params

IMarkerInfo

19.2. enableDragging

启用marker可拖拽【默认不可拖拽】

// define
enableDragging(): void
// demo
const gFirstMarker = new AILabel.Marker(...);
gFirstMarker.enableDragging();

19.3. disableDragging

禁用marker可拖拽【默认不可拖拽】

// define
disableDragging(): void
// demo
const gFirstMarker = new AILabel.Marker(...);
gFirstMarker.disableDragging();

19.4. updatePosition

更新marker的位置

// define
updatePosition(position: IPoint)
// demo
const gFirstMarker = new AILabel.Marker(...);
gFirstMarker.updatePosition({x: 0, y: 0});

Params

19.5. events

事件监听

// define
events.on(eventType: EMarkerEventType, callback: Function);
// demo
marker.events.on('click', () => {console.log('marker clicked')});

params

EMarkerEventType

20. AILabel.Text

text文本对象

20.1. 实例化

// define
constructor(id: string, text: ITextInfo, props: IObject = {}, style: ITextStyle = {})
// demo
const gFirstText = new AILabel.Text(
   'first-text', // id
   {text: '中华人民共和国', position: {x: 0, y: 0}, offset: {x: 0, y: 0}}, // shape
   {name: '第一个文本对象'}, // props
   {fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0'} // style
);
gFirstTextLayer.addText(gFirstText);

Params

ITextInfo

ITextStyle、 继承自IFeatureStyle，新增属性字段如下

20.2. updatePosition

更新text的位置

// define
updatePosition(position: IPoint)
// demo
const gFirstText = new AILabel.Text(...);
gFirstText.updatePosition({x: 0, y: 0});

Params

20.3. updateText

更新text的文本

// define
updateText(text: string)
// demo
const gFirstText = new AILabel.Text(...);
gFirstText.updateText('中华人民共和国');

Params

21. AILabel.Util

通用工具方法

21.1. MathUtil.getMiddlePoint

获取两点之间的中心点

getMiddlePoint(start: IPoint, end: IPoint): IPoint

21.2. MathUtil.distance

计算两点之间的距离

distance(start: IPoint, end: IPoint): number

21.3. EventUtil.getButtonIndex

获取鼠标左右键index

getButtonIndex(event: MouseEvent): number

22. 联系作者

22.1. author

• author: 丁扬
• email: dingyang9642@126.com
• wx: dingyang9642
• qq: 378301400

23. 开源协议

23.1. Apache License

请遵循：Apache License 2.0