vue如何使用AIlabel標注組件
更新時間：2022年04月13日 09:31:36 作者：前端小白~莊
這篇文章主要介紹了vue如何使用AIlabel標注組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
本人也是第一次使用這個組件，因為項目需要使用標注圖片功能，我就在網(wǎng)上看到了這個組件。然后研究了一下希望能給大家提供一些幫助，廢話不多說，直接上代碼。
1.下載組件
npm i ailabel
2.下載完成后vue頁面標簽頁面代碼
這個是需要渲染的盒子
<div id="hello-map" ></div>
需要操作的盒子是 setMode這個是觸發(fā)方法 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, //邊框?qū)挾?
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, // 縮放時是否允許刷新延時，性能更優(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, // 如果跨域圖片，需要設置為true
position: { // 左上角相對中心點偏移量
x: 0,
y: 0
},
}, // imageInfo
{name: '第一個圖片圖層'}, // props
{zIndex: 5} // 這里寫樣式 層級
);
// click單擊事件 這里可以直接修改單擊觸發(fā) 比如如果沒觸發(fā)可以直接把事件放進來寫成單擊一個點渲染
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') {
// 創(chuàng)建圖層 然后實例在圖片上
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 這里可以改變圖形或者線的顏色 動態(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: '第一個矢量圖層'}, // 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();
};
},
// 觸發(fā) 工具功能 類型會自動觸發(fā)工具內(nèi)對應渲染的圖形
setMode(mode) {
this.gMap.setMode(mode);
// 動態(tài)顏色可以在這里賦值 精確到某一個操作
var drawingStyle
// 后續(xù)對應模式處理
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()
},
// 雙擊刪除當前圖形 這里是直接一次刪一個圖形 也可以根據(jù)坐標刪除上一次操作
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();
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
我們在使用element-ui的時候經(jīng)常會遇到需要修改組件默認樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Vue之Axios異步通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
在vue2中 使用的?this.$route?和?this.$router?this.$store的使用在vue3中完全適用，這篇文章主要介紹了Vue3 使用Vuex和router的注意事項及操作方法,需要的朋友可以參考下2022-12-12
使用Webpack提升Vue.js應用程序的4種方法（翻譯）
這篇文章主要介紹了使用Webpack提升Vue.js應用程序的4種方法（翻譯），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了VUE中如何實現(xiàn)阻止事件冒泡，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項目實現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項目實現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
axios中post請求json和application/x-www-form-urlencoded詳解
Axios是專注于網(wǎng)絡數(shù)據(jù)請求的庫,相比于原生的XMLHttpRequest對象,axios簡單易用,下面這篇文章主要給大家介紹了關(guān)于axios中post請求json和application/x-www-form-urlencoded的相關(guān)資料,需要的朋友可以參考下2022-10-10
使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關(guān)閉時會話結(jié)束，有時間期限，具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下2018-04-04
這篇文章主要為大家介紹了c++游戲教程使用easyx實現(xiàn)大飛機示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue實現(xiàn)父子組件傳值其實不難問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03