zhangyan/cmr-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp map page layout and compass while removing GPS demo

Browse Source
This commit is contained in:
zhangyan
2026-03-23 12:59:51 +08:00
parent 51740761f5
commit 277121fd51
11 changed files with 1053 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
miniprogram/engine/layer/gpsLayer.ts
View File

@@ -16,7 +16,11 @@ function buildVectorCamera(scene: MapScene): CameraState {
}
export class GpsLayer implements MapLayer {
projectPoint(scene: MapScene): ScreenPoint {
projectPoint(scene: MapScene): ScreenPoint | null {
if (!scene.gpsPoint) {
return null
}
const camera = buildVectorCamera(scene)
const worldPoint = calibratedLonLatToWorldTile(scene.gpsPoint, scene.zoom, scene.gpsCalibration, scene.gpsCalibrationOrigin)
return worldToScreen(camera, worldPoint, false)
@@ -29,6 +33,10 @@ export class GpsLayer implements MapLayer {
draw(context: LayerRenderContext): void {
const { ctx, scene, pulseFrame } = context
const gpsScreenPoint = this.projectPoint(scene)
if (!gpsScreenPoint) {
return
}
const pulse = this.getPulseRadius(pulseFrame)
ctx.save()

3
miniprogram/engine/layer/trackLayer.ts
View File

@@ -32,6 +32,9 @@ export class TrackLayer implements MapLayer {
draw(context: LayerRenderContext): void {
const { ctx, scene } = context
const points = this.projectPoints(scene)
if (!points.length) {
return
}
ctx.save()
ctx.lineCap = 'round'

24
miniprogram/engine/map/mapEngine.ts
View File

@@ -47,17 +47,6 @@ const COMPASS_NEEDLE_SMOOTHING = 0.12
const GPS_TRACK_MAX_POINTS = 200
const GPS_TRACK_MIN_STEP_METERS = 3
const SAMPLE_TRACK_WGS84: LonLatPoint[] = [
worldTileToLonLat({ x: DEFAULT_CENTER_TILE_X - 0.72, y: DEFAULT_CENTER_TILE_Y + 0.44 }, DEFAULT_ZOOM),
worldTileToLonLat({ x: DEFAULT_CENTER_TILE_X - 0.18, y: DEFAULT_CENTER_TILE_Y + 0.08 }, DEFAULT_ZOOM),
worldTileToLonLat({ x: DEFAULT_CENTER_TILE_X + 0.22, y: DEFAULT_CENTER_TILE_Y - 0.16 }, DEFAULT_ZOOM),
worldTileToLonLat({ x: DEFAULT_CENTER_TILE_X + 0.64, y: DEFAULT_CENTER_TILE_Y - 0.52 }, DEFAULT_ZOOM),
]
const SAMPLE_GPS_WGS84: LonLatPoint = worldTileToLonLat(
{ x: DEFAULT_CENTER_TILE_X + 0.12, y: DEFAULT_CENTER_TILE_Y - 0.06 },
DEFAULT_ZOOM,
)
type TouchPoint = WechatMiniprogram.TouchDetail
type GestureMode = 'idle' | 'pan' | 'pinch'
@@ -435,7 +424,7 @@ export class MapEngine {
defaultCenterTileX: number
defaultCenterTileY: number
tileBoundsByZoom: Record<number, TileZoomBounds> | null
currentGpsPoint: LonLatPoint
currentGpsPoint: LonLatPoint | null
currentGpsTrack: LonLatPoint[]
currentGpsAccuracyMeters: number | null
hasGpsCenteredOnce: boolean
@@ -485,7 +474,7 @@ export class MapEngine {
this.defaultCenterTileX = DEFAULT_CENTER_TILE_X
this.defaultCenterTileY = DEFAULT_CENTER_TILE_Y
this.tileBoundsByZoom = null
this.currentGpsPoint = SAMPLE_GPS_WGS84
this.currentGpsPoint = null
this.currentGpsTrack = []
this.currentGpsAccuracyMeters = null
this.hasGpsCenteredOnce = false
@@ -1302,13 +1291,12 @@ export class MapEngine {
const exactCenter = this.getExactCenterFromTranslate(this.state.tileTranslateX, this.state.tileTranslateY)
const resolvedViewport = this.resolveViewportForExactCenter(exactCenter.x, exactCenter.y, nextRotationDeg)
this.state = {
...this.state,
this.setState({
...resolvedViewport,
rotationDeg: nextRotationDeg,
rotationText: formatRotationText(nextRotationDeg),
centerText: buildCenterText(this.state.zoom, resolvedViewport.centerTileX, resolvedViewport.centerTileY),
}
})
this.syncRenderer()
}
@@ -1408,7 +1396,7 @@ export class MapEngine {
previewScale: this.previewScale || 1,
previewOriginX: this.previewOriginX || this.state.stageWidth / 2,
previewOriginY: this.previewOriginY || this.state.stageHeight / 2,
track: this.currentGpsTrack.length ? this.currentGpsTrack : SAMPLE_TRACK_WGS84,
track: this.currentGpsTrack,
gpsPoint: this.currentGpsPoint,
gpsCalibration: GPS_MAP_CALIBRATION,
gpsCalibrationOrigin: worldTileToLonLat({ x: this.defaultCenterTileX, y: this.defaultCenterTileY }, this.defaultZoom),
@@ -1807,6 +1795,8 @@ export class MapEngine {

2
miniprogram/engine/renderer/mapRenderer.ts
View File

@@ -23,7 +23,7 @@ export interface MapScene {
previewOriginX: number
previewOriginY: number
track: LonLatPoint[]
gpsPoint: LonLatPoint
gpsPoint: LonLatPoint | null
gpsCalibration: MapCalibration
gpsCalibrationOrigin: LonLatPoint
osmReferenceEnabled: boolean

13
miniprogram/engine/renderer/webglVectorRenderer.ts
View File

@@ -137,9 +137,15 @@ export class WebGLVectorRenderer {
this.pushCircle(positions, colors, point.x, point.y, 6.5, [0.97, 0.98, 0.95, 1], scene)
}
this.pushCircle(positions, colors, gpsPoint.x, gpsPoint.y, this.gpsLayer.getPulseRadius(pulseFrame), [0.13, 0.62, 0.74, 0.22], scene)
this.pushCircle(positions, colors, gpsPoint.x, gpsPoint.y, 13, [1, 1, 1, 0.95], scene)
this.pushCircle(positions, colors, gpsPoint.x, gpsPoint.y, 9, [0.13, 0.63, 0.74, 1], scene)
if (gpsPoint) {
this.pushCircle(positions, colors, gpsPoint.x, gpsPoint.y, this.gpsLayer.getPulseRadius(pulseFrame), [0.13, 0.62, 0.74, 0.22], scene)
this.pushCircle(positions, colors, gpsPoint.x, gpsPoint.y, 13, [1, 1, 1, 0.95], scene)
this.pushCircle(positions, colors, gpsPoint.x, gpsPoint.y, 9, [0.13, 0.63, 0.74, 1], scene)
}
if (!positions.length) {
return
}
gl.viewport(0, 0, this.canvas.width, this.canvas.height)
gl.useProgram(this.program)
@@ -231,4 +237,3 @@ export class WebGLVectorRenderer {
}
}
}