vue如何使用AIlabel標(biāo)注組件

更新時(shí)間：2022年04月13日 09:31:36 作者：前端小白~莊

這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1.下載組件

npm i ailabel

2.下載完成后vue頁面標(biāo)簽頁面代碼

這個(gè)是需要渲染的盒子

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

需要操作的盒子是 setMode這個(gè)是觸發(fā)方法 RECT這個(gè)代表是矩形形狀

?<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實(shí)例
      gFirstFeatureLayer: null, //矢量圖層實(shí)例(矩形，多邊形等矢量)
      //矩形樣式
      RectStyle: {
        lineWidth: 1.5, //邊框?qū)挾?
        strokeStyle: "", //邊框顏色
        fill: true, //是否填充背景色
        fillStyle: "rgba(255,255,255,0.1)", //背景顏色
      },
    };
  },
//初始化 標(biāo)注工具并渲染
  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, // 縮放時(shí)是否允許刷新延時(shí)，性能更優(yōu)
            zoomWhenDrawing: true,
            panWhenDrawing: false,
            zoomWheelRatio: 5, // 控制滑輪縮放縮率[0, 10), 值越小，則縮放越快，反之越慢
            withHotKeys: true // 關(guān)閉快捷鍵
        });
                // 圖片層添加
        const gFirstImageLayer = new AILabel.Layer.Image(
            'layer-image', // id
            {
                src: require('../assets/img/homepage/bj.jpg'),
                width:700,
                height: 500,
                crossOrigin: false, // 如果跨域圖片，需要設(shè)置為true
                position: { // 左上角相對中心點(diǎn)偏移量
                    x: 0,
                    y: 0
                },
            }, // imageInfo
            {name: '第一個(gè)圖片圖層'}, // props
            {zIndex: 5} // 這里寫樣式 層級
        );
        // click單擊事件 這里可以直接修改單擊觸發(fā) 比如如果沒觸發(fā)可以直接把事件放進(jìn)來寫成單擊一個(gè)點(diǎn)渲染
        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: '第一個(gè)marker注記'} // props
                );
                marker.events.on('click', marker => {
                    gMap.markerLayer.removeMarkerById(marker.id);
                });
                gMap.markerLayer.addMarker(marker);
            }
            else if (type === 'POINT') {
              // 創(chuàng)建圖層 然后實(shí)例在圖片上
                const pointFeature = new AILabel.Feature.Point(
                    `${+new Date()}`, // id
                    data, // shape
                    {name: '第一個(gè)矢量圖層'}, // 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代表屏幕坐標(biāo) shape
            //         {name: '第一個(gè)矢量圖層'}, // 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: '第一個(gè)矢量圖層'}, // 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: '第一個(gè)矢量圖層'}, // props
                    drawingStyle // style drawingStyle 這里可以改變圖形或者線的顏色 動(dòng)態(tài)賦值
                );
                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 陰影的顏色 
                );         
             
		     });
        // 視野范圍發(fā)生變化
        gMap.events.on('boundsChanged', data => {
            // console.log('--map boundsChanged--');
            return 2222;
        });
        // 在繪制模式下雙擊feature觸發(fā)選中
        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);
        });     
      
        // 圖片層相關(guān)事件監(jiān)聽
        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: '第一個(gè)矢量圖層'}, // props
            {zIndex: 10} // style
        );
        gMap.addLayer(gFirstFeatureLayer);
     const gFirstTextLayer = new AILabel.Layer.Text(
            'first-layer-text', // id
            {text:'這是一給文字',position: {x: 300, y: 300}},
            {name: '第一個(gè)文本圖層'}, // props
            {fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0'} // style
            );
            gMap.addLayer(gFirstTextLayer);
       
      //自適應(yīng)
      this.gFirstFeatureLayer = gFirstFeatureLayer;
      this.gMap = gMap;
      window.onresize = function () {
        gMap && gMap.resize();
      };
    },
 // 觸發(fā) 工具功能 類型會(huì)自動(dòng)觸發(fā)工具內(nèi)對應(yīng)渲染的圖形
      setMode(mode) {
            this.gMap.setMode(mode);
            //  動(dòng)態(tài)顏色可以在這里賦值 精確到某一個(gè)操作
            var drawingStyle
            // 后續(xù)對應(yīng)模式處理
            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.個(gè)人思路進(jìn)行一些針對性的操作

大家可以參考一下

     //  全部清空
        del(){
          this.gMap.removeAllLayers();
          this.initMap()
        },
        // 雙擊刪除當(dāng)前圖形 這里是直接一次刪一個(gè)圖形 也可以根據(jù)坐標(biāo)刪除上一次操作
        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();
        }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: