溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“vue怎么使用AIlabel標注組件”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么使用AIlabel標注組件”文章吧。
npm i ailabel
這個是需要渲染的盒子
<div id="hello-map" ></div>
需要操作的盒子是 setMode這個是觸發方法 RECT這個代表是矩形形狀
<div class="box" @click="setMode('RECT')" >矩形</div> 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;
}
}, // 全部清空
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標注組件”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
