Add mock GPS simulator and configurable location sources
This commit is contained in:
125
tools/mock-gps-sim/public/index.html
Normal file
125
tools/mock-gps-sim/public/index.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Mock GPS Simulator</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<aside class="panel">
|
||||
<div class="panel__header">
|
||||
<div class="panel__eyebrow">MOCK GPS SIM</div>
|
||||
<h1>外部模拟器</h1>
|
||||
<div id="socketStatus" class="badge badge--muted">未连接</div>
|
||||
</div>
|
||||
|
||||
<section class="group">
|
||||
<div class="group__title">资源加载</div>
|
||||
<label class="field">
|
||||
<span>游戏配置 URL</span>
|
||||
<input id="configUrlInput" type="text" value="https://oss-mbh5.colormaprun.com/wxmini/test/game.json">
|
||||
</label>
|
||||
<div class="row">
|
||||
<button id="loadConfigBtn" class="btn btn--primary">载入配置</button>
|
||||
<button id="fitCourseBtn" class="btn">适配视野</button>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>瓦片模板</span>
|
||||
<input id="tileUrlInput" type="text" placeholder="https://host/tiles/{z}/{x}/{y}.webp">
|
||||
</label>
|
||||
<div class="row">
|
||||
<button id="applyTilesBtn" class="btn">应用瓦片</button>
|
||||
<button id="resetTilesBtn" class="btn">恢复 OSM</button>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>KML URL</span>
|
||||
<input id="courseUrlInput" type="text" placeholder="https://host/course/c01.kml">
|
||||
</label>
|
||||
<div class="row">
|
||||
<button id="loadCourseBtn" class="btn">载入控制点</button>
|
||||
<button id="clearCourseBtn" class="btn">清空控制点</button>
|
||||
</div>
|
||||
<div id="resourceStatus" class="hint">支持直接载入 game.json，也支持单独填瓦片模板和 KML 地址。</div>
|
||||
<div id="resourceDetail" class="group__status">尚未载入资源</div>
|
||||
<div id="courseJumpList" class="jump-list"></div>
|
||||
</section>
|
||||
|
||||
<section class="group">
|
||||
<div class="group__title">实时发送</div>
|
||||
<div id="realtimeStatus" class="group__status">桥接未连接</div>
|
||||
<div id="lastSendStatus" class="group__status">最近发送: --</div>
|
||||
<div class="row">
|
||||
<button id="connectBtn" class="btn btn--primary">连接桥接</button>
|
||||
<button id="sendOnceBtn" class="btn">发送一次</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="streamBtn" class="btn btn--accent">开始连续发送</button>
|
||||
<button id="stopStreamBtn" class="btn">停止发送</button>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>发送频率</span>
|
||||
<select id="hzSelect">
|
||||
<option value="2">2 Hz</option>
|
||||
<option value="5" selected>5 Hz</option>
|
||||
<option value="10">10 Hz</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>精度 (m)</span>
|
||||
<input id="accuracyInput" type="number" min="1" max="100" value="6">
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section class="group">
|
||||
<div class="group__title">路径回放</div>
|
||||
<div id="playbackStatus" class="group__status">路径待命</div>
|
||||
<input id="trackFileInput" class="file-input-hidden" type="file" accept=".gpx,.kml,.geojson,.json,application/json,application/gpx+xml,application/vnd.google-earth.kml+xml">
|
||||
<div class="row">
|
||||
<button id="importTrackBtn" class="btn">导入轨迹文件</button>
|
||||
<button id="togglePathModeBtn" class="btn">开启路径编辑</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="clearPathBtn" class="btn">清空路径</button>
|
||||
<button id="fitPathBtn" class="btn">适配路径</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="playPathBtn" class="btn btn--accent">开始回放</button>
|
||||
<button id="pausePathBtn" class="btn">暂停回放</button>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span>移动速度 (km/h)</span>
|
||||
<input id="speedInput" type="number" min="1" max="25" step="0.1" value="6">
|
||||
</label>
|
||||
<label class="field field--check">
|
||||
<input id="loopPathInput" type="checkbox" checked>
|
||||
<span>循环回放</span>
|
||||
</label>
|
||||
<div id="pathHint" class="hint">点击“开启路径编辑”后，在地图上逐点添加路径。</div>
|
||||
</section>
|
||||
|
||||
<section class="group">
|
||||
<div class="group__title">当前位置</div>
|
||||
<div class="stat"><span>纬度</span><strong id="latText">--</strong></div>
|
||||
<div class="stat"><span>经度</span><strong id="lonText">--</strong></div>
|
||||
<div class="stat"><span>航向</span><strong id="headingText">--</strong></div>
|
||||
<div class="stat"><span>路径点</span><strong id="pathCountText">0</strong></div>
|
||||
</section>
|
||||
|
||||
<section class="group">
|
||||
<div class="group__title">日志</div>
|
||||
<div id="log" class="log"></div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<main class="map-shell">
|
||||
<div id="map"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="./simulator.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user