feat: initialize mini program map engine
This commit is contained in:
152
miniprogram/pages/map/map.wxml
Normal file
152
miniprogram/pages/map/map.wxml
Normal file
@@ -0,0 +1,152 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user