Add animated orienteering course overlays and labels

miniprogram/engine/renderer/webglMapRenderer.ts

@@ -1,3 +1,4 @@
+import { CourseLayer } from '../layer/courseLayer'
 import { TrackLayer } from '../layer/trackLayer'
 import { GpsLayer } from '../layer/gpsLayer'
 import { TileLayer } from '../layer/tileLayer'
@@ -5,6 +6,7 @@ import { TileStore, type TileStoreCallbacks } from '../tile/tileStore'
 import { type MapRenderer, type MapRendererStats, type MapScene } from './mapRenderer'
 import { WebGLTileRenderer } from './webglTileRenderer'
 import { WebGLVectorRenderer } from './webglVectorRenderer'
+import { CourseLabelRenderer } from './courseLabelRenderer'
 
 const RENDER_FRAME_MS = 16
 const ANIMATION_FRAME_MS = 33
@@ -14,10 +16,12 @@ export class WebGLMapRenderer implements MapRenderer {
   osmTileStore: TileStore
   tileLayer: TileLayer
   osmTileLayer: TileLayer
+  courseLayer: CourseLayer
   trackLayer: TrackLayer
   gpsLayer: GpsLayer
   tileRenderer: WebGLTileRenderer
   vectorRenderer: WebGLVectorRenderer
+  labelRenderer: CourseLabelRenderer
   scene: MapScene | null
   renderTimer: number
   animationTimer: number
@@ -52,10 +56,12 @@ export class WebGLMapRenderer implements MapRenderer {
     } satisfies TileStoreCallbacks)
     this.tileLayer = new TileLayer()
     this.osmTileLayer = new TileLayer()
+    this.courseLayer = new CourseLayer()
     this.trackLayer = new TrackLayer()
     this.gpsLayer = new GpsLayer()
     this.tileRenderer = new WebGLTileRenderer(this.tileLayer, this.tileStore, this.osmTileLayer, this.osmTileStore)
-    this.vectorRenderer = new WebGLVectorRenderer(this.trackLayer, this.gpsLayer)
+    this.vectorRenderer = new WebGLVectorRenderer(this.courseLayer, this.trackLayer, this.gpsLayer)
+    this.labelRenderer = new CourseLabelRenderer(this.courseLayer)
     this.scene = null
     this.renderTimer = 0
     this.animationTimer = 0
@@ -73,9 +79,12 @@ export class WebGLMapRenderer implements MapRenderer {
     }
   }
 
-  attachCanvas(canvasNode: any, width: number, height: number, dpr: number): void {
+  attachCanvas(canvasNode: any, width: number, height: number, dpr: number, labelCanvasNode?: any): void {
     this.tileRenderer.attachCanvas(canvasNode, width, height, dpr)
     this.vectorRenderer.attachContext(this.tileRenderer.gl, canvasNode)
+    if (labelCanvasNode) {
+      this.labelRenderer.attachCanvas(labelCanvasNode, width, height, dpr)
+    }
     this.startAnimation()
     this.scheduleRender()
   }
@@ -102,6 +111,7 @@ export class WebGLMapRenderer implements MapRenderer {
       clearTimeout(this.animationTimer)
       this.animationTimer = 0
     }
+    this.labelRenderer.destroy()
     this.vectorRenderer.destroy()
     this.tileRenderer.destroy()
     this.tileStore.destroy()
@@ -149,6 +159,7 @@ export class WebGLMapRenderer implements MapRenderer {
 
     this.tileRenderer.render(this.scene)
     this.vectorRenderer.render(this.scene, this.pulseFrame)
+    this.labelRenderer.render(this.scene)
     this.emitStats(this.tileStore.getStats(this.tileLayer.lastVisibleTileCount, this.tileLayer.lastReadyTileCount))
   }