feat: 天地图瓦片缓存(tile-cache)、拓扑标注助手与文档更新
- tile-cache: 瓦片缓存服务(vec/cva)、启动探针、详细日志、上游超时可配置(UPSTREAM_TIMEOUT_MS) - central: docker-compose 集成 tile-cache，env.example 增加 TILE_CACHE_* / TIANDITU_TK - topology-editor: 天地图/缓存加载、GPS 安全来源错误提示、TIANDITU 文档(403/白名单、localhost 测试说明) - doc: README 部署步骤与 GPS 安全来源说明，TIANDITU_CONFIG 完善 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Super User
509
topology-editor/public/index.html
Normal file
509
topology-editor/public/index.html
Normal file
@@ -0,0 +1,509 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>拓扑标注助手（GPS → targets.csv）</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
sans-serif;
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
margin-top: 12px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.log {
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
#map-section {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#map-section h2 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
#map-container {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: #e8e8e8;
|
||||
}
|
||||
.map-tip {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding: 6px 12px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>拓扑标注助手</h1>
|
||||
<p style="font-size: 13px">
|
||||
与 central 同机运行时：先<strong>上传</strong>本机 <code>targets.csv</code>，在页面上选设备、补 GPS 或新建后<strong>下载</strong> CSV 部署到边缘。与 edge-agent 同机挂载 config 时可直接读写 <code>config/targets.csv</code>。
|
||||
</p>
|
||||
|
||||
<div id="upload-download-section" class="row" style="margin-top:12px; padding:10px; background:#f9f9f9; border-radius:6px;">
|
||||
<label>上传 / 下载 targets.csv</label>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
|
||||
<input type="file" id="csv-file" accept=".csv" style="width:auto; max-width:200px;" />
|
||||
<button id="btn-upload">上传 CSV</button>
|
||||
<a id="btn-download" href="/api/download" download="targets.csv" style="padding:8px 12px; font-size:14px; background:#0d6efd; color:#fff; text-decoration:none; border-radius:4px;">下载 targets.csv</a>
|
||||
</div>
|
||||
<p id="mode-hint" style="font-size:12px; color:#666; margin:8px 0 0 0;"></p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>选择已有设备（可选，推荐）</label>
|
||||
<select id="existing">
|
||||
<option value="">（新建设备）</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<p style="font-size: 13px">
|
||||
若是新建设备：先选上面的「（新建设备）」，再填写下列字段。
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<label>设备类型 (type)</label>
|
||||
<select id="type">
|
||||
<option value="topology">topology（哑设备/拓扑节点）</option>
|
||||
<option value="ping">ping（有 IP，可探测）</option>
|
||||
<option value="onvif">onvif（摄像头）</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>设备名称 (name，唯一标识)</label>
|
||||
<input id="name" placeholder="例如 core_sw_1 / camera_front" />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>角色 (role)</label>
|
||||
<select id="role">
|
||||
<option value="core_switch">core_switch</option>
|
||||
<option value="access_switch">access_switch</option>
|
||||
<option value="camera">camera</option>
|
||||
<option value="wireless_bridge">wireless_bridge</option>
|
||||
<option value="media_converter">media_converter</option>
|
||||
<option value="other">other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>上联设备名称 (parent，可留空)</label>
|
||||
<input id="parent" placeholder="例如 core_sw_1" />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>上联链路类型 (uplink_type)</label>
|
||||
<select id="uplink_type">
|
||||
<option value="">(无)</option>
|
||||
<option value="fiber">fiber（光纤）</option>
|
||||
<option value="copper">copper（铜缆）</option>
|
||||
<option value="wireless">wireless（无线）</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>IP（可选，ping/onvif 用）</label>
|
||||
<input id="ip" placeholder="192.168.x.x" />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>位置描述 (location，可选)</label>
|
||||
<input id="location" placeholder="例如：A栋3楼弱电井" />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>经度 (lon)</label>
|
||||
<input id="lon" readonly />
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<label>纬度 (lat)</label>
|
||||
<input id="lat" readonly />
|
||||
</div>
|
||||
|
||||
<button id="btn-gps">获取当前 GPS 坐标</button>
|
||||
<button id="btn-save">保存到 targets.csv</button>
|
||||
|
||||
<div class="log" id="log"></div>
|
||||
|
||||
<section id="map-section">
|
||||
<h2>地图校验</h2>
|
||||
<div class="row">
|
||||
<label>天地图 TK（<a href="https://console.tianditu.gov.cn/" target="_blank" rel="noopener">申请密钥</a>，填一次即可）</label>
|
||||
<input id="tianditu-tk" type="text" placeholder="请输入您的天地图 tk" />
|
||||
</div>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
|
||||
<button id="btn-load-map">加载天地图（直接）</button>
|
||||
<span id="cache-buttons" style="display:none;">
|
||||
<button id="btn-load-map-cache">加载天地图（使用服务器缓存）</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="map-container"></div>
|
||||
<p class="map-tip">点击地图可修正坐标；有经纬度后会自动打点并居中。</p>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const logEl = document.getElementById("log");
|
||||
const existingSelect = document.getElementById("existing");
|
||||
let existingTargets = [];
|
||||
let map = null;
|
||||
let marker = null;
|
||||
let accuracyCircle = null;
|
||||
let lastGpsAccuracyM = null;
|
||||
let mapSource = null;
|
||||
let leafletMap = null;
|
||||
let leafletMarker = null;
|
||||
let cacheBaseUrl = "";
|
||||
|
||||
function log(msg) {
|
||||
logEl.textContent = msg;
|
||||
}
|
||||
|
||||
function getTk() {
|
||||
return (document.getElementById("tianditu-tk").value || "").trim();
|
||||
}
|
||||
|
||||
function loadTiandituMap() {
|
||||
const tk = getTk();
|
||||
if (!tk) {
|
||||
log("请先填写天地图 TK 再加载地图。");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
localStorage.setItem("tianditu_tk", tk);
|
||||
} catch (e) {}
|
||||
if (window.T && window.T.Map) {
|
||||
initMap();
|
||||
return;
|
||||
}
|
||||
log("正在加载天地图…");
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://api.tianditu.gov.cn/api?v=4.0&tk=" + encodeURIComponent(tk);
|
||||
script.onload = function () {
|
||||
log("天地图加载成功，可点击地图修正坐标。");
|
||||
initMap();
|
||||
};
|
||||
script.onerror = function () {
|
||||
log("天地图加载失败，请检查 TK 或网络。");
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
if (map && mapSource === "tianditu") return;
|
||||
var T = window.T;
|
||||
if (!T || !T.Map) return;
|
||||
if (map) return;
|
||||
mapSource = "tianditu";
|
||||
map = new T.Map("map-container");
|
||||
map.centerAndZoom(new T.LngLat(116.4, 39.9), 12);
|
||||
map.addEventListener("click", function (e) {
|
||||
var ll = e.lnglat;
|
||||
var lat = Math.round(ll.lat * 1e6) / 1e6;
|
||||
var lon = Math.round(ll.lng * 1e6) / 1e6;
|
||||
document.getElementById("lat").value = lat;
|
||||
document.getElementById("lon").value = lon;
|
||||
updateMapMarker(lat, lon);
|
||||
log("已从地图点击设置坐标：lat=" + lat + ", lon=" + lon);
|
||||
});
|
||||
var latEl = document.getElementById("lat").value.trim();
|
||||
var lonEl = document.getElementById("lon").value.trim();
|
||||
if (latEl && lonEl) {
|
||||
var lat = parseFloat(latEl), lon = parseFloat(lonEl);
|
||||
if (!isNaN(lat) && !isNaN(lon)) updateMapMarker(lat, lon);
|
||||
}
|
||||
}
|
||||
|
||||
function loadLeafletThenInitCacheMap() {
|
||||
if (window.L && window.L.map) {
|
||||
initCacheMap();
|
||||
return;
|
||||
}
|
||||
log("正在加载地图库…");
|
||||
var link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
|
||||
link.integrity = "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=";
|
||||
link.crossOrigin = "";
|
||||
document.head.appendChild(link);
|
||||
var script = document.createElement("script");
|
||||
script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
|
||||
script.integrity = "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=";
|
||||
script.crossOrigin = "";
|
||||
script.onload = function () {
|
||||
log("使用服务器缓存加载天地图，可点击地图修正坐标。");
|
||||
initCacheMap();
|
||||
};
|
||||
script.onerror = function () { log("Leaflet 加载失败"); };
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
function initCacheMap() {
|
||||
if (leafletMap) return;
|
||||
if (!cacheBaseUrl) { log("未配置缓存服务"); return; }
|
||||
document.getElementById("map-container").innerHTML = "";
|
||||
map = null;
|
||||
marker = null;
|
||||
mapSource = "leaflet";
|
||||
leafletMap = L.map("map-container").setView([39.9, 116.4], 12);
|
||||
L.tileLayer(cacheBaseUrl + "/vec/{z}/{x}/{y}", { attribution: "© 天地图" }).addTo(leafletMap);
|
||||
L.tileLayer(cacheBaseUrl + "/cva/{z}/{x}/{y}", { attribution: "" }).addTo(leafletMap);
|
||||
leafletMap.on("click", function (e) {
|
||||
var lat = Math.round(e.latlng.lat * 1e6) / 1e6;
|
||||
var lon = Math.round(e.latlng.lng * 1e6) / 1e6;
|
||||
document.getElementById("lat").value = lat;
|
||||
document.getElementById("lon").value = lon;
|
||||
updateMapMarker(lat, lon);
|
||||
log("已从地图点击设置坐标：lat=" + lat + ", lon=" + lon);
|
||||
});
|
||||
var latEl = document.getElementById("lat").value.trim();
|
||||
var lonEl = document.getElementById("lon").value.trim();
|
||||
if (latEl && lonEl) {
|
||||
var lat = parseFloat(latEl), lon = parseFloat(lonEl);
|
||||
if (!isNaN(lat) && !isNaN(lon)) updateMapMarker(lat, lon);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMapMarker(lat, lon) {
|
||||
if (isNaN(lat) || isNaN(lon)) return;
|
||||
if (mapSource === "leaflet" && leafletMap) {
|
||||
if (leafletMarker) leafletMap.removeLayer(leafletMarker);
|
||||
leafletMarker = L.marker([lat, lon]).addTo(leafletMap);
|
||||
leafletMap.setView([lat, lon], 17);
|
||||
return;
|
||||
}
|
||||
if (window.T && map) {
|
||||
var T = window.T;
|
||||
if (marker) {
|
||||
map.removeOverLay(marker);
|
||||
marker = null;
|
||||
}
|
||||
if (accuracyCircle) {
|
||||
map.removeOverLay(accuracyCircle);
|
||||
accuracyCircle = null;
|
||||
}
|
||||
var lngLat = new T.LngLat(lon, lat);
|
||||
marker = new T.Marker(lngLat);
|
||||
map.addOverLay(marker);
|
||||
map.panTo(lngLat);
|
||||
map.setZoom(17);
|
||||
if (lastGpsAccuracyM != null && lastGpsAccuracyM > 0 && T.Circle) {
|
||||
try {
|
||||
accuracyCircle = new T.Circle(lngLat, lastGpsAccuracyM, {
|
||||
color: "#3388ff",
|
||||
weight: 1,
|
||||
opacity: 0.4,
|
||||
});
|
||||
map.addOverLay(accuracyCircle);
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fillFormFromTarget(t) {
|
||||
document.getElementById("type").value = t.type || "topology";
|
||||
document.getElementById("name").value = t.name || "";
|
||||
document.getElementById("role").value = t.role || "other";
|
||||
document.getElementById("parent").value = t.parent || "";
|
||||
document.getElementById("uplink_type").value = t.uplink_type || "";
|
||||
document.getElementById("ip").value = t.ip || "";
|
||||
document.getElementById("location").value = t.location || "";
|
||||
document.getElementById("lat").value = t.lat || "";
|
||||
document.getElementById("lon").value = t.lon || "";
|
||||
if (t.lat && t.lon) {
|
||||
var lat = parseFloat(t.lat), lon = parseFloat(t.lon);
|
||||
if (!isNaN(lat) && !isNaN(lon)) updateMapMarker(lat, lon);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExisting() {
|
||||
try {
|
||||
const resp = await fetch("/api/targets");
|
||||
if (!resp.ok) throw new Error("加载 targets.csv 失败");
|
||||
existingTargets = await resp.json();
|
||||
existingSelect.innerHTML =
|
||||
'<option value="">（新建设备）</option>' +
|
||||
existingTargets
|
||||
.map(
|
||||
(t) =>
|
||||
`<option value="${(t.name || '').replace(/"/g, '"')}">${(t.name || '')} (${t.type || ""} / ${t.role || ""})</option>`
|
||||
)
|
||||
.join("");
|
||||
log("已加载现有设备列表，可从下拉框选择后补充 GPS。");
|
||||
} catch (e) {
|
||||
log("加载现有设备失败：" + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
existingSelect.onchange = () => {
|
||||
const name = existingSelect.value;
|
||||
if (!name) {
|
||||
const lat = document.getElementById("lat").value;
|
||||
const lon = document.getElementById("lon").value;
|
||||
fillFormFromTarget({
|
||||
type: "topology",
|
||||
role: "other",
|
||||
lat,
|
||||
lon,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const t = existingTargets.find((r) => r.name === name);
|
||||
if (!t) return;
|
||||
fillFormFromTarget(t);
|
||||
};
|
||||
|
||||
document.getElementById("btn-gps").onclick = () => {
|
||||
if (!navigator.geolocation) {
|
||||
log("当前浏览器不支持 Geolocation。");
|
||||
return;
|
||||
}
|
||||
log("正在获取 GPS 坐标…");
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
const { latitude, longitude, accuracy } = pos.coords;
|
||||
document.getElementById("lat").value = latitude.toFixed(6);
|
||||
document.getElementById("lon").value = longitude.toFixed(6);
|
||||
lastGpsAccuracyM = accuracy != null ? accuracy : null;
|
||||
updateMapMarker(latitude, longitude);
|
||||
var acc = lastGpsAccuracyM != null ? "，精度约 " + Math.round(lastGpsAccuracyM) + " 米" : "";
|
||||
log("获取成功：lat=" + latitude + ", lon=" + longitude + acc + "。请在地图上核对位置，若有偏差可点击地图修正。");
|
||||
},
|
||||
(err) => {
|
||||
var msg = err.message || "";
|
||||
if (msg.indexOf("secure origins") !== -1 || msg.indexOf("secure context") !== -1) {
|
||||
log("获取定位失败：当前页面不是安全来源，浏览器不允许获取定位。请使用 https:// 访问本页，或在同一台电脑上用 http://localhost:4080 打开。");
|
||||
} else {
|
||||
log("获取定位失败：" + msg);
|
||||
}
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
timeout: 10000,
|
||||
maximumAge: 0,
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
document.getElementById("btn-load-map").onclick = loadTiandituMap;
|
||||
|
||||
document.getElementById("btn-load-map-cache").onclick = loadLeafletThenInitCacheMap;
|
||||
|
||||
document.getElementById("btn-upload").onclick = async () => {
|
||||
var fileInput = document.getElementById("csv-file");
|
||||
if (!fileInput.files || !fileInput.files[0]) {
|
||||
log("请先选择要上传的 CSV 文件。");
|
||||
return;
|
||||
}
|
||||
var form = new FormData();
|
||||
form.append("file", fileInput.files[0]);
|
||||
try {
|
||||
log("正在上传…");
|
||||
var r = await fetch("/api/upload", { method: "POST", body: form });
|
||||
var d = await r.json();
|
||||
if (!r.ok) throw new Error(d.error || "上传失败");
|
||||
log("已上传，共 " + (d.rows || 0) + " 条。");
|
||||
loadExisting();
|
||||
} catch (e) {
|
||||
log("上传失败：" + e.message);
|
||||
}
|
||||
};
|
||||
|
||||
(async function setModeHint() {
|
||||
try {
|
||||
var r = await fetch("/api/mode");
|
||||
var d = await r.json();
|
||||
var el = document.getElementById("mode-hint");
|
||||
el.textContent = d.mode === "file" ? "当前为「文件模式」：直接读写边缘 config/targets.csv，保存后自动执行脚本。" : "当前为「内存模式」：请先上传 targets.csv，编辑后可下载到本机再部署到边缘。";
|
||||
} catch (e) {}
|
||||
})();
|
||||
|
||||
(async function setMapConfig() {
|
||||
try {
|
||||
var r = await fetch("/api/map-config");
|
||||
var d = await r.json();
|
||||
if (d.cacheBaseUrl) {
|
||||
cacheBaseUrl = d.cacheBaseUrl;
|
||||
document.getElementById("cache-buttons").style.display = "inline";
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
|
||||
(function () {
|
||||
try {
|
||||
var saved = localStorage.getItem("tianditu_tk");
|
||||
if (saved) document.getElementById("tianditu-tk").value = saved;
|
||||
} catch (e) {}
|
||||
})();
|
||||
|
||||
document.getElementById("btn-save").onclick = async () => {
|
||||
const payload = {
|
||||
type: document.getElementById("type").value,
|
||||
ip: document.getElementById("ip").value.trim(),
|
||||
name: document.getElementById("name").value.trim(),
|
||||
role: document.getElementById("role").value,
|
||||
parent: document.getElementById("parent").value.trim(),
|
||||
uplink_type: document.getElementById("uplink_type").value,
|
||||
location: document.getElementById("location").value.trim(),
|
||||
lat: document.getElementById("lat").value.trim(),
|
||||
lon: document.getElementById("lon").value.trim(),
|
||||
};
|
||||
|
||||
if (!payload.name || !payload.type) {
|
||||
log("type 与 name 为必填。");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
log("正在保存并重建配置…");
|
||||
const resp = await fetch("/api/targets", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await resp.json();
|
||||
if (!resp.ok) {
|
||||
throw new Error(data.error || "请求失败");
|
||||
}
|
||||
log("已写入 edge-agent/config/targets.csv，并触发 update-configs.sh / csv-to-topology-geojson.sh。");
|
||||
loadExisting();
|
||||
} catch (e) {
|
||||
log("保存失败：" + e.message);
|
||||
}
|
||||
};
|
||||
|
||||
loadExisting();
|
||||
</script>
|
||||
Reference in New Issue
Block a user