This tutorial shows how to create and display lithologies within a schematics widget. A Lithology is a shape filled with an image pattern which represents a type of rock.
# Implementation for Lithology using CarnacJS-based Rectangle Shape
SchematicsJS does not implement Lithology. Instead, the CarnacJS-based rectangle shape is used to implement a lithology. See the code below in the createLithology method. The order in which the objects are added to the parent Group is important. Note that for the lithology object not to overlap the well bore, it should be added to the parent group BEFORE the well bore object.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { WellBoreData } from "@int/geotoolkit/schematics/data/WellBoreData.ts";
import { CompositeSchematicsWidget } from "@int/geotoolkit/schematics/widgets/CompositeSchematicsWidget.ts";
import { Transformation } from "@int/geotoolkit/util/Transformation.ts";
import { Point } from "@int/geotoolkit/util/Point.ts";
import { loadResources } from "/src/helpers/resources.ts";
import { PatternFactory } from "@int/geotoolkit/attributes/PatternFactory.ts";
import { FillStyle } from "@int/geotoolkit/attributes/FillStyle.ts";
import { Rectangle } from "@int/geotoolkit/scene/shapes/Rectangle.ts";
import { PieceLinearValueTransformer } from "@int/geotoolkit/axis/PieceLinearValueTransformer.ts";
import { Group } from "@int/geotoolkit/scene/Group.ts";
import data from "/src/assets/data/wellBoreData.json?import";
const lithologiesInfos = [
{ patternName: "lime", backColor: "navajowhite", foreColor: "lightslategray", bottom: 1700 },
{ patternName: "sand", backColor: "lightgoldenrodyellow", foreColor: "darkgray", bottom: 4450 },
{ patternName: "siltstone", backColor: "aliceblue", foreColor: "dimgray", bottom: 6550 },
{ patternName: "basement", backColor: "blanchedalmond", foreColor: "dimgray", bottom: 8700 },
{ patternName: "shale", backColor: "navajowhite", foreColor: "gray", bottom: 10200 },
{ patternName: "dolomite", backColor: "lightsalmon", foreColor: "dimgray", bottom: 13e3 },
{ patternName: "chert", backColor: "lavenderblush", foreColor: "lightslategray", bottom: 145890 }
];
function createLithology(left, top, right, bottom, backColor, foreColor, patternName) {
const imagePattern = PatternFactory.getInstance().getPattern(patternName);
const fillStyle = new FillStyle(backColor, imagePattern, foreColor);
return new Rectangle(left, top, right, bottom).setFillStyle(fillStyle).setLineStyle("black");
}
function createLithologies(widget) {
const wellBoreData = widget.getData();
const rectData = wellBoreData.getGeometryBounds();
const rectWidget = widget.getModel().getModelLimits();
const left = rectWidget.getLeft(), right = rectWidget.getRight();
const tr = Transformation.getRectToRectInstance(rectData, rectWidget);
const modelToBounds = widget.setViewMode(widget.getViewMode());
const depthTransformer = new PieceLinearValueTransformer({
"inputvalues": modelToBounds["boundsdepths"],
"outputvalues": modelToBounds["modellimitsdepths"]
});
const src = new Point(), dst = new Point();
const lithologyGroup = new Group();
let prevBottom = 0;
for (let i = 0; i < lithologiesInfos.length; ++i) {
const info = lithologiesInfos[i];
let from = depthTransformer.transform(prevBottom, true);
let to = depthTransformer.transform(info.bottom, true);
tr.transformPoint(src.setPoint(0, from), dst);
from = dst.getY();
tr.transformPoint(src.setPoint(0, to), dst);
to = dst.getY();
const lithology = createLithology(left, from, right, to, info.backColor, info.foreColor, info.patternName);
lithologyGroup.addChild(lithology);
prevBottom = info.bottom;
}
widget.getModel().insertChild(widget.getModel().getChildrenCount() - 2, lithologyGroup);
}
function createScene(canvas) {
loadResources("patterns");
const wellBoreData = new WellBoreData(data);
const widget = new CompositeSchematicsWidget({
"annotationssizes": { "north": 30 },
"gap": {
"left": { "size": 20 },
"right": { "size": 20 },
"top": { "size": 20 },
"bottom": { "size": 20 }
},
"data": {
"elements": wellBoreData
}
});
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
createLithologies(widget);
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));