1
2
3
4
5
6
7
8import { MapView } from "mapgpu";
9import { GraphicsLayer, RasterTileLayer } from "mapgpu/layers";
10import { RenderEngine } from "mapgpu/render";
11import { SimpleRenderer } from "mapgpu/core";
12import { parseCzml } from "mapgpu/adapters";
13
14import type { RunResultObject } from "@/components/examples/ExampleCanvas";
15
16const CZML: unknown[] = [
17 { id: "document", name: "Sample CZML", version: "1.0" },
18 {
19 id: "flight",
20 polyline: {
21 positions: {
22 cartographicDegrees: [
23 28.979, 41.015, 0,
24 30.714, 36.897, 0,
25 27.140, 38.423, 0,
26 32.866, 39.925, 0,
27 ],
28 },
29 },
30 },
31 {
32 id: "stop-ankara",
33 position: { cartographicDegrees: [32.866, 39.925, 0] },
34 point: { color: { rgba: [255, 92, 26, 255] } },
35 },
36];
37
38export async function run(container: HTMLElement): Promise<RunResultObject> {
39 const view = new MapView({
40 container,
41 renderEngine: new RenderEngine(),
42 mode: "2d",
43 center: [30.0, 39.0],
44 zoom: 6,
45 backgroundColor: "transparent",
46 });
47
48 view.map.add(
49 new RasterTileLayer({
50 id: "osm",
51 urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
52 maxZoom: 19,
53 attribution: "© OpenStreetMap contributors",
54 }),
55 );
56
57 const parsed = parseCzml(CZML);
58 const lines = parsed.features.filter((f) => f.geometry.type === "LineString");
59 const points = parsed.features.filter((f) => f.geometry.type === "Point");
60
61 const route = new GraphicsLayer({ id: "czml-routes" });
62 route.renderer = new SimpleRenderer({
63 type: "simple-line",
64 color: [255, 92, 26, 240],
65 width: 3,
66 style: "dash",
67 });
68 route.addMany(lines as never[]);
69 view.map.add(route);
70
71 const stops = new GraphicsLayer({ id: "czml-stops" });
72 stops.renderer = new SimpleRenderer({
73 type: "simple-marker",
74 color: [67, 176, 255, 255],
75 size: 11,
76 outlineColor: [255, 255, 255, 255],
77 outlineWidth: 2,
78 });
79 stops.addMany(points as never[]);
80 view.map.add(stops);
81
82 await view.when();
83
84 return {
85 dispose: () => view.destroy(),
86 controls: [],
87 };
88}