vue怎么使用AIlabel标注组件

这篇“vue怎么使用AIlabel标注组件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么使用AIlabel标注组件”文章吧。

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            {                class="lazy" data-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                    {                        class="lazy" data-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();        }

以上就是关于“vue怎么使用AIlabel标注组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。