map = { const NS = "http://www.w3.org/2000/svg"; // Outer container: holds svg + detail panel const container = html`

`; const svg = document.createElementNS(NS, "svg"); svg.setAttribute("viewBox", `-50 -25 ${width + 100} ${height + 120}`); svg.style.cssText = "width:100%;height:auto;display:block;cursor:default"; // Map body in a zoomable group; non-scaling-stroke keeps strokes thin when zoomed const scene = document.createElementNS(NS, "g"); scene.innerHTML = ` `; svg.appendChild(scene); // Marker layer: does not scale, so dots stay the same size const overlay = document.createElementNS(NS, "g"); svg.appendChild(overlay); container.appendChild(svg); // Detail panel (HTML overlay, top-right) const panel = html``; container.appendChild(panel); // Build the panel HTML for a city function panelHTML(d) { const esc = s => String(s).replace(/&/g,"&").replace(//g,">"); let h = `

${esc(d.name)}

`; if (d.dateRange) h += `

${esc(d.dateRange)}

`; for (const ev of d.events || []) { h += `

`; if (ev.date) h += `

${esc(ev.date)}

`; if (ev.title) h += `

${esc(ev.title)}

`; for (const g of ev.groups || []) { h += `

`; g.forEach((line, k) => h += `

${esc(line)}

`); h += `

`; } h += `

`; } return h; } // Each city's pixel coords on the un-zoomed map const pts = cities.map(d => projection([d.lon, d.lat])); let view = {k: 1, tx: 0, ty: 0}; // current zoom / pan let focused = -1; // Create markers const markers = cities.map((d, i) => { const g = document.createElementNS(NS, "g"); g.style.cursor = "pointer"; const outer = document.createElementNS(NS, "circle"); outer.setAttribute("r", 6); outer.setAttribute("fill", "#ac8368"); outer.setAttribute("stroke", "#fff"); outer.setAttribute("stroke-width", 1.5); const inner = document.createElementNS(NS, "circle"); inner.setAttribute("r", 2.5); inner.setAttribute("fill", "#fff"); const label = document.createElementNS(NS, "text"); label.setAttribute("x", 10); label.setAttribute("y", 4); label.setAttribute("font-size", 12); label.setAttribute("font-weight", 700); label.setAttribute("fill", "#fff"); label.setAttribute("stroke", "rgba(0,0,0,.6)"); label.setAttribute("stroke-width", 3); label.setAttribute("paint-order", "stroke"); label.textContent = d.name; label.style.display = "none"; g.append(outer, inner, label); g.addEventListener("click", (e) => { e.stopPropagation(); if (focused === i) { // 再次点击当前已聚焦的点 → 回到全图 resetView(); } else { zoomTo(i); } }); overlay.appendChild(g); return {g, label}; }); // Re-position map and markers according to current view function render() { scene.setAttribute("transform", `translate(${view.tx},${view.ty}) scale(${view.k})`); markers.forEach((m, i) => { const sx = view.tx + view.k * pts[i][0]; const sy = view.ty + view.k * pts[i][1]; m.g.setAttribute("transform", `translate(${sx},${sy})`); m.label.style.display = (i === focused) ? "" : "none"; }); } // Easing animation function animateTo(target, cb) { const start = {...view}, t0 = performance.now(), dur = 700; (function frame(now) { const t = Math.min(1, (now - t0) / dur); const e = t < .5 ? 2*t*t : 1 - Math.pow(-2*t+2, 2)/2; // easeInOutQuad view = { k: start.k + (target.k - start.k) * e, tx: start.tx + (target.tx - start.tx) * e, ty: start.ty + (target.ty - start.ty) * e, }; render(); if (t < 1) requestAnimationFrame(frame); else if (cb) cb(); })(t0); } // Reset to full-map view function resetView() { focused = -1; panel.style.display = "none"; animateTo({k: 1, tx: 0, ty: 0}); } // Zoom to city i function zoomTo(i) { focused = i; const k = 6; // zoom factor, increase for closer const [px, py] = pts[i]; animateTo({k, tx: width/2 - k*px, ty: height/2 - k*py}, () => { panel.innerHTML = panelHTML(cities[i]); panel.style.display = ""; }); render(); } // Click empty space to zoom back out svg.addEventListener("click", () => resetView()); render(); return container; }