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

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

@@ -1,180 +1,254 @@
<view class="page">
<view class="page__header">
<view>
<view class="page__eyebrow">CMR MINI PROGRAM</view>
<view class="page__title">{{mapName}}</view>
<view
class="map-stage"
catchtouchstart="handleTouchStart"
catchtouchmove="handleTouchMove"
catchtouchend="handleTouchEnd"
catchtouchcancel="handleTouchCancel"
>
<view class="map-content">
<canvas
id="mapCanvas"
type="webgl"
canvas-id="mapCanvas"
class="map-canvas map-canvas--base"
></canvas>
</view>
<view class="page__badge">{{mapReadyText}}</view>
</view>
<view class="map-stage-wrap">
<view
class="map-stage"
catchtouchstart="handleTouchStart"
catchtouchmove="handleTouchMove"
catchtouchend="handleTouchEnd"
catchtouchcancel="handleTouchCancel"
>
<view class="map-content">
<canvas
id="mapCanvas"
type="webgl"
canvas-id="mapCanvas"
class="map-canvas map-canvas--base"
></canvas>
<view class="map-stage__crosshair"></view>
<view class="map-stage__overlay">
<view class="map-stage__topbar" style="padding-top: {{topInsetHeight}}px;">
<view class="map-stage__meta">
<view class="map-stage__eyebrow">CMR MINI MAP</view>
<view class="map-stage__title">{{mapName}}</view>
<view class="map-stage__badge">{{mapReadyText}}</view>
</view>
</view>
<view class="map-stage__crosshair"></view>
<view class="map-stage__overlay">
<view class="overlay-card">
<view class="overlay-card__label">WEBGL MAP ENGINE</view>
<view class="overlay-card__title">North Up / Heading Up / Manual</view>
<view class="overlay-card__desc">
地图北已经固定为正上方。现在支持手动旋转、北朝上、朝向朝上三种模式，并提供指北针用于校验朝向。
</view>
<view class="map-stage__bottom">
<view class="map-stage__status">
<view class="map-stage__status-label">当前模式</view>
<view class="map-stage__status-value">{{orientationModeText}}</view>
<view class="map-stage__status-meta">{{gpsTrackingText}} · 缩放 {{zoom}}</view>
</view>
<view class="compass-widget">
<view class="compass-widget__ring">
<view class="compass-widget__north">N</view>
<view class="compass-widget__needle" style="transform: translateX(-50%) rotate({{compassNeedleDeg}}deg);"></view>
<view class="compass-widget__center"></view>
<view class="compass-widget__heading">{{sensorHeadingText}}</view>
<view class="compass-widget__dial">
<view class="compass-widget__glass"></view>
<view class="compass-widget__inner-shadow"></view>
<view class="compass-widget__card" style="transform: rotate({{rotationDeg}}deg);">
<image class="compass-widget__north-arrow" src="../../assets/compass-north-arrow.svg" mode="aspectFit"></image>
<view wx:for="{{compassTicks}}" wx:key="angle" class="compass-widget__tick-anchor" style="transform: translate(-50%, -50%) rotate({{item.angle}}deg);">
<view class="compass-widget__tick {{item.long ? 'compass-widget__tick--long' : 'compass-widget__tick--short'}} {{item.major ? 'compass-widget__tick--major' : ''}}"></view>
</view>
<view wx:for="{{compassLabels}}" wx:key="text" class="compass-widget__mark-anchor" style="transform: translate(-50%, -50%) rotate({{item.angle}}deg);">
<view class="compass-widget__mark {{item.className}}" style="transform: translate(-50%, -50%) translateY(-{{item.radius}}rpx) rotate({{item.rotateBack}}deg);">{{item.text}}</view>
</view>
</view>
<view class="compass-widget__needle-anchor" style="transform: translate(-50%, -50%) rotate({{compassNeedleDeg}}deg);">
<view class="compass-widget__needle-north"></view>
<view class="compass-widget__needle-south"></view>
</view>
<view class="compass-widget__hub"></view>
<view class="compass-widget__hub-core"></view>
</view>
<view class="compass-widget__label">{{sensorHeadingText}}</view>
<view class="compass-widget__hint" wx:if="{{compassDeclinationText}}">{{compassDeclinationText}}</view>
</view>
</view>
</view>
</view>
<scroll-view class="info-panel" scroll-y enhanced show-scrollbar="true">
<view class="info-panel__row">
<text class="info-panel__label">Build</text>
<text class="info-panel__value">{{buildVersion}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Config</text>
<text class="info-panel__value">{{configStatusText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Heading Mode</text>
<text class="info-panel__value">{{orientationModeText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Sensor Heading</text>
<text class="info-panel__value">{{sensorHeadingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">North Ref</text>
<text class="info-panel__value">{{northReferenceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Zoom</text>
<text class="info-panel__value">{{zoom}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Rotation</text>
<text class="info-panel__value">{{rotationText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Status</text>
<text class="info-panel__value">{{statusText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">GPS</text>
<text class="info-panel__value">{{gpsTrackingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">GPS Coord</text>
<text class="info-panel__value">{{gpsCoordText}}</text>
</view>
<view class="control-row">
<view class="control-chip control-chip--secondary" bindtap="handleToggleDebugPanel">{{showDebugPanel ? '隐藏调试' : '查看调试'}}</view>
</view>
<cover-view class="screen-button-layer" wx:if="{{!showDebugPanel}}" style="top: {{topInsetHeight}}px;" bindtap="handleToggleDebugPanel">
<cover-view class="screen-button-layer__icon">
<cover-view class="screen-button-layer__line"></cover-view>
<cover-view class="screen-button-layer__stand"></cover-view>
</cover-view>
<cover-view class="screen-button-layer__text">屏幕</cover-view>
</cover-view>
<block wx:if="{{showDebugPanel}}">
<view class="info-panel__row">
<text class="info-panel__label">Renderer</text>
<text class="info-panel__value">{{renderMode}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Projection</text>
<text class="info-panel__value">{{projectionMode}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Auto Source</text>
<text class="info-panel__value">{{autoRotateSourceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Calibration</text>
<text class="info-panel__value">{{autoRotateCalibrationText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Tile URL</text>
<text class="info-panel__value">{{tileSource}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Center Tile</text>
<text class="info-panel__value">{{centerText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Tile Size</text>
<text class="info-panel__value">{{tileSizePx}}px</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Visible Tiles</text>
<text class="info-panel__value">{{visibleTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Ready Tiles</text>
<text class="info-panel__value">{{readyTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Memory Tiles</text>
<text class="info-panel__value">{{memoryTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Tiles</text>
<text class="info-panel__value">{{diskTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Cache Hit</text>
<text class="info-panel__value">{{cacheHitRateText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Hits</text>
<text class="info-panel__value">{{diskHitCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Net Fetches</text>
<text class="info-panel__value">{{networkFetchCount}}</text>
</view>
</block>
<view class="race-panel">
<view class="race-panel__tag race-panel__tag--top-left">目标</view>
<view class="race-panel__tag race-panel__tag--top-right">里程</view>
<view class="race-panel__tag race-panel__tag--bottom-left">点距</view>
<view class="race-panel__tag race-panel__tag--bottom-right">速度</view>
<view class="control-row">
<view class="control-chip control-chip--primary" bindtap="handleRecenter">回到首屏</view>
<view class="control-chip control-chip--secondary" bindtap="handleRotationReset">旋转归零</view>
<view class="race-panel__line race-panel__line--center"></view>
<view class="race-panel__line race-panel__line--left-mid"></view>
<view class="race-panel__line race-panel__line--right-mid"></view>
<view class="race-panel__line race-panel__line--left-top"></view>
<view class="race-panel__line race-panel__line--left-bottom"></view>
<view class="race-panel__line race-panel__line--right-top"></view>
<view class="race-panel__line race-panel__line--right-bottom"></view>
<view class="race-panel__grid">
<view class="race-panel__cell race-panel__cell--action">
<view class="race-panel__play"></view>
</view>
<view class="race-panel__cell race-panel__cell--timer">
<text class="race-panel__timer">{{panelTimerText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--mileage">
<view class="race-panel__mileage-wrap">
<text class="race-panel__mileage">{{panelMileageText}}</text>
<view class="race-panel__chevrons">
<view class="race-panel__chevron"></view>
<view class="race-panel__chevron race-panel__chevron--offset"></view>
</view>
</view>
</view>
<view class="race-panel__cell race-panel__cell--distance">
<view class="race-panel__metric-group race-panel__metric-group--left">
<text class="race-panel__metric-value race-panel__metric-value--distance">{{panelDistanceValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--distance">m</text>
</view>
</view>
<view class="race-panel__cell race-panel__cell--progress">
<text class="race-panel__progress">{{panelProgressText}}</text>
</view>
<view class="race-panel__cell race-panel__cell--speed">
<view class="race-panel__metric-group race-panel__metric-group--right">
<text class="race-panel__metric-value race-panel__metric-value--speed">{{panelSpeedValueText}}</text>
<text class="race-panel__metric-unit race-panel__metric-unit--speed">km/h</text>
</view>
</view>
</view>
<view class="control-row">
<view class="control-chip {{gpsTracking ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleGpsTracking">{{gpsTracking ? '停止定位' : '开启定位'}}</view>
<view class="control-chip {{osmReferenceEnabled ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleOsmReference">{{osmReferenceText}}</view>
</view>
<view class="debug-modal" wx:if="{{showDebugPanel}}" bindtap="handleCloseDebugPanel">
<view class="debug-modal__dialog" catchtap="handleDebugPanelTap">
<view class="debug-modal__header">
<view>
<view class="debug-modal__eyebrow">DEBUG PANEL</view>
<view class="debug-modal__title">地图调试信息</view>
</view>
<view class="debug-modal__close" bindtap="handleCloseDebugPanel">关闭</view>
</view>
<scroll-view class="debug-modal__content" scroll-y enhanced show-scrollbar="true">
<view class="info-panel__row">
<text class="info-panel__label">Build</text>
<text class="info-panel__value">{{buildVersion}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Config</text>
<text class="info-panel__value">{{configStatusText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Heading Mode</text>
<text class="info-panel__value">{{orientationModeText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Sensor Heading</text>
<text class="info-panel__value">{{sensorHeadingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">North Ref</text>
<text class="info-panel__value">{{northReferenceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Zoom</text>
<text class="info-panel__value">{{zoom}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Rotation</text>
<text class="info-panel__value">{{rotationText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Status</text>
<text class="info-panel__value">{{statusText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">GPS</text>
<text class="info-panel__value">{{gpsTrackingText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">GPS Coord</text>
<text class="info-panel__value">{{gpsCoordText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Renderer</text>
<text class="info-panel__value">{{renderMode}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Projection</text>
<text class="info-panel__value">{{projectionMode}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Auto Source</text>
<text class="info-panel__value">{{autoRotateSourceText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Calibration</text>
<text class="info-panel__value">{{autoRotateCalibrationText}}</text>
</view>
<view class="info-panel__row info-panel__row--stack">
<text class="info-panel__label">Tile URL</text>
<text class="info-panel__value">{{tileSource}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Center Tile</text>
<text class="info-panel__value">{{centerText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Tile Size</text>
<text class="info-panel__value">{{tileSizePx}}px</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Visible Tiles</text>
<text class="info-panel__value">{{visibleTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Ready Tiles</text>
<text class="info-panel__value">{{readyTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Memory Tiles</text>
<text class="info-panel__value">{{memoryTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Tiles</text>
<text class="info-panel__value">{{diskTileCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Cache Hit</text>
<text class="info-panel__value">{{cacheHitRateText}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Disk Hits</text>
<text class="info-panel__value">{{diskHitCount}}</text>
</view>
<view class="info-panel__row">
<text class="info-panel__label">Net Fetches</text>
<text class="info-panel__value">{{networkFetchCount}}</text>
</view>
<view class="control-row">
<view class="control-chip control-chip--primary" bindtap="handleRecenter">回到首屏</view>
<view class="control-chip control-chip--secondary" bindtap="handleRotationReset">旋转归零</view>
</view>
<view class="control-row">
<view class="control-chip {{gpsTracking ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleGpsTracking">{{gpsTracking ? '停止定位' : '开启定位'}}</view>
<view class="control-chip {{osmReferenceEnabled ? 'control-chip--active' : 'control-chip--secondary'}}" bindtap="handleToggleOsmReference">{{osmReferenceText}}</view>
</view>
<view class="control-row control-row--triple">
<view class="control-chip {{orientationMode === 'manual' ? 'control-chip--active' : ''}}" bindtap="handleSetManualMode">手动</view>
<view class="control-chip {{orientationMode === 'north-up' ? 'control-chip--active' : ''}}" bindtap="handleSetNorthUpMode">北朝上</view>
<view class="control-chip {{orientationMode === 'heading-up' ? 'control-chip--active' : ''}}" bindtap="handleSetHeadingUpMode">朝向朝上</view>
</view>
<view class="control-row">
<view class="control-chip control-chip--secondary" bindtap="handleCycleNorthReferenceMode">{{northReferenceButtonText}}</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'heading-up'}}">
<view class="control-chip" bindtap="handleAutoRotateCalibrate">按当前方向校准</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'manual'}}">
<view class="control-chip" bindtap="handleRotateStep">旋转 +15°</view>
</view>
</scroll-view>
</view>
<view class="control-row control-row--triple">
<view class="control-chip {{orientationMode === 'manual' ? 'control-chip--active' : ''}}" bindtap="handleSetManualMode">手动</view>
<view class="control-chip {{orientationMode === 'north-up' ? 'control-chip--active' : ''}}" bindtap="handleSetNorthUpMode">北朝上</view>
<view class="control-chip {{orientationMode === 'heading-up' ? 'control-chip--active' : ''}}" bindtap="handleSetHeadingUpMode">朝向朝上</view>
</view>
<view class="control-row">
<view class="control-chip control-chip--secondary" bindtap="handleCycleNorthReferenceMode">{{northReferenceButtonText}}</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'heading-up'}}">
<view class="control-chip" bindtap="handleAutoRotateCalibrate">按当前方向校准</view>
</view>
<view class="control-row" wx:if="{{orientationMode === 'manual'}}">
<view class="control-chip" bindtap="handleRotateStep">旋转 +15°</view>
</view>
</scroll-view>
</view>
</view>