3D graphics drawing layer (sketchLayer)

method

clear

Clear all drawn graphics.

Parameters

none

Case

sketchLayer.clear() // Clear all drawn graphics

editShapeById

Edit graphics based on the graphics id, which is the id attribute value in the graphics data.

Parameters

Name	Type	Description
id	String	RequiredGraphic id, used to uniquely identify a graph.

Case

sketchLayer.editShapeById(id) 

exportData

Export plotted graphics data.

Parameters

none

Case

let data = sketchLayer.exportData() // Export the drawn graphics data
console.log(data) // Output the exported graphic data

importData

Import graphics data and display graphics in the scene.

Parameters

none

Case

let data = sketchLayer.exportData() 
sketchLayer.importData(data) //Import the drawn graphics data

getShapeById

Obtain graphic data based on the graphic id, where id is the id attribute value in the graphic data.

Parameters

Name	Type	Description
id	String	RequiredGraphic id, used to uniquely identify a graph.

Case

let shapeData = sketchLayer.getShapeById(id) // Get graphic data
console.log('Graphic data:',shapeData) // Output graphic data

getSelectedShape

Get the graphic currently selected by the mouse.

Parameters

none

Case

const shape = sketchLayer.getSelectedShape(); // Get the currently selected graphic data
if (shape) {
    console.log('Selected shape:',shape) // Output the selected graphic data
}

removeSelected

Remove the graphic currently selected by the mouse.

Parameters

none

Case

const shape = sketchLayer.getSelectedShape(); // Get the currently selected graphic data
if (shape) {
    sketchLayer.removeSelected() // Remove the selected graphics
}

setEditable

Set editing status.

Parameters

Name	Type	Description
editable	Boolean	RequiredSet whether it is editable.

Case

sketchLayer.setEditable(true) // Set editable
sketchLayer.setEditable(false) //Set not editable

setMode

Set the graphics drawing mode.

Parameters

Name	Type	Description
mode	Enum	RequiredSet the graphics drawing mode. The optional values ​​are "none", "polygon", "rectangle", and "circle", which respectively mean cancel drawing, draw polygon, draw rectangle, and draw circle.

Case

sketchLayer.setMode('polygon') //Set the polygon drawing mode
sketchLayer.setMode('rectangle') //Set the rectangle drawing mode
sketchLayer.setMode('circle') //Set the circle drawing mode
sketchLayer.setMode('none') // Set cancel drawing mode

updateShapeById

Update the graphic data according to the graphic id, which is the id attribute value in the graphic data.

Parameters

Name	Type	Description
id	String	RequiredGraphic id, used to uniquely identify a graph.
data	Object	optionalSet the attributes that need to be updated name type description fillColor String optionalThe color of the graphic fill surface, which defaults to the value of the current fill surface color of the graphic. fillOpacity Number optionalThe opacity of the graphic fill surface, the value range is 0.0~1.0, and the default is the opacity value of the current filled surface of the graphic. strokeColor String optionalGraphic border line color, the default is the value of the current border line color of the graph. strokeWidth Number optionalGraphic border line width, unit is pixel, default is the value of the current border line width of the graph. strokeOpacity Number optionalGraphic border line opacity, the value range is 0.0~1.0, the default is the current border line opacity value of the graph.

Case

let data = {
    fillColor: '#000000',
    fillOpacity: 0.5,
    strokeColor: '#ffffff',
    strokeWidth: 2,
    strokeOpacity: 0.5,
}
sketchLayer.updateShapeById(id, data) 

updateShapeFillColor

Update the fill surface color of the graphic currently selected by the mouse.

Parameters

Name	Type	Description
shape	Object	RequiredSelected graphic data.
fillColor	String	RequiredGraphic fill surface color.

Case

const shape = sketchLayer.getSelectedShape(); // Get the currently selected graphic data
sketchLayer.updateShapeFillColor(shape, '#000000') //Update the color of the selected graphic fill surface to black

updateShapeStrokeColor

Update the border color of the graphic currently selected by the mouse.

Parameters

Name	Type	Description
shape	Object	RequiredSelected graphic data.
strokeColor	String	RequiredGraphic border line color.

Case

const shape = sketchLayer.getSelectedShape(); // Get the currently selected graphic data
sketchLayer.updateShapeStrokeColor(shape, '#ffffff') //Update the border color of the selected graphic to white

undo

Undo the shape drawn in the previous step.

Parameters

none

Case

sketchLayer.undo() // Undo the graphics drawn in the previous step