vue 使用 AIlabel 标注组件

最新推荐文章于 2024-03-11 16:09:26 发布

VIP文章前端小白~庄

最新推荐文章于 2024-03-11 16:09:26 发布

阅读量5.7k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cncxybuwanl/article/details/121652679

版权

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

1.下载组件 npm i ailabel

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

这个是需要渲染的盒子 <div id="hello-map" ></div>

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

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(