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

前面文章我们已经介绍过AiLabel.js了；

https://blog.csdn.net/u012967771/article/details/113148527

npm下载地址：https://www.npmjs.com/package/ailabel
github地址: https://github.com/dingyang9642/AILabel
api文档(待补充): https://dingyang9642.github.io/AILabel/#/

今天我们就来详细得介绍一下AiLabel的使用；

我们的案例是基于vue开发环境。

数据标注案例：https://zhbnyx.github.io/zhb_vue_cli/dist/index.html#/AiLabel

第一步：导入aiLabel依赖

npm install ailabel

备注：npm下载缓慢的话，可以更换为淘宝镜像

第二步：构建标注页面，不过多叙述，如下图：

图二为标注标签自定义样式；

第三步：容器对象声明

 gMap = new AILabel.Map('map', {zoom: that.width , cx: 0, cy: 0, zoomMax: that.width * 10, zoomMin: that.width / 10, autoPan: false, drawZoom: true});

第四步：图片层实例\添加

let gImageLayer = new AILabel.Layer.Image('img',that.imgUrl, { w: that.width,h: that.height}, {zIndex: 1});
 gMap.addLayer(gImageLayer);

第五步：矢量层实例\添加

gFeatureLayer = new AILabel.Layer.Feature('featureLayer', {zIndex: 2, transparent: false}); 
 gMap.addLayer(gFeatureLayer);

第六步：文本层实例\添加

gTextLayer = new AILabel.Layer.Text("label-id", {zIndex: 2});
 gMap.addLayer(gTextLayer);

第七步：绘制完成，读取坐标信息

gMap.events.on('geometryDrawDone', function (type, points) {
                    if(that.labelInfo.status == 9){
                        that.$message.error('无效图片禁止标注！')
                        gMap.setMode('pan');
                    }else{
                        if(that.checklabelArray.length == 0){
                            that.$message.info('请先勾选右侧标签！')
                        }else{
                            //将获取的坐标x轴平移，y轴翻转；翻转之后的坐标用于存储传后台，不在当前也绘制
                            //回显坐标需处理
                            newPoints = []
                            points.forEach(function (item) {
                                var newObj = {};
                                newObj.x = item.x + that.width/2;
                                newObj.y = Math.abs(item.y - that.height/2);
                                newPoints.push(newObj)
                            })
                            gMappoints = points
                            that.markText()
                        }
                    }

                });

第八步：双击标注框添加删除按钮

gMap.events.on('featureSelected', function (feature) {
                    let cFeature = feature;
                    console.log(cFeature);
                    // 删除按钮添加
                    //const featureBounds = cFeature.getBounds();
                    // const leftTopPoint = featureBounds[1]; // 边界坐上角坐标
                    let deleteMarker = new AILabel.Marker(`marker-${cFeature.id}`,{
                        src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACJklEQVRYR82XsW7UQBCG/3GaxBfqNOdr4A2CQAoKDQo0IMFLBImKi++6SASJLuccFRJ5CZCggYgGRCQQ9wahOV+TmpwvTXaivZzB3ux61ziSz+3Mznwzuzv7m1DzRzXnRymAoDtZ5zNxD0QbBKwAtHJRAB8zcAzmA1rwvsS7S99cC3MCaIXjTQZtAlh1DDwg8P4wauzb/AsBgnD8GKDtEonVfAOAX8VR470JxAjQ6pw+ZxZ9WwUudiKvPewtvtb5agFaW6cPmcQHl+CuPsTeo+He4kfV/xJAs53cIg8/XAOX8WOB26O+/zO75hJAECa/Kuy5jWcQR/5NI8DstL+1RaliJ/DT7O3IdcBWPTO/lMmJ6IUOwmafrcl14S9A0D65D8/7ZKpOBh/tNXakvbk13lEhbPZcXCEexP3lz9NiUkPQSXbB6LgAqBDZ5CbAXFxCL+753RxAM0y+E7BWtL+6RNI/7YxTcjm4gcNR5N/JdyBMjgBctx0wFSLrr9saQ7zfceTfUAAmfwBetgFIuw6iRHK58ydxtHRt3gBq3oLaD6FtD4uuWtlrmPX/Nwe6k3UI/uoyByoPIo/upqppfkaxrLz2x0hC2B4klzlR4FP8HF8ATHXgu4qJDMv5iaoP9ZLsCvVgSmLShWZReoW60KQHc6NY17OZPnxTQaINWOCZqgOzueb7x0TtylQ1LXgbzFjT/ZoR4RBn4iBVOy4H2akDLoH+16d2gHNaQVEwZljaWQAAAABJRU5ErkJggg==',
                        x: cFeature.points[1].x,
                        y: cFeature.points[1].y,
                        offset: {
                            x:-30,
                            y: -5
                        },
                        featureId: cFeature.id
                    });
                    gMap.mLayer.addMarker(deleteMarker);

                    //删除
                    deleteMarker.regEvent('click', function () {
                        let that = this
                        // 执行选中元素删除
                        gFeatureLayer.removeFeatureById(that.info.featureId);
                        // 对应删除标注层中删除（x）icon
                        gMap.mLayer.removeAllMarkers(that);
                        //截取featureId
                        var featureId = that.info.featureId.split("-")[0];
                        //截取回显数据为第几条
                        var positionindex = that.info.featureId.split("-")[2];
                        if(featureId == "draw"){//回显
                            _this.labelInfo.positionsLabels[positionindex].labels.forEach((item,index)=>{
                                var textid = "text-"+that.info.featureId+index
                                gTextLayer.removeTextById(textid);
                            })
                        }else{
                            var textid = "text-"+that.info.featureId
                            gTextLayer.removeTextById(textid);
                        }
                        //删除对应的标注存储数据
                        _this.labelInfo.positionsLabels.splice(positionindex,1)
                    });

                });

第九步：编辑修改标注框

gMap.events.on('geometryEditDone', (type, activeFeature, points) => {
                    var editPoints = []
                    points.forEach(function (item) {
                        var newObj = {};
                        newObj.x = item.x + that.width/2;
                        newObj.y = Math.abs(item.y - that.height/2);
                        editPoints.push(newObj)
                    })
                    gMappoints = points
                    that.editText(activeFeature.id,editPoints)
                    gMap.mLayer.removeAllMarkers();
                });

以上为aiLabel标注构建的大体流程，关于案例详细的代码可由下方链接下载学习参考！！！

https://download.csdn.net/download/u012967771/19953265

感谢阅读，喜欢的一键三连哦！！