143 lines
4.6 KiB
HTML
143 lines
4.6 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|||
|
|
<title>Task 1 Fig.1 (CartoDB + Leaflet)</title>
|
|||
|
|
<link
|
|||
|
|
rel="stylesheet"
|
|||
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|||
|
|
crossorigin=""
|
|||
|
|
/>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#map {
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.legend {
|
|||
|
|
background: rgba(255, 255, 255, 0.92);
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.legend .title {
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
.legend .row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.legend .bar {
|
|||
|
|
height: 10px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
/* warmer + more contrast */
|
|||
|
|
background: linear-gradient(90deg, #fce8c8, #f4a261, #e76f51, #9b2226);
|
|||
|
|
}
|
|||
|
|
.legend .muted {
|
|||
|
|
color: rgba(0, 0, 0, 0.65);
|
|||
|
|
margin-top: 6px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="map"></div>
|
|||
|
|
|
|||
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
|
|||
|
|
<script src="./fig1_points.js"></script>
|
|||
|
|
<script>
|
|||
|
|
const points = window.FIG1_POINTS || [];
|
|||
|
|
if (!points.length) {
|
|||
|
|
alert("FIG1_POINTS 为空：请确认 fig1_points.js 与本文件在同一目录。");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const map = L.map("map", { preferCanvas: true });
|
|||
|
|
|
|||
|
|
// CartoDB basemap (Positron)
|
|||
|
|
L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
|
|||
|
|
subdomains: "abcd",
|
|||
|
|
maxZoom: 20,
|
|||
|
|
attribution:
|
|||
|
|
'© <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
|||
|
|
}).addTo(map);
|
|||
|
|
|
|||
|
|
const kValues = points.map((p) => p.k);
|
|||
|
|
const muValues = points.map((p) => p.mu);
|
|||
|
|
const kMin = Math.min(...kValues);
|
|||
|
|
const kMax = Math.max(...kValues);
|
|||
|
|
const muMin = Math.min(...muValues);
|
|||
|
|
const muMax = Math.max(...muValues);
|
|||
|
|
|
|||
|
|
function clamp01(x) {
|
|||
|
|
return Math.max(0, Math.min(1, x));
|
|||
|
|
}
|
|||
|
|
function lerp(a, b, t) {
|
|||
|
|
return a + (b - a) * t;
|
|||
|
|
}
|
|||
|
|
function colorForK(k) {
|
|||
|
|
const t = clamp01((k - kMin) / (kMax - kMin || 1));
|
|||
|
|
// warm gradient: cream -> orange -> terracotta -> deep red
|
|||
|
|
const stops = [
|
|||
|
|
[252, 232, 200], // #fce8c8
|
|||
|
|
[244, 162, 97], // #f4a261
|
|||
|
|
[231, 111, 81], // #e76f51
|
|||
|
|
[155, 34, 38], // #9b2226
|
|||
|
|
];
|
|||
|
|
const n = stops.length - 1;
|
|||
|
|
const pos = t * n;
|
|||
|
|
const idx = Math.min(n - 1, Math.floor(pos));
|
|||
|
|
const tt = pos - idx;
|
|||
|
|
const from = stops[idx];
|
|||
|
|
const to = stops[idx + 1];
|
|||
|
|
const r = Math.round(lerp(from[0], to[0], tt));
|
|||
|
|
const g = Math.round(lerp(from[1], to[1], tt));
|
|||
|
|
const bl = Math.round(lerp(from[2], to[2], tt));
|
|||
|
|
return `rgb(${r},${g},${bl})`;
|
|||
|
|
}
|
|||
|
|
function radiusForMu(mu) {
|
|||
|
|
const t = clamp01((mu - muMin) / (muMax - muMin || 1));
|
|||
|
|
return lerp(5, 19, t);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const layer = L.featureGroup();
|
|||
|
|
for (const p of points) {
|
|||
|
|
const marker = L.circleMarker([p.lat, p.lng], {
|
|||
|
|
radius: radiusForMu(p.mu),
|
|||
|
|
color: "rgba(255,255,255,0.95)",
|
|||
|
|
weight: 1.2,
|
|||
|
|
fillColor: colorForK(p.k),
|
|||
|
|
fillOpacity: 0.9,
|
|||
|
|
});
|
|||
|
|
marker.bindPopup(
|
|||
|
|
`<div style="font: 13px/1.3 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>k</b>: ${p.k}</div>` +
|
|||
|
|
`</div>`
|
|||
|
|
);
|
|||
|
|
layer.addLayer(marker);
|
|||
|
|
}
|
|||
|
|
layer.addTo(map);
|
|||
|
|
map.fitBounds(layer.getBounds().pad(0.12));
|
|||
|
|
|
|||
|
|
const legend = L.control({ position: "bottomleft" });
|
|||
|
|
legend.onAdd = function () {
|
|||
|
|
const div = L.DomUtil.create("div", "legend");
|
|||
|
|
div.innerHTML =
|
|||
|
|
`<div class="title">Task 1 Fig.1</div>` +
|
|||
|
|
`<div class="row"><span>颜色: k</span><span>${kMin} → ${kMax}</span></div>` +
|
|||
|
|
`<div class="bar"></div>` +
|
|||
|
|
`<div class="muted">点大小: mu（线性缩放）</div>`;
|
|||
|
|
return div;
|
|||
|
|
};
|
|||
|
|
legend.addTo(map);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|