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();
},