Files
cmr-mini/miniprogram/pages/map/map.wxml

153 lines
6.3 KiB
Plaintext

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