mini-prog/miniprogram/pages/map/map.wxml

<view class="page">
  <view class="page__header">
    <view>
      <view class="page__eyebrow">CMR MINI PROGRAM</view>
      <view class="page__title">{{mapName}}</view>
    </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>

      <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>

        <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>
          <view class="compass-widget__label">{{sensorHeadingText}}</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">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">
      <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="control-row">
      <view class="control-chip control-chip--secondary" bindtap="handleToggleDebugPanel">{{showDebugPanel ? '隐藏调试' : '查看调试'}}</view>
    </view>

    <block wx:if="{{showDebugPanel}}">
      <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">
        <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">North Ref</text>
        <text class="info-panel__value">{{northReferenceText}}</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="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 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" 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>