update task3
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
@@ -16,13 +16,19 @@
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background: #ffffff;
|
||||
}
|
||||
#map {
|
||||
background: #ffffff;
|
||||
}
|
||||
.legend {
|
||||
background: rgba(255, 249, 240, 0.95);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
|
||||
font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
border: 1px solid rgba(188, 108, 37, 0.25);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.legend .title {
|
||||
font-weight: 700;
|
||||
@@ -64,7 +70,9 @@
|
||||
const points = window.FIG1_POINTS || [];
|
||||
const links = window.FIG1_LINKS || [];
|
||||
if (!points.length) {
|
||||
alert("FIG1_POINTS 为空:请先运行 task3/08_visualize.py 生成 fig1_points.js,或确认该文件与本页面同目录。");
|
||||
alert(
|
||||
"Missing FIG1_POINTS: run `python task3/08_visualize.py` to generate `task3/fig1_points.js`, and ensure it is in the same directory as this HTML file."
|
||||
);
|
||||
}
|
||||
|
||||
const map = L.map("map", { preferCanvas: true });
|
||||
@@ -112,13 +120,13 @@
|
||||
fillColor: colorForPaired(p.is_paired),
|
||||
fillOpacity: 0.92,
|
||||
});
|
||||
marker.bindPopup(
|
||||
marker.bindPopup(
|
||||
`<div style="font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;">\n` +
|
||||
`<div style="font-weight:700;margin-bottom:6px;">${p.site_id}. ${p.site_name}</div>` +
|
||||
`<div><b>mu</b>: ${p.mu.toFixed(1)}</div>` +
|
||||
`<div><b>sigma</b>: ${p.sigma.toFixed(1)}</div>` +
|
||||
`<div><b>k</b>: ${p.k}</div>` +
|
||||
`<div><b>paired</b>: ${p.is_paired ? "yes" : "no"}</div>` +
|
||||
`<div><b>Mean (μ)</b>: ${p.mu.toFixed(1)}</div>` +
|
||||
`<div><b>Std (σ)</b>: ${p.sigma.toFixed(1)}</div>` +
|
||||
`<div><b>Annual visits (k)</b>: ${p.k}</div>` +
|
||||
`<div><b>Paired</b>: ${p.is_paired ? "Yes" : "No"}</div>` +
|
||||
`</div>`
|
||||
);
|
||||
siteLayer.addLayer(marker);
|
||||
@@ -146,7 +154,7 @@
|
||||
`<div style="font-weight:700;margin-bottom:6px;">Pair</div>` +
|
||||
`<div>${e.site_i_id}. ${e.site_i_name}</div>` +
|
||||
`<div>${e.site_j_id}. ${e.site_j_name}</div>` +
|
||||
`<div><b>distance</b>: ${e.distance.toFixed(2)} mi</div>` +
|
||||
`<div><b>Distance</b>: ${e.distance.toFixed(2)} mi</div>` +
|
||||
`</div>`
|
||||
);
|
||||
linkLayer.addLayer(line);
|
||||
@@ -159,14 +167,15 @@
|
||||
const legend = L.control({ position: "bottomleft" });
|
||||
legend.onAdd = function () {
|
||||
const pairedCount = points.filter((p) => p.is_paired).length;
|
||||
const linkCount = links.length;
|
||||
const div = L.DomUtil.create("div", "legend");
|
||||
div.innerHTML =
|
||||
`<div class="title">Task 3 Fig.1 配对地图(交互)</div>` +
|
||||
`<div class="row"><span><span class="swatch" style="background:${COLORS.paired}"></span>已配对站点</span><span>${pairedCount}</span></div>` +
|
||||
`<div class="row"><span><span class="swatch" style="background:${COLORS.unpaired}"></span>未配对站点</span><span>${points.length - pairedCount}</span></div>` +
|
||||
`<div class="muted">点大小: mu(线性缩放)</div>` +
|
||||
`<div class="title">Task 3 Fig.1 Pairing Map (Interactive)</div>` +
|
||||
`<div class="row"><span><span class="swatch" style="background:${COLORS.paired}"></span>Paired sites</span><span>${pairedCount}</span></div>` +
|
||||
`<div class="row"><span><span class="swatch" style="background:${COLORS.unpaired}"></span>Unpaired sites</span><span>${points.length - pairedCount}</span></div>` +
|
||||
`<div class="muted">Marker size: mean demand μ (linear scale)</div>` +
|
||||
`<div class="line"></div>` +
|
||||
`<div class="muted">连线: 34条配对(点击查看距离)</div>`;
|
||||
`<div class="muted">Links: ${linkCount} selected pairs (click for distance)</div>`;
|
||||
return div;
|
||||
};
|
||||
legend.addTo(map);
|
||||
|
||||
Reference in New Issue
Block a user