This is the first time I have used this component. Because the project needs to use the picture labeling function, I saw this component online. Then I studied it and hoped to provide some help to everyone. Without further ado, I just upload the code.
1. Download the component
npm i ailabel
2. After downloading, vue page tag page code
This is the box that needs to be rendered
<div ></div>
The box that needs to be operated is setMode, which is the trigger method. RECT represents a rectangular shape
<div class="box" @click="setMode('RECT')" >rectangle</div>Code
import AILabel from "ailabel";
data() {
return {
img:require("../assets/img/homepage/"),
gMap: null, //AILabel instance gFirstFeatureLayer: null, //Vector layer examples (rectangles, polygons, etc. vectors) //Rectangular style RectStyle: {
lineWidth: 1.5, //Border width strokeStyle: "", //Border color fill: true, //Whether to fill the background color fillStyle: "rgba(255,255,255,0.1)", //Background color },
};
},
//Initialize the labeling tool and render initMap() {
// npm i ailabel
let drawingStyle = {}; // Styles during drawing const gMap = new ('hello-map', {
center: {x: 350, y: 210}, // To center the picture zoom: 705,
mode: 'PAN', // PAN can pan and zoom in and out ban can pan refreshDelayWhenZooming: true, // Whether refresh delay is allowed during zooming, better performance zoomWhenDrawing: true,
panWhenDrawing: false,
zoomWheelRatio: 5, // Control pulley scaling rate [0, 10). The smaller the value, the faster the scaling, and vice versa withHotKeys: true // Close shortcut key });
// Add image layer const gFirstImageLayer = new (
'layer-image', // id
{
src: require('../assets/img/homepage/'),
width:700,
height: 500,
crossOrigin: false, // If cross-domain picture, it needs to be set to true position: { // The upper left corner is offset relative to the center point x: 0,
y: 0
},
}, // imageInfo
{name: 'First picture layer'}, // props
{zIndex: 5} // Write style here hierarchy );
// click click event. You can directly modify the click trigger here. For example, if there is no trigger, you can directly put the event in and write it as clicking a point to render. ('click', point => {
('--click--', point);
});
// data represents r radius shape; data1 represents sr radius shape ('drawDone', (type, data, data1) => {
if (type === 'MARKER') {
const marker = new (
`${+new Date()}`, // id
{
src: '',
position: data,
offset: {
x: 0,
y:0
}
}, // markerInfo
{name: 'The first marker notation'} // props
);
('click', marker => {
();
});
(marker);
}
else if (type === 'POINT') {
// Create a layer and then the instance is on the picture const pointFeature = new (
`${+new Date()}`, // id
data, // shape
{name: 'First Vector Layer'}, // props
{fillStyle: '#00f'} // style
);
(pointFeature);
}
// else if (type === 'CIRCLE') {
// // data represents r radius shape; data1 represents sr radius shape // const circleFeature = new (
// `${+new Date()}`, // id
// data, // data1 represents screen coordinate shape // {name: 'first vector layer'}, // props // {fillStyle: '#F4A460', strokeStyle: '#D2691E', lineWidth: 2} // style
// );
// (circleFeature);
// }
else if (type === 'LINE') {
const scale = ();
const width = / scale;
const lineFeature = new (
`${+new Date()}`, // id
{...data, width}, // shape
{name: 'First Vector Layer'}, // props
drawingStyle // style
);
(lineFeature);
}
else if (type === 'POLYLINE') {
const scale = ();
const width = / scale;
const polylineFeature = new (
`${+new Date()}`, // id
{points: data, width}, // shape
{name: 'First Vector Layer'}, // props
drawingStyle // style drawingStyle Here you can change the color of the graphics or line dynamic assignment );
(polylineFeature);
}
else if (type === 'RECT') {
const rectFeature = new (
`${+new Date()}`, // id
data, // shape
{name: 'Vector Graphics'}, // props
{fillStyle: '#F4A460', strokeStyle: '#D2691E', lineWidth: 2} // style
);
(rectFeature);
}
else if (type === 'POLYGON') {
const polygonFeature = new (
`${+new Date()}`, // id
{points: data}, // shape
{name: 'Vector Graphics'}, // props
{strokeStyle: '#00f', fillStyle: '#0f0', globalAlpha: .1, lineWidth: 1, fill: true, } // style fill Shadow in the graphics The display degree of globalAlpha shadow strokeStyle Line color fillStyle Shadow color );
});
// The field of view changes ('boundsChanged', data => {
// ('--map boundsChanged--');
return 2222;
});
// Double-click feature in drawing mode to trigger selection ('featureSelected', feature => {
()
// (feature);
});
('featureUnselected', () => {
// Cancel featureSelected (null);
});
('featureUpdated', (feature, shape) => {
(shape);
const markerId = ;
const targetMarker = (markerId);
(()[1]);
});
('featureDeleted', ({id: featureId}) => {
(featureId);
});
// Monitoring of related events in the picture layer ('loadStart', (a, b) => {
('--loadStart--', a, b);
});
('loadEnd', (a, b) => {
('--loadEnd--', a, b);
});
('loadError', (a, b) => {
('--loadError--', a, b);
});
// Add to gMap object (gFirstImageLayer);
const gFirstFeatureLayer = new (
'first-layer-feature', // id
{name: 'First Vector Layer'}, // props
{zIndex: 10} // style
);
(gFirstFeatureLayer);
const gFirstTextLayer = new (
'first-layer-text', // id
{text:'This is a text',position: {x: 300, y: 300}},
{name: 'First Text Layer'}, // props
{fillStyle: '#F4A460', strokeStyle: '#D2691E', background: true, globalAlpha: 1, fontColor: '#0f0'} // style
);
(gFirstTextLayer);
//Adaptive = gFirstFeatureLayer;
= gMap;
= function () {
gMap && ();
};
},
// Trigger Tool function Type will automatically trigger the corresponding rendered graphics in the tool setMode(mode) {
(mode);
// Dynamic colors can be assigned here and accurately to a certain operation var drawingStyle
// Subsequent corresponding mode processing switch (mode) {
case 'PAN': {
break;
}
case 'MARKER': {
// neglect break;
}
case 'POINT': {
drawingStyle = {fillStyle: '#9370DB',strokeStyle:'#f00'};
(drawingStyle);
break;
}
// case 'CIRCLE': {
// drawingStyle = {fillStyle: '#9370DB', strokeStyle: '#f00', lineWidth: 2};
// (drawingStyle);
// break;
// }
case 'LINE': {
drawingStyle = {strokeStyle: '#FF0000', lineJoin: 'round', lineCap: 'round', lineWidth: 5, arrow: false};
(drawingStyle);
break;
}
case 'POLYLINE': {
drawingStyle = {strokeStyle: '#FF1493', lineJoin: 'round', lineCap: 'round', lineWidth: 1}
(drawingStyle);
break;
}
case 'RECT': {
drawingStyle = {strokeStyle: '#f00', lineWidth: 1}
(drawingStyle);
break;
}
case 'POLYGON': {
drawingStyle = {strokeStyle: '#00f', fillStyle: '#0f0', globalAlpha: .3, lineWidth: 1, fill: true, stroke: true}
(drawingStyle);
break;
}
// case 'DRAWMASK': {
// drawingStyle = {strokeStyle: 'rgba(255, 0, 0, .5)', fillStyle: '#00f', lineWidth: 50}
// (drawingStyle);
// break;
// }
// case 'CLEARMASK': {
// drawingStyle = {fillStyle: '#00f', lineWidth: 30}
// (drawingStyle);
// break;
// }
case 'TEXT': {
drawingStyle = {fillStyle: '#00f', lineWidth: 30}
(drawingStyle);
break;
}
default:
break;
}
},4. Carry out some targeted operations in personal ideas
You can refer to it
// Clear all del(){
();
()
},
// Double-click to delete the current graphic. Here you can delete one graphic at a time. You can also delete the previous operation based on the coordinates. getid(id){
let index = ((ele) => {
return == id;
});
(index,1)
();
},
// Retrieve the previous step dels(){
(-1,1)
();
}The above is personal experience. I hope you can give you a reference and I hope you can support me more.