vue如何使用AIlabel标注组件

目录

• 1.下载组件
• 2.下载完成后vue页面标签页面代码
• 3.js 代码
• 4.个人思路进行一些针对性的操作

本人也是第一次使用这个组件，因为项目需要使用标注图片功能，我就在网上看到了这个组件。然后研究了一下希望能给大家提供一些帮助，废话不多说，直接上代码。

1.下载组件

npm i ailabel

2.下载完成后vue页面标签页面代码

这个是需要渲染的盒子

<div id="hello-map" ></div>

需要操作的盒子是 setMode这个是触发方法 RECT这个代表是矩形形状

 <div class="box" @click="setMode('RECT')" >矩形</div>

3.js 代码

 import AILabel from "ailabel";
data() {
    return {
      img:require("../assets/img/homepage/bj.jpg"),
      gMap: null, //AILabel实例
      gFirstFeatureLayer: null, //矢量图层实例(矩形，多边形等矢量)
      //矩形样式
      RectStyle: {
        lineWidth: 1.5, //边框宽度
        strokeStyle: "", //边框颜色
        fill: true, //是否填充背景色
        fillStyle: "rgba(255,255,255,0.1)", //背景颜色
      },
    };
  },
//初始化 标注工具并渲染
  initMap() {
      // npm i ailabel
      let drawingStyle = {}; // 绘制过程中样式
        const gMap = new AILabel.Map('hello-map', {
            center: {x: 350, y: 210}, // 为了让图片居中
            zoom: 705,
            mode: 'PAN', // PAN 可以平移和放大缩小   ban  可以平移
            refreshDelayWhenZooming: true, // 缩放时是否允许刷新延时，性能更优
            zoomWhenDrawing: true,
            panWhenDrawing: false,
            zoomWheelRatio: 5, // 控制滑轮缩放缩率[0, 10), 值越小，则缩放越快，反之越慢
            withHotKeys: true // 关闭快捷键
        });
                // 图片层添加
        const gFirstImageLayer = new AILabel.Layer.Image(
            'layer-image', // id
            {
                src: require('../assets/img/homepage/bj.jpg'),
                width:700,
                height: 500,
                crossOrigin: false, // 如果跨域图片，需要设置为true
                position: { // 左上角相对中心点偏移量
                    x: 0,
                    y: 0
                },
            }, // imageInfo
            {name: '第一个图片图层'}, // props
            {zIndex: 5} // 这里写样式 层级
        );
        // click单击事件 这里可以直接修改单击触发 比如如果没触发可以直接把事件放进来写成单击一个点渲染
        gMap.events.on('click', point => {
            console.log('--click--', point);
        });
        // data 代表r半径shape；data1代表sr半径shape
        gMap.events.on('drawDone', (type, data, data1) => {
            if (type === 'MARKER') {
                const marker = new AILabel.Marker(
                    `${+new Date()}`, // id
                    {
                        src: '',
                        position: data,
                        offset: {
                            x: 0,
                            y:0
                        }
                    }, // markerInfo
                    {name: '第一个marker注记'} // props
                );
                marker.events.on('click', marker => {
                    gMap.markerLayer.removeMarkerById(marker.id);
                });
                gMap.markerLayer.addMarker(marker);
            }
            else if (type === 'POINT') {
              // 创建图层 然后实例在图片上
                const pointFeature = new AILabel.Feature.Point(
                    `${+new Date()}`, // id
                    data, // shape
                    {name: '第一个矢量图层'}, // props
                   {fillStyle: '#00f'} // style
                );
                gFirstFeatureLayer.addFeature(pointFeature);
            }
            // else if (type === 'CIRCLE') {
            //     // data 代表r半径shape；data1代表sr半径shape
            //     const circleFeature = new AILabel.Feature.Circle(
            //         `${+new Date()}`, // id
            //         data, // data1代表屏幕坐标 shape
            //         {name: '第一个矢量图层'}, // props
            //         {fillStyle: '#F4A460', strokeStyle: '#D2691E', lineWidth: 2} // style
            //     );
            //     gFirstFeatureLayer.addFeature(circleFeature);
            // }
            else if (type === 'LINE') {
                const scale = gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const lineFeature = new AILabel.Feature.Line(
                    `${+new Date()}`, // id
                    {...data, width}, // shape
                    {name: '第一个矢量图层'}, // props
                    drawingStyle // style
                );
                gFirstFeatureLayer.addFeature(lineFeature);
            }
            else if (type === 'POLYLINE') {
                const scale = gMap.getScale();
                const width = drawingStyle.lineWidth / scale;
                const polylineFeature = new AILabel.Feature.Polyline(
                    `${+new Date()}`, // id
                    {points: data, width}, // shape
                    {name: '第一个矢量图层'}, // props
                    drawingStyle // style drawingStyle 这里可以改变图形或者线的颜色 动态赋值
                );
                gFirstFeatureLayer.addFeature(polylineFeature);
            }
            else if (type === 'RECT') {
                const rectFeature = new AILabel.Feature.Rect(
                    `${+new Date()}`, // id
                    data, // shape
                    {name: '矢量图形'}, // props
                    {fillStyle: '#F4A460', strokeStyle: '#D2691E', lineWidth: 2} // style
                );
                gFirstFeatureLayer.addFeature(rectFeature);
            }
            else if (type === 'POLYGON') {
                const polygonFeature = new AILabel.Feature.Polygon(
                    `${+new Date()}`, // id
                    {points: data}, // shape
                    {name: '矢量图形'}, // props
                   {strokeStyle: '#00f', fillStyle: '#0f0', globalAlpha: .1, lineWidth: 1, fill: true, } // style fill 图形中阴影 globalAlpha 阴影的显示程度 strokeStyle 线的颜色 fillStyle 阴影的颜色
                );         

		     });
        // 视野范围发生变化
        gMap.events.on('boundsChanged', data => {
            // console.log('--map boundsChanged--');
            return 2222;
        });
        // 在绘制模式下双击feature触发选中
        gMap.events.on('featureSelected', feature => {
            this.getid(feature.id)
            // gMap.setActiveFeature(feature);
        });
        gMap.events.on('featureUnselected', () => {
            // 取消featureSelected
            gMap.setActiveFeature(null);
        });
        gMap.events.on('featureUpdated', (feature, shape) => {
            feature.updateShape(shape);
             const markerId = feature.props.deleteMarkerId;
            const targetMarker = gMap.markerLayer.getMarkerById(markerId);
            targetMarker.updatePosition(feature.getPoints()[1]);
        });
        gMap.events.on('featureDeleted', ({id: featureId}) => {
            gFirstFeatureLayer.removeFeatureById(featureId);
        });     

        // 图片层相关事件监听
        gFirstImageLayer.events.on('loadStart', (a, b) => {
            console.log('--loadStart--', a, b);
        });
        gFirstImageLayer.events.on('loadEnd', (a, b) => {
            console.log('--loadEnd--', a, b);
        });
        gFirstImageLayer.events.on('loadError', (a, b) => {
            console.log('--loadError--', a, b);
        });
        // 添加到gMap对象
        gMap.addLayer(gFirstImageLayer);

        const gFirstFeatureLayer = new AILabel.Layer.Feature(
            'first-layer-feature', // id
            {name: '第一个矢量图层'}, // props
            {zIndex: 10} // style
        );
        gMap.addLayer(gFirstFeatureLayer);
     const gFirstTextLayer = new AILabel.Layer.Text(
            'first-layer-text', // id
            {text:'这是一给文字',position: {x: 300, y: 300}},
            {name: '第一个文本图层'}, // props
            {fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0'} // style
            );
            gMap.addLayer(gFirstTextLayer);

      //自适应
      this.gFirstFeatureLayer = gFirstFeatureLayer;
      this.gMap = gMap;
      window.onresize = function () {
        gMap && gMap.resize();
      };
    },
 // 触发 工具功能 类型会自动触发工具内对应渲染的图形
      setMode(mode) {
            this.gMap.setMode(mode);
            //  动态颜色可以在这里赋值 精确到某一个操作
            var drawingStyle
            // 后续对应模式处理
            switch (mode) {
                case 'PAN': {
                    break;
                }
                case 'MARKER': {
                    // 忽略
                    break;
                }
                case 'POINT': {
                    drawingStyle = {fillStyle: '#9370DB',strokeStyle:'#f00'};
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                // case 'CIRCLE': {
                //     drawingStyle = {fillStyle: '#9370DB', strokeStyle: '#f00', lineWidth: 2};
                //     this.gMap.setDrawingStyle(drawingStyle);
                //     break;
                // }
                case 'LINE': {
                    drawingStyle = {strokeStyle: '#FF0000', lineJoin: 'round', lineCap: 'round', lineWidth: 5, arrow: false};
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'POLYLINE': {
                    drawingStyle = {strokeStyle: '#FF1493', lineJoin: 'round', lineCap: 'round', lineWidth: 1}
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'RECT': {
                    drawingStyle = {strokeStyle: '#f00', lineWidth: 1}
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                case 'POLYGON': {
                    drawingStyle = {strokeStyle: '#00f', fillStyle: '#0f0', globalAlpha: .3, lineWidth: 1, fill: true, stroke: true}
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                // case 'DRAWMASK': {
                //     drawingStyle = {strokeStyle: 'rgba(255, 0, 0, .5)', fillStyle: '#00f', lineWidth: 50}
                //     this.gMap.setDrawingStyle(drawingStyle);
                //     break;
                // }
                // case 'CLEARMASK': {
                //     drawingStyle = {fillStyle: '#00f', lineWidth: 30}
                //     this.gMap.setDrawingStyle(drawingStyle);
                //     break;
                // }
                case 'TEXT': {
                    drawingStyle = {fillStyle: '#00f', lineWidth: 30}
                    this.gMap.setDrawingStyle(drawingStyle);
                    break;
                }
                default:
                    break;
            }
        },

4.个人思路进行一些针对性的操作

大家可以参考一下

     //  全部清空
        del(){
          this.gMap.removeAllLayers();
          this.initMap()
        },
        // 双击删除当前图形 这里是直接一次删一个图形 也可以根据坐标删除上一次操作
        getid(id){
            let index =  this.gFirstFeatureLayer.features.findIndex((ele) => {
                return ele.id == id;
                });
              this.gFirstFeatureLayer.features.splice(index,1)
             this.gMap.resize();
        },
        // 撤回上一步
        dels(){
          this.gFirstFeatureLayer.features.splice(this.gFirstFeatureLayer.features.length-1,1)
          this.gMap.resize();
        }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。