This sample visualizes street markings with real-world line widths. Set worldSized to true on a LineSymbol3D to interpret its LineSymbol3DLayer.size in meters rather than screen points. The markings keep their physical width as you zoom and tilt the scene.
A unique-value renderer assigns widths and template patterns to the different types of street markings. The dashTemplate property defines alternating dash and gap lengths as multiples of the line width.
The following symbol draws a white line that is 0.3 meters wide, with 2-meter dashes and 4-meter gaps:
const markingSize = 0.3;const symbol = { type: "line-3d", worldSized: true, symbolLayers: [ { type: "line", size: markingSize, material: { color: "white" }, pattern: { type: "template", dashTemplate: [2 / markingSize, 4 / markingSize], }, }, ],};
