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

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

@@ -23,7 +23,7 @@ const RENDER_MODE = 'Single WebGL Pipeline'
const PROJECTION_MODE = 'WGS84 -> WorldTile -> Camera -> Screen'
const MAP_NORTH_OFFSET_DEG = 0
let MAGNETIC_DECLINATION_DEG = -6.91
let MAGNETIC_DECLINATION_TEXT = '6.91掳 W'
let MAGNETIC_DECLINATION_TEXT = '6.91˚ W'
const MIN_ZOOM = 15
const MAX_ZOOM = 20
const DEFAULT_ZOOM = 17
@@ -129,6 +129,7 @@ export interface MapEngineViewState {
tileTranslateX: number
tileTranslateY: number
tileSizePx: number
previewScale: number
stageWidth: number
stageHeight: number
stageLeft: number
@@ -232,6 +233,8 @@ const VIEW_SYNC_KEYS: Array<keyof MapEngineViewState> = [
'mapName',
'configStatusText',
'zoom',
'centerTileX',
'centerTileY',
'rotationDeg',
'rotationText',
'rotationMode',
@@ -263,6 +266,11 @@ const VIEW_SYNC_KEYS: Array<keyof MapEngineViewState> = [
'networkFetchCount',
'cacheHitRateText',
'tileSizePx',
'previewScale',
'stageWidth',
'stageHeight',
'stageLeft',
'stageTop',
'statusText',
'gpsTracking',
'gpsTrackingText',
@@ -393,12 +401,16 @@ function formatRotationText(rotationDeg: number): string {
return `${Math.round(normalizeRotationDeg(rotationDeg))}deg`
}
function normalizeDegreeDisplayText(text: string): string {
return text.replace(/[°掳•]/g, '˚')
}
function formatHeadingText(headingDeg: number | null): string {
if (headingDeg === null) {
return '--'
}
return `${Math.round(normalizeRotationDeg(headingDeg))}掳`
return `${Math.round(normalizeRotationDeg(headingDeg))}˚`
}
function formatDevicePoseText(pose: 'upright' | 'tilted' | 'flat'): string {
@@ -1011,6 +1023,7 @@ export class MapEngine {
tileTranslateX: 0,
tileTranslateY: 0,
tileSizePx: 0,
previewScale: 1,
stageWidth: 0,
stageHeight: 0,
stageLeft: 0,
@@ -2114,7 +2127,7 @@ export class MapEngine {
applyRemoteMapConfig(config: RemoteMapConfig): void {
MAGNETIC_DECLINATION_DEG = config.magneticDeclinationDeg
MAGNETIC_DECLINATION_TEXT = config.magneticDeclinationText
MAGNETIC_DECLINATION_TEXT = normalizeDegreeDisplayText(config.magneticDeclinationText)
this.minZoom = config.minZoom
this.maxZoom = config.maxZoom
this.defaultZoom = config.defaultZoom
@@ -3168,6 +3181,9 @@ export class MapEngine {
this.previewScale = scale
this.previewOriginX = originX
this.previewOriginY = originY
this.setState({
previewScale: scale,
}, true)
}
resetPreviewState(): void {

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() {},
})

22
miniprogram/pages/map/map.wxml
View File

@@ -37,11 +37,25 @@
</view>
<view class="map-stage__overlay-center-layer" wx:if="{{!showDebugPanel && !showGameInfoPanel}}">
<view class="center-scale-ruler" wx:if="{{centerScaleRulerVisible}}" style="left: {{centerScaleRulerCenterXPx}}px; top: {{centerScaleRulerZeroYPx}}px; height: {{centerScaleRulerHeightPx}}px;">
<view class="center-scale-ruler__axis" style="bottom: {{centerScaleRulerAxisBottomPx}}px;"></view>
<view class="center-scale-ruler__arrow"></view>
<view wx:if="{{centerScaleRulerZeroVisible}}" class="center-scale-ruler__tick center-scale-ruler__tick--major center-scale-ruler__tick--zero" style="top: {{centerScaleRulerHeightPx}}px;"></view>
<view wx:if="{{centerScaleRulerZeroVisible}}" class="center-scale-ruler__label center-scale-ruler__label--zero" style="top: {{centerScaleRulerHeightPx}}px;">{{centerScaleRulerZeroLabel}}</view>
<view wx:for="{{centerScaleRulerMinorTicks}}" wx:key="key" class="center-scale-ruler__tick {{item.long ? 'center-scale-ruler__tick--major' : ''}}" style="top: {{item.topPx}}px;"></view>
<view wx:for="{{centerScaleRulerMajorMarks}}" wx:key="key" class="center-scale-ruler__label" style="top: {{item.topPx}}px;">{{item.label}}</view>
</view>
</view>
<view class="map-stage__overlay">
<view class="map-stage__bottom">
<view class="compass-widget">
<view class="compass-widget__heading">{{sensorHeadingText}}</view>
<view class="compass-widget__edge-arrow"></view>
<view class="compass-widget__heading-wrap">
<view class="compass-widget__heading">{{sensorHeadingText}}</view>
<view class="compass-widget__edge-arrow-wrap">
<view class="compass-widget__edge-arrow"></view>
</view>
</view>
<view class="compass-widget__dial {{orientationMode === 'heading-up' ? 'compass-widget__dial--active' : ''}}">
<view class="compass-widget__glass"></view>
<view class="compass-widget__inner-shadow"></view>
@@ -93,8 +107,8 @@
<cover-view class="map-side-column map-side-column--right-sub" wx:if="{{!showDebugPanel && !showGameInfoPanel && showRightButtonGroups}}" style="top: {{topInsetHeight}}px;">
<cover-view class="{{sideButton11Class}}" bindtap="handleOpenGameInfoPanel"><cover-image class="map-side-button__action-image" src="../../assets/btn_info.png"></cover-image></cover-view>
<cover-view class="map-side-button"><cover-view class="map-side-button__text">12</cover-view></cover-view>
<cover-view class="map-side-button"><cover-view class="map-side-button__text">13</cover-view></cover-view>
<cover-view class="map-side-button"><cover-view class="map-side-button__text">14</cover-view></cover-view>
<cover-view class="{{sideButton13Class}}" bindtap="handleToggleCenterScaleRuler"><cover-view class="map-side-button__text">13</cover-view></cover-view>
<cover-view class="{{sideButton14Class}}" bindtap="handleToggleCenterScaleRulerAnchor"><cover-view class="map-side-button__text">14</cover-view></cover-view>
<cover-view class="map-side-button"><cover-view class="map-side-button__text">15</cover-view></cover-view>
<cover-view class="{{sideButton16Class}}" bindtap="handleSkipAction"><cover-image class="map-side-button__action-image" src="../../assets/btn_skip_cp.png"></cover-image></cover-view>
</cover-view>

114
miniprogram/pages/map/map.wxss
View File

@@ -97,6 +97,86 @@
z-index: 4;
}
.map-stage__overlay-center-layer {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 4;
}
.center-scale-ruler {
position: absolute;
width: 220rpx;
transform: translate(-50%, -100%);
pointer-events: none;
z-index: 12;
}
.center-scale-ruler__axis {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4rpx;
margin-left: -2rpx;
border-radius: 999rpx;
background: rgba(19, 20, 18, 0.92);
}
.center-scale-ruler__arrow {
position: absolute;
left: 50%;
top: -34rpx;
width: 0;
height: 0;
margin-left: -14rpx;
border-left: 14rpx solid transparent;
border-right: 14rpx solid transparent;
border-bottom: 34rpx solid rgba(19, 20, 18, 0.96);
}
.center-scale-ruler__tick {
position: absolute;
left: 50%;
width: 18rpx;
height: 4rpx;
margin-left: -9rpx;
margin-top: -2rpx;
border-radius: 999rpx;
background: rgba(19, 20, 18, 0.82);
}
.center-scale-ruler__tick--major {
width: 32rpx;
margin-left: -16rpx;
height: 5rpx;
margin-top: -2.5rpx;
background: rgba(12, 14, 12, 0.96);
}
.center-scale-ruler__tick--zero {
width: 34rpx;
margin-left: -17rpx;
}
.center-scale-ruler__label {
position: absolute;
left: 50%;
margin-left: 18rpx;
transform: translateY(-50%);
font-size: 22rpx;
line-height: 1;
font-weight: 800;
color: rgba(19, 20, 18, 0.96);
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.28);
white-space: nowrap;
}
.center-scale-ruler__label--zero {
transform: translateY(-24%);
font-size: 24rpx;
}
.map-stage__topbar {
display: flex;
align-items: flex-start;
@@ -329,14 +409,38 @@
align-items: center;
gap: 6rpx;
flex-shrink: 0;
position: relative;
z-index: 20;
}
.compass-widget__heading-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
position: relative;
z-index: 21;
}
.compass-widget__heading {
font-size: 14rpx;
min-width: 96rpx;
padding: 6rpx 12rpx;
font-size: 20rpx;
line-height: 1;
font-weight: 600;
color: rgba(32, 42, 34, 0.72);
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.35);
text-align: center;
}
.compass-widget__edge-arrow-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 40rpx;
height: 20rpx;
margin-top: -2rpx;
margin-bottom: -4rpx;
}
.compass-widget__dial {
@@ -519,8 +623,6 @@
.compass-widget__edge-arrow {
width: 0;
height: 0;
margin-top: -2rpx;
margin-bottom: -4rpx;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 14rpx solid rgba(58, 49, 37, 0.72);
@@ -530,12 +632,16 @@
.compass-widget__hint {
max-width: 196rpx;
font-size: 14rpx;
padding: 4rpx 10rpx;
border-radius: 999rpx;
background: rgba(219, 238, 212, 0.94);
font-size: 16rpx;
line-height: 1.3;
color: #d62828;
text-align: center;
font-weight: 700;
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.24);
box-shadow: 0 2rpx 8rpx rgba(22, 48, 32, 0.08);
}
.race-panel-swiper {
position: absolute;