This tutorial demonstrates how to use the L-Shaped Schematics Widget for data visualization. The L-Shaped Schematics Widget is derived from geotoolkit/widgets/AnnotatedWidget and uses geotoolkit/schematics/data/WellBoreData as the data model. Familiarization with SchematicsWidget - Basics tutorial in CarnacJS will be beneficial.
# Widget Initialization
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LShapedSchematicsWidget } from "@int/geotoolkit/schematics/widgets/LShapedSchematicsWidget.ts";
import { ViewMode } from "@int/geotoolkit/schematics/scene/WellBoreNode.ts";
import { SymbolLabelShape } from "@int/geotoolkit/schematics/labeling/SymbolLabelShape.ts";
import { CirclePainter } from "@int/geotoolkit/scene/shapes/painters/CirclePainter.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import data from "/src/assets/data/wellBoreData.json?import";
function createScene(canvas) {
const widget = new LShapedSchematicsWidget({
"data": new WellBoreData(data),
"wellborenode": {
"viewmode": ViewMode.Compressed,
"trackwidth": 200
},
"legend": {
"offset": { "x": -10, "y": 10 },
"width": 250,
"height": 300,
"visible": true
},
"gap": {
"horizontal": {
"left": 10
}
}
});
widget.setProperties({
"labeling": {
"labelshape": new SymbolLabelShape({ "painter": CirclePainter })
}
});
return new Plot({
"canvaselement": canvas,
"root": widget
});
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));