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
{
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();
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。