AILabel实现图片标注功能，包括图片缩放、平移，文字，矩形、圆形，多边形等标注（Vue项目使用步骤）

具体的方法使用说明见文档：

http://ailabel.com.cn/public/ailabel/api/index.html

vue项目使用步骤

1.安装ailbel

  npm install ailabel

2.在需要使用的vue文件中引入

import AILabel from "ailabel";

3.自定义方法initMap,并且在mounted中执行initMap()

data(){
    return {
       gMap:null,                     //AILabel实例
       gFirstFeatureLayer:null,   //矢量图层实例(矩形，多边形等矢量)
       //矩形样式
　　　　RectStyle: {

        　　lineWidth: 1.5, //边框宽度

        　　strokeStyle: "pink", //边框颜色

        　　fill: true, //是否填充背景色

        　　fillStyle: "rgba(255,255,255,0.1)", //背景颜色

      　 },

    }
},
metheds:{
    initMap(){
      //实例化
      const gMap = new AILabel.Map("map", {
        center: { x: 250, y: 148 }, //让图片居中
        zoom: 800,
        mode: "PAN",
        refreshDelayWhenZooming: true,
        zoomWhenDrawing: true,
        panWhenDrawing: true,
      });
      //定义矢量图层实例
      const gFirstFeatureLayer = new AILabel.Layer.Feature(
        "layer-feature",
        { name: "第一个矢量图层" },
        { zIndex: 10 }
      );
      //添加事件
      //1.绘制完成时执行
      gMap.events.on("drawDone", (type, shape) => {
        if (type === "RECT") {
          const rectFeature = new AILabel.Feature.Rect(
            `${+new Date()}`, // 唯一标识
            shape,
            { name: "第一个矩形", deleteMarkerId: `delmarker-${+new Date()}` },
            this.RectStyle
          );
          gFirstFeatureLayer.addFeature(rectFeature);
          //新增，触发父组件一系列操作
          this.$emit("drawDone", rectFeature);
        }
        
      });
      //2.双击选中（可编辑，可删除）
      gMap.events.on("featureSelected", (feature) => {
        gMap.setActiveFeature(feature);
        //添加删除标注
        const markerId = feature.props.deleteMarkerId;
        const deletMarker = new AILabel.Marker(
          markerId,
          {
            src: require("@/assets/img/icon-del.png"),
            position: feature.getPoints()[1], //矩形右上角
            offset: {
              x: -20,
              y: -4,
            },
          },
          { name: "删除标注" }
        );
        deletMarker.events.on("click", (marker) => {
          gMap.markerLayer.removeMarkerById(marker.id); //删除当前marker
          gFirstFeatureLayer.removeFeatureById(feature.id); //删除当前feature
          //删除
          this.$emit("delete", feature);
        });
        //添加之前先将上一次添加的删除
        gMap.markerLayer.removeMarkerById(markerId);
        gMap.markerLayer.addMarker(deletMarker);
      });
      //取消选中
      gMap.events.on("featureUnselected", (feature) => {
        const markerId = feature.props.deleteMarkerId;
        gMap.setActiveFeature(null);
        gMap.markerLayer.removeMarkerById(markerId);
      });
      //3.feature编辑完成时触发
      gMap.events.on("featureUpdated", (feature, shape) => {
        feature.updateShape(shape);
        //更新deleteMarker位置：当矩形位置或大小在变化时，删除按钮始终保持在矩形框的右上角
        const markerId = feature.props.deleteMarkerId;
        const targetMarker = gMap.markerLayer.getMarkerById(markerId);
        targetMarker.updatePosition(feature.getPoints()[1]);
        //更新
        context.emit("updated", feature);
      });
      this.gMap = gMap;
      this.gFirstFeatureLayer = gFirstFeatureLayer;
      //自适应
      window.onresize = function() {
        gMap && gMap.resize();
      };
   } 
},
mounted(){
    this.initMap()
}

 4.添加图片图层

addImgLayer(src){
      const gFirstImageLayer = new AILabel.Layer.Image(
        "layer-image",
        {
          src: src,
          width: 500,
          height: 300,
          position: {
            // 图片左上角坐标
            x: 0,
            y: 0,
          },    
        },
        { name: "第一个图片图层" },
        { zIndex: 5 }
      );
      _data.gMap.addLayer(gFirstImageLayer);
    };

5.画矩形操作

//点击'画矩形'按钮触发一下方法
setMode (mode, color) {
      this.gMap.setMode(mode);
      switch (mode) {
        //平移
        case "PAN": {
          break;
        }
        //平移矩形
        case "RECT": {
          _data.RectStyle.strokeStyle = color; //改变矩形的边框颜色
          _data.gMap.setDrawingStyle(_data.RectStyle); //设置矩形样式
          break;
        }
       //多边形
       .... 
 }    

 6.缩放等操作

//放大
zoomIn（） {
   this.gMap.zoomIn();
},
//缩小
zoomOut（） {
   this.gMap.zoomOut();
},