Multiple markers in similar depth ranges often overlap and will become difficult to read. The WellLog widget allows creation of custom well log visuals with CompositeLogMarker which improves the display of adjacent and overlapping markers. CompositeLogMarker is inherited from CompositeNode.
In the canvas and example source code below, CompositeLogMarker creates different marker groups based on relative depths ranges. The total number of markers in a group is displayed next to the label. To view all marker names and their depths in a group, click and hold the group's label number.
# Example Log Bar Visuals
Create the WellLog widget, insert the widget in the plot and then add a composite marker to the track.
import { Plot } from "@int/geotoolkit/plot/Plot.ts";
import { LogMarker } from "@int/geotoolkit/welllog/LogMarker.ts";
import { TrackType } from "@int/geotoolkit/welllog/TrackType.ts";
import { HeaderType } from "@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts";
import { MathUtil } from "@int/geotoolkit/util/MathUtil.ts";
import { CompositeLogMarker } from "/src/code/WellLog/Visuals/CompositeMarkers/ts/compositeLogMarker.ts";
import { CompositeLogMarkerTool } from "/src/code/WellLog/Visuals/CompositeMarkers/ts/compositeLogMarkerTool.ts";
import { createCurve } from "/src/code/WellLog/utils/curveData.ts";
import { createWellLogWidget } from "/src/code/WellLog/utils/common.ts";
function createCompositeMarkers(depths) {
const compositeMarkers = new CompositeLogMarker();
depths.forEach((depth, i) => {
const r = MathUtil.getSeededRandom(0, 1, 17) * 255 >> 0, g = MathUtil.getSeededRandom(0, 1, 17) * 255 >> 0, b = MathUtil.getSeededRandom(0, 1, 17) * 255 >> 0, color = "rgb(" + r + "," + g + "," + b + ")";
compositeMarkers.addChild(
new LogMarker().setVisibleDepthLabel(false).setLineStyle({ "color": color, "width": 2 }).setTextStyle({ "color": color, "font": "bold 15px Arial" }).setDepthValue(depth, "Marker # " + i)
);
});
return compositeMarkers;
}
function createScene(canvas) {
const widget = createWellLogWidget().setAxisHeaderType(HeaderType.Simple);
widget.addTrack(TrackType.IndexTrack);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(4500, 10, "GR", "#7cb342"),
createCompositeMarkers([4900, 5e3, 5050, 5200, 5210])
]);
widget.addTrack(TrackType.LinearTrack).addChild([
createCurve(4500, 10, "CALI", "#ef6c00"),
createCompositeMarkers([4750, 4760, 4800, 4900, 5e3, 5010])
]);
const manipulatorLayer = widget.getToolByName("cross-hair").getManipulatorLayer();
widget.getTool().insert(0, new CompositeLogMarkerTool(manipulatorLayer, "markers-tooltip"));
const plot = new Plot({
"canvaselement": canvas,
"root": widget
});
widget.setVisibleDepthLimits(4700, 5300);
return plot;
}
export { createScene };
createScene(document.querySelector('[ref="plot"]'));