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

Refine compass and ruler overlay

Browse Source
This commit is contained in:
zhangyan
2026-03-25 19:47:39 +08:00
parent f7d4499e36
commit ce25530938
5 changed files with 534 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
miniprogram/pages/map/map.ts
View File

@@ -18,11 +18,24 @@ type CompassLabelData = {
radius: number
className: string
}
type ScaleRulerMinorTickData = {
key: string
topPx: number
long: boolean
}
type ScaleRulerMajorMarkData = {
key: string
topPx: number
label: string
}
type SideButtonMode = 'all' | 'left' | 'right' | 'hidden'
type SideActionButtonState = 'muted' | 'default' | 'active'
type CenterScaleRulerAnchorMode = 'screen-center' | 'compass-center'
type MapPageData = MapEngineViewState & {
showDebugPanel: boolean
showGameInfoPanel: boolean
showCenterScaleRuler: boolean
centerScaleRulerAnchorMode: CenterScaleRulerAnchorMode
statusBarHeight: number
topInsetHeight: number
hudPanelIndex: number
@@ -45,12 +58,23 @@ type MapPageData = MapEngineViewState & {
sideButton2Class: string
sideButton4Class: string
sideButton11Class: string
sideButton13Class: string
sideButton14Class: string
sideButton16Class: string
centerScaleRulerVisible: boolean
centerScaleRulerCenterXPx: number
centerScaleRulerZeroYPx: number
centerScaleRulerHeightPx: number
centerScaleRulerAxisBottomPx: number
centerScaleRulerZeroVisible: boolean
centerScaleRulerZeroLabel: string
centerScaleRulerMinorTicks: ScaleRulerMinorTickData[]
centerScaleRulerMajorMarks: ScaleRulerMajorMarkData[]
showLeftButtonGroup: boolean
showRightButtonGroups: boolean
showBottomDebugButton: boolean
}
const INTERNAL_BUILD_VERSION = 'map-build-232'
const INTERNAL_BUILD_VERSION = 'map-build-252'
const CLASSIC_REMOTE_GAME_CONFIG_URL = 'https://oss-mbh5.colormaprun.com/gotomars/event/classic-sequential.json'
const SCORE_O_REMOTE_GAME_CONFIG_URL = 'https://oss-mbh5.colormaprun.com/gotomars/event/score-o.json'
let mapEngine: MapEngine | null = null
@@ -132,7 +156,7 @@ function getSideActionButtonClass(state: SideActionButtonState): string {
return 'map-side-button map-side-button--default'
}
function buildSideButtonState(data: Pick<MapPageData, 'sideButtonMode' | 'showGameInfoPanel' | 'skipButtonEnabled' | 'gameSessionStatus' | 'gpsLockEnabled' | 'gpsLockAvailable'>) {
function buildSideButtonState(data: Pick<MapPageData, 'sideButtonMode' | 'showGameInfoPanel' | 'showCenterScaleRuler' | 'centerScaleRulerAnchorMode' | 'skipButtonEnabled' | 'gameSessionStatus' | 'gpsLockEnabled' | 'gpsLockAvailable'>) {
const sideButton2State: SideActionButtonState = !data.gpsLockAvailable
? 'muted'
: data.gpsLockEnabled
@@ -140,6 +164,12 @@ function buildSideButtonState(data: Pick<MapPageData, 'sideButtonMode' | 'showGa
: 'default'
const sideButton4State: SideActionButtonState = data.gameSessionStatus === 'idle' ? 'default' : 'active'
const sideButton11State: SideActionButtonState = data.showGameInfoPanel ? 'active' : 'default'
const sideButton13State: SideActionButtonState = data.showCenterScaleRuler ? 'active' : 'default'
const sideButton14State: SideActionButtonState = !data.showCenterScaleRuler
? 'muted'
: data.centerScaleRulerAnchorMode === 'compass-center'
? 'active'
: 'default'
const sideButton16State: SideActionButtonState = data.skipButtonEnabled ? 'default' : 'muted'
return {
@@ -147,10 +177,182 @@ function buildSideButtonState(data: Pick<MapPageData, 'sideButtonMode' | 'showGa
sideButton2Class: getSideActionButtonClass(sideButton2State),
sideButton4Class: getSideActionButtonClass(sideButton4State),
sideButton11Class: getSideActionButtonClass(sideButton11State),
sideButton13Class: getSideActionButtonClass(sideButton13State),
sideButton14Class: getSideActionButtonClass(sideButton14State),
sideButton16Class: getSideActionButtonClass(sideButton16State),
}
}
function getRpxUnitInPx(): number {
const systemInfo = wx.getSystemInfoSync()
return systemInfo.windowWidth / 750
}
function worldTileYToLat(worldTileY: number, zoom: number): number {
const scale = Math.pow(2, zoom)
const n = Math.PI - (2 * Math.PI * worldTileY) / scale
return (180 / Math.PI) * Math.atan(Math.sinh(n))
}
function getNiceDistanceMeters(rawDistanceMeters: number): number {
if (!Number.isFinite(rawDistanceMeters) || rawDistanceMeters <= 0) {
return 50
}
const exponent = Math.floor(Math.log10(rawDistanceMeters))
const base = Math.pow(10, exponent)
const normalized = rawDistanceMeters / base
if (normalized <= 1) {
return base
}
if (normalized <= 2) {
return 2 * base
}
if (normalized <= 5) {
return 5 * base
}
return 10 * base
}
function formatScaleDistanceLabel(distanceMeters: number): string {
if (distanceMeters >= 1000) {
const distanceKm = distanceMeters / 1000
const formatted = distanceKm >= 10 ? distanceKm.toFixed(0) : distanceKm.toFixed(1)
return `${formatted.replace(/\.0$/, '')} km`
}
return `${Math.round(distanceMeters)} m`
}
function buildCenterScaleRulerPatch(data: Pick<MapPageData, 'showCenterScaleRuler' | 'centerScaleRulerAnchorMode' | 'stageWidth' | 'stageHeight' | 'topInsetHeight' | 'zoom' | 'centerTileY' | 'tileSizePx' | 'previewScale'>) {
if (!data.showCenterScaleRuler) {
return {
centerScaleRulerVisible: false,
centerScaleRulerCenterXPx: 0,
centerScaleRulerZeroYPx: 0,
centerScaleRulerHeightPx: 0,
centerScaleRulerAxisBottomPx: 0,
centerScaleRulerZeroVisible: false,
centerScaleRulerZeroLabel: '0 m',
centerScaleRulerMinorTicks: [] as ScaleRulerMinorTickData[],
centerScaleRulerMajorMarks: [] as ScaleRulerMajorMarkData[],
}
}
if (!data.stageWidth || !data.stageHeight) {
return {
centerScaleRulerVisible: false,
centerScaleRulerCenterXPx: 0,
centerScaleRulerZeroYPx: 0,
centerScaleRulerHeightPx: 0,
centerScaleRulerAxisBottomPx: 0,
centerScaleRulerZeroVisible: false,
centerScaleRulerZeroLabel: '0 m',
centerScaleRulerMinorTicks: [] as ScaleRulerMinorTickData[],
centerScaleRulerMajorMarks: [] as ScaleRulerMajorMarkData[],
}
}
const topPadding = 12
const rpxUnitPx = getRpxUnitInPx()
const compassBottomPaddingPx = 248 * rpxUnitPx
const compassDialRadiusPx = (196 * rpxUnitPx) / 2
const compassHeadingOverlayHeightPx = 40 * rpxUnitPx
const compassOcclusionPaddingPx = 10 * rpxUnitPx
const zeroYPx = data.centerScaleRulerAnchorMode === 'compass-center'
? Math.round(data.stageHeight - compassBottomPaddingPx - compassDialRadiusPx)
: Math.round(data.stageHeight / 2)
const fallbackHeight = Math.max(zeroYPx - topPadding, 160)
const coveredBottomPx = data.centerScaleRulerAnchorMode === 'compass-center'
? Math.round(compassDialRadiusPx + compassHeadingOverlayHeightPx + compassOcclusionPaddingPx)
: 0
if (
!data.tileSizePx
|| !Number.isFinite(data.zoom)
|| !Number.isFinite(data.centerTileY)
) {
return {
centerScaleRulerVisible: true,
centerScaleRulerCenterXPx: Math.round(data.stageWidth / 2),
centerScaleRulerZeroYPx: zeroYPx,
centerScaleRulerHeightPx: fallbackHeight,
centerScaleRulerAxisBottomPx: coveredBottomPx,
centerScaleRulerZeroVisible: data.centerScaleRulerAnchorMode !== 'compass-center',
centerScaleRulerZeroLabel: '0 m',
centerScaleRulerMinorTicks: [] as ScaleRulerMinorTickData[],
centerScaleRulerMajorMarks: [] as ScaleRulerMajorMarkData[],
}
}
const centerLat = worldTileYToLat(data.centerTileY + 0.5, data.zoom)
const metersPerTile = Math.cos(centerLat * Math.PI / 180) * 40075016.686 / Math.pow(2, data.zoom)
const metersPerPixel = metersPerTile / data.tileSizePx
const effectivePreviewScale = Number.isFinite(data.previewScale) && data.previewScale > 0 ? data.previewScale : 1
const effectiveMetersPerPixel = metersPerPixel / effectivePreviewScale
const rulerHeight = Math.floor(zeroYPx - topPadding)
if (!Number.isFinite(effectiveMetersPerPixel) || effectiveMetersPerPixel <= 0 || rulerHeight < 120) {
return {
centerScaleRulerVisible: true,
centerScaleRulerCenterXPx: Math.round(data.stageWidth / 2),
centerScaleRulerZeroYPx: zeroYPx,
centerScaleRulerHeightPx: Math.max(rulerHeight, fallbackHeight),
centerScaleRulerAxisBottomPx: coveredBottomPx,
centerScaleRulerZeroVisible: data.centerScaleRulerAnchorMode !== 'compass-center',
centerScaleRulerZeroLabel: '0 m',
centerScaleRulerMinorTicks: [] as ScaleRulerMinorTickData[],
centerScaleRulerMajorMarks: [] as ScaleRulerMajorMarkData[],
}
}
const labelDistanceMeters = getNiceDistanceMeters(effectiveMetersPerPixel * 80)
const minorDistanceMeters = labelDistanceMeters / 8
const minorStepPx = minorDistanceMeters / effectiveMetersPerPixel
const visibleTopLimitPx = rulerHeight - coveredBottomPx
const minorTicks: ScaleRulerMinorTickData[] = []
const majorMarks: ScaleRulerMajorMarkData[] = []
for (let index = 1; index <= 200; index += 1) {
const topPx = Math.round(rulerHeight - index * minorStepPx)
if (topPx < 0) {
break
}
if (topPx >= visibleTopLimitPx) {
continue
}
const isHalfMajor = index % 4 === 0
const isLabelMajor = index % 8 === 0
minorTicks.push({
key: `minor-${index}`,
topPx,
long: isHalfMajor,
})
if (isLabelMajor) {
majorMarks.push({
key: `major-${index}`,
topPx,
label: formatScaleDistanceLabel((index / 8) * labelDistanceMeters),
})
}
}
return {
centerScaleRulerVisible: true,
centerScaleRulerCenterXPx: Math.round(data.stageWidth / 2),
centerScaleRulerZeroYPx: zeroYPx,
centerScaleRulerHeightPx: rulerHeight,
centerScaleRulerAxisBottomPx: coveredBottomPx,
centerScaleRulerZeroVisible: data.centerScaleRulerAnchorMode !== 'compass-center',
centerScaleRulerZeroLabel: '0 m',
centerScaleRulerMinorTicks: minorTicks,
centerScaleRulerMajorMarks: majorMarks,
}
}
function buildEmptyGameInfoSnapshot(): MapEngineGameInfoSnapshot {
return {
title: '当前游戏',
@@ -170,10 +372,12 @@ Page({
data: {
showDebugPanel: false,
showGameInfoPanel: false,
showCenterScaleRuler: false,
statusBarHeight: 0,
topInsetHeight: 12,
hudPanelIndex: 0,
configSourceText: '顺序赛配置',
centerScaleRulerAnchorMode: 'screen-center',
gameInfoTitle: '当前游戏',
gameInfoSubtitle: '未开始',
gameInfoLocalRows: [],
@@ -246,12 +450,23 @@ Page({
mapPulseFxClass: '',
stageFxVisible: false,
stageFxClass: '',
centerScaleRulerVisible: false,
centerScaleRulerCenterXPx: 0,
centerScaleRulerZeroYPx: 0,
centerScaleRulerHeightPx: 0,
centerScaleRulerAxisBottomPx: 0,
centerScaleRulerZeroVisible: false,
centerScaleRulerZeroLabel: '0 m',
centerScaleRulerMinorTicks: [],
centerScaleRulerMajorMarks: [],
compassTicks: buildCompassTicks(),
compassLabels: buildCompassLabels(),
...buildSideButtonVisibility('left'),
...buildSideButtonState({
sideButtonMode: 'left',
showGameInfoPanel: false,
showCenterScaleRuler: false,
centerScaleRulerAnchorMode: 'screen-center',
skipButtonEnabled: false,
gameSessionStatus: 'idle',
gpsLockEnabled: false,
@@ -298,6 +513,7 @@ Page({
this.setData({
...nextData,
...buildCenterScaleRulerPatch(mergedData),
...buildSideButtonState(mergedData),
})
@@ -391,11 +607,24 @@ Page({
...buildSideButtonState({
sideButtonMode: 'left',
showGameInfoPanel: false,
showCenterScaleRuler: false,
centerScaleRulerAnchorMode: 'screen-center',
skipButtonEnabled: false,
gameSessionStatus: 'idle',
gpsLockEnabled: false,
gpsLockAvailable: false,
}),
...buildCenterScaleRulerPatch({
...(mapEngine.getInitialData() as MapPageData),
showCenterScaleRuler: false,
centerScaleRulerAnchorMode: 'screen-center',
stageWidth: 0,
stageHeight: 0,
topInsetHeight: Math.max(statusBarHeight + 12, menuButtonBottom + 20),
zoom: 0,
centerTileY: 0,
tileSizePx: 0,
}),
})
},
@@ -807,10 +1036,19 @@ Page({
}
const snapshot = mapEngine.getGameInfoSnapshot()
const localRows = snapshot.localRows.concat([
{ label: '比例尺开关', value: this.data.showCenterScaleRuler ? '开启' : '关闭' },
{ label: '比例尺锚点', value: this.data.centerScaleRulerAnchorMode === 'compass-center' ? '指北针圆心' : '屏幕中心' },
{ label: '比例尺可见', value: this.data.centerScaleRulerVisible ? 'true' : 'false' },
{ label: '比例尺中心X', value: `${this.data.centerScaleRulerCenterXPx}px` },
{ label: '比例尺零点Y', value: `${this.data.centerScaleRulerZeroYPx}px` },
{ label: '比例尺高度', value: `${this.data.centerScaleRulerHeightPx}px` },
{ label: '比例尺主刻度数', value: String(this.data.centerScaleRulerMajorMarks.length) },
])
this.setData({
gameInfoTitle: snapshot.title,
gameInfoSubtitle: snapshot.subtitle,
gameInfoLocalRows: snapshot.localRows,
gameInfoLocalRows: localRows,
gameInfoGlobalRows: snapshot.globalRows,
})
},
@@ -823,6 +1061,8 @@ Page({
...buildSideButtonState({
sideButtonMode: this.data.sideButtonMode,
showGameInfoPanel: true,
showCenterScaleRuler: this.data.showCenterScaleRuler,
centerScaleRulerAnchorMode: this.data.centerScaleRulerAnchorMode,
skipButtonEnabled: this.data.skipButtonEnabled,
gameSessionStatus: this.data.gameSessionStatus,
gpsLockEnabled: this.data.gpsLockEnabled,
@@ -837,6 +1077,8 @@ Page({
...buildSideButtonState({
sideButtonMode: this.data.sideButtonMode,
showGameInfoPanel: false,
showCenterScaleRuler: this.data.showCenterScaleRuler,
centerScaleRulerAnchorMode: this.data.centerScaleRulerAnchorMode,
skipButtonEnabled: this.data.skipButtonEnabled,
gameSessionStatus: this.data.gameSessionStatus,
gpsLockEnabled: this.data.gpsLockEnabled,
@@ -878,6 +1120,8 @@ Page({
...buildSideButtonState({
sideButtonMode: nextMode,
showGameInfoPanel: this.data.showGameInfoPanel,
showCenterScaleRuler: this.data.showCenterScaleRuler,
centerScaleRulerAnchorMode: this.data.centerScaleRulerAnchorMode,
skipButtonEnabled: this.data.skipButtonEnabled,
gameSessionStatus: this.data.gameSessionStatus,
gpsLockEnabled: this.data.gpsLockEnabled,
@@ -909,6 +1153,8 @@ Page({
...buildSideButtonState({
sideButtonMode: this.data.sideButtonMode,
showGameInfoPanel: false,
showCenterScaleRuler: this.data.showCenterScaleRuler,
centerScaleRulerAnchorMode: this.data.centerScaleRulerAnchorMode,
skipButtonEnabled: this.data.skipButtonEnabled,
gameSessionStatus: this.data.gameSessionStatus,
gpsLockEnabled: this.data.gpsLockEnabled,
@@ -923,6 +1169,8 @@ Page({
...buildSideButtonState({
sideButtonMode: this.data.sideButtonMode,
showGameInfoPanel: this.data.showGameInfoPanel,
showCenterScaleRuler: this.data.showCenterScaleRuler,
centerScaleRulerAnchorMode: this.data.centerScaleRulerAnchorMode,
skipButtonEnabled: this.data.skipButtonEnabled,
gameSessionStatus: this.data.gameSessionStatus,
gpsLockEnabled: this.data.gpsLockEnabled,
@@ -931,6 +1179,46 @@ Page({
})
},
handleToggleCenterScaleRuler() {
const nextEnabled = !this.data.showCenterScaleRuler
this.data.showCenterScaleRuler = nextEnabled
const mergedData = {
...this.data,
showCenterScaleRuler: nextEnabled,
} as MapPageData
this.setData({
showCenterScaleRuler: nextEnabled,
...buildCenterScaleRulerPatch(mergedData),
...buildSideButtonState(mergedData),
})
},
handleToggleCenterScaleRulerAnchor() {
if (!this.data.showCenterScaleRuler) {
return
}
const nextAnchorMode: CenterScaleRulerAnchorMode = this.data.centerScaleRulerAnchorMode === 'screen-center'
? 'compass-center'
: 'screen-center'
this.data.centerScaleRulerAnchorMode = nextAnchorMode
const mergedData = {
...this.data,
centerScaleRulerAnchorMode: nextAnchorMode,
} as MapPageData
this.setData({
centerScaleRulerAnchorMode: nextAnchorMode,
...buildCenterScaleRulerPatch(mergedData),
...buildSideButtonState(mergedData),
})
if (this.data.showGameInfoPanel) {
this.syncGameInfoPanelSnapshot()
}
},
handleDebugPanelTap() {},
})