feat: initialize mini program map engine

miniprogram/engine/layer/gpsLayer.ts

@@ -0,0 +1,51 @@
+import { type CameraState } from '../camera/camera'
+import { lonLatToWorldTile } from '../../utils/projection'
+import { worldToScreen } from '../camera/camera'
+import { type MapLayer, type LayerRenderContext } from './mapLayer'
+import { type MapScene } from '../renderer/mapRenderer'
+import { type ScreenPoint } from './trackLayer'
+
+export class GpsLayer implements MapLayer {
+  projectPoint(scene: MapScene, camera: CameraState): ScreenPoint {
+    const worldPoint = lonLatToWorldTile(scene.gpsPoint, scene.zoom)
+    const screenPoint = worldToScreen(camera, worldPoint, false)
+    return {
+      x: screenPoint.x + scene.translateX,
+      y: screenPoint.y + scene.translateY,
+    }
+  }
+
+  getPulseRadius(pulseFrame: number): number {
+    return 18 + 6 * (0.5 + 0.5 * Math.sin(pulseFrame / 6))
+  }
+
+  draw(context: LayerRenderContext): void {
+    const { ctx, camera, scene, pulseFrame } = context
+    const gpsScreenPoint = this.projectPoint(scene, camera)
+    const pulse = this.getPulseRadius(pulseFrame)
+
+    ctx.save()
+    ctx.beginPath()
+    ctx.fillStyle = 'rgba(33, 158, 188, 0.22)'
+    ctx.arc(gpsScreenPoint.x, gpsScreenPoint.y, pulse, 0, Math.PI * 2)
+    ctx.fill()
+
+    ctx.beginPath()
+    ctx.fillStyle = '#21a1bc'
+    ctx.arc(gpsScreenPoint.x, gpsScreenPoint.y, 9, 0, Math.PI * 2)
+    ctx.fill()
+
+    ctx.beginPath()
+    ctx.strokeStyle = '#ffffff'
+    ctx.lineWidth = 3
+    ctx.arc(gpsScreenPoint.x, gpsScreenPoint.y, 13, 0, Math.PI * 2)
+    ctx.stroke()
+
+    ctx.fillStyle = '#0b3d4a'
+    ctx.font = 'bold 16px sans-serif'
+    ctx.textAlign = 'left'
+    ctx.textBaseline = 'bottom'
+    ctx.fillText('GPS', gpsScreenPoint.x + 14, gpsScreenPoint.y - 12)
+    ctx.restore()
+  }
+}