§ examples · analysis
Line of Sight

Name: MapGPU
Author: Mustafa Gurbuz
LosTool + BuildingObstacleProvider with elevation profile chart, 2D and 3D modes.
slugline-of-sight
source218 lines
statuslive
tsexamples-src/line-of-sight.ts
1/**
* Line of Sight — `LosTool` placed on the ToolManager and driven by the
* `LOSWidget`. Building obstacles come from a MVT vector tile layer
* (OpenFreeMap buildings), consumed via `BuildingObstacleProvider`.
* The widget handles observer / target placement and height sliders;
* LOS result is rendered as a line shaded visible vs blocked.
*/
8 
9import { MapView } from "mapgpu";
10import { GraphicsLayer, RasterTileLayer, VectorTileLayer } from "mapgpu/layers";
11import { RenderEngine } from "mapgpu/render";
12import { ClassBreaksRenderer } from "mapgpu/core";
13import { BuildingObstacleProvider, LosAnalysis } from "mapgpu/analysis";
14import { LosTool } from "mapgpu/tools";
15import { LOSWidget } from "mapgpu/widgets";
16 
17import type { RunResultObject } from "@/components/examples/ExampleCanvas";
18 
19// Minimal wasm mock: the LOS pipeline normally calls into a wasm module
20// for sampling. The methods below supply the two LOS entry points
21// (`generateLosSegments`, `computeLos`) in plain TS so the example can
22// run without loading the wasm blob.
23const wasm = {
async init() {},
reprojectPoints(c: Float64Array) { return c; },
triangulate(v: Float64Array) {
  return { vertices: v, indices: new Uint32Array(0) };
},
tessellateLines(p: Float64Array) { return p; },
clusterPoints() {
  return {
    centroids: new Float64Array(0),
    counts: new Uint32Array(0),
    assignments: new Int32Array(0),
  };
},
buildSpatialIndex() { return { _handle: 0 }; },
querySpatialIndex() { return { ids: new Uint32Array(0) }; },
parseGeojson() {
  return {
    geometryType: 0,
    positions: new Float64Array(0),
    offsets: new Uint32Array(0),
    featureIds: new Uint32Array(0),
    featureCount: 0,
  };
},
parseMvt() {
  return {
    geometryType: 0,
    positions: new Float64Array(0),
    offsets: new Uint32Array(0),
    featureIds: new Uint32Array(0),
    featureCount: 0,
  };
},
geodeticToEcef(c: Float64Array) { return c; },
encodeEcefDouble() { return new Float32Array(0); },
destroy() {},
generateLosSegments(observer: Float64Array, target: Float64Array, sampleCount: number) {
  const result = new Float64Array(sampleCount * 3);
  for (let i = 0; i < sampleCount; i++) {
    const t = sampleCount > 1 ? i / (sampleCount - 1) : 0;
    result[i * 3] = observer[0]! + t * (target[0]! - observer[0]!);
    result[i * 3 + 1] = observer[1]! + t * (target[1]! - observer[1]!);
    result[i * 3 + 2] = observer[2]! + t * (target[2]! - observer[2]!);
  }
  return result;
},
computeLos(
  segments: Float64Array,
  elevations: Float64Array,
  observerOffset: number,
  targetOffset: number,
) {
  const count = segments.length / 3;
  // Simple visibility check — consider line blocked if any sample's
  // elevation exceeds the straight-line interpolated ray.
  let visible = true;
  let blocker: Float64Array | null = null;
  const obsZ = (segments[2] ?? 0) + observerOffset;
  const tgtZ = (segments[segments.length - 1] ?? 0) + targetOffset;
  const profile = new Float64Array(count * 2);
  for (let i = 0; i < count; i++) {
    const t = count > 1 ? i / (count - 1) : 0;
    const rayZ = obsZ + t * (tgtZ - obsZ);
    const terrainZ = elevations[i] ?? 0;
    profile[i * 2] = t;
    profile[i * 2 + 1] = terrainZ;
    if (terrainZ > rayZ && visible) {
      visible = false;
      blocker = new Float64Array([
        segments[i * 3]!,
        segments[i * 3 + 1]!,
        terrainZ,
      ]);
    }
  }
  return { visible, blockingPoint: blocker, profile };
},
101};
102 
103export async function run(container: HTMLElement): Promise<RunResultObject> {
const view = new MapView({
  container,
  renderEngine: new RenderEngine(),
  mode: "2d",
  center: [28.9784, 41.0082], // Istanbul (dense buildings)
  zoom: 15,
  minZoom: 4,
  maxZoom: 19,
  backgroundColor: "transparent",
});
114 
view.map.add(
  new RasterTileLayer({
    id: "osm",
    urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    maxZoom: 19,
    attribution: "© OpenStreetMap contributors",
  }),
);
123 
// Class breaks so buildings extrude visibly and tint by height.
const HEIGHT_COLORS: Array<[number, number, number]> = [
  [150, 170, 200], [180, 190, 210], [200, 200, 210],
  [220, 200, 200], [230, 180, 170], [230, 140, 120],
  [220, 100, 80],  [190, 60, 60],
];
const HEIGHT_BREAKS = [0, 6, 12, 20, 35, 60, 100, 200];
131 
const buildingRenderer = new ClassBreaksRenderer({
  field: "render_height",
  defaultSymbol: {
    type: "fill-extrusion",
    color: [...HEIGHT_COLORS[2]!, 225] as [number, number, number, number],
    heightField: "render_height",
    minHeightField: "render_min_height",
    ambient: 0.4,
    shininess: 24,
    specularStrength: 0.15,
  },
  breaks: HEIGHT_COLORS.map((c, i) => ({
    min: HEIGHT_BREAKS[i]!,
    max: HEIGHT_BREAKS[i + 1] ?? Infinity,
    symbol: {
      type: "fill-extrusion",
      color: [...c, 225] as [number, number, number, number],
      heightField: "render_height",
      minHeightField: "render_min_height",
      ambient: 0.4,
      shininess: 24,
      specularStrength: 0.15,
    },
  })),
});
157 
const buildings = new VectorTileLayer({
  id: "buildings",
  url: "https://tiles.openfreemap.org/planet/20260311_001001_pt/{z}/{x}/{y}.pbf",
  sourceLayer: "building",
  minZoom: 13,
  maxZoom: 14,
  renderer: buildingRenderer,
});
view.map.add(buildings);
167 
const losAnalysis = new LosAnalysis(wasm as never);
losAnalysis.setElevationProvider(
  new BuildingObstacleProvider({
    getFeatures: () => buildings.getFeatures(),
    heightField: "render_height",
    minHeightField: "render_min_height",
  }),
);
176 
const preview = new GraphicsLayer({ id: "los-preview" });
view.map.add(preview);
view.toolManager.setPreviewLayer(preview);
180 
const losTool = new LosTool({ analysis: losAnalysis, sampleCount: 512 });
view.toolManager.registerTool(losTool);
183 
const widget = new LOSWidget({ id: "los-widget", position: "top-right" });
widget.mount(container);
widget.bind(view);
widget.bindLosTool(losTool, view.toolManager as never);
188 
// The widget's "Pick Points" button fires registered onPick handlers.
// Activating the LosTool here turns the next map clicks into observer
// and target placements (LosTool handles the canvas pointer flow and
// emits `los-update` back to the widget via ToolManager).
widget.onPick(() => {
  view.toolManager.activateTool(losTool.id);
});
196 
widget.onRunLos(async (params) => {
  const result = await losAnalysis.runLos({
    observer: params.observer,
    target: params.target,
    observerOffset: params.observerOffset,
    targetOffset: params.targetOffset,
    sampleCount: 512,
  });
  widget.setResult(result);
});
207 
await view.when();
209 
return {
  dispose: () => {
    widget.destroy();
    view.destroy();
  },
  controls: [],
};
217}