墨卡托与等积地球投影的交互动画对比

本站独立编写，非作者原始提示词；涉及的世界地图数据文件需联网加载或按提示词里的备选方案处理。

请用D3.js写一个单文件HTML交互小工具：页面有一个滑块和一个播放按钮，世界地图在墨卡托投影（d3.geoMercator）与Equal Earth投影（d3.geoEqualEarth）之间平滑变形。滑块值t从0到1时对两种投影的输出坐标做线性插值，t=0纯墨卡托，t=1纯Equal Earth；播放按钮让t自动往返。画出经纬网格和大陆轮廓（可用world-atlas的land-110m TopoJSON，失败时给出内置简化轮廓的替代写法）。顶部显示当前混合比例和两端投影名。所有代码放在一个html文件里，双击即可运行。

本站独立编写的教学简化版：用圆柱等积投影和经纬网格代替真正的Equal Earth与海岸线，无外部依赖，保存即用。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"><title>墨卡托↔等积投影变形练习</title></head>
<body style="font-family:sans-serif">
<p>0=墨卡托投影　1=等积圆柱投影（简化练习，非真正的Equal Earth）</p>
<input id="t" type="range" min="0" max="1" step="0.01" value="0" style="width:400px">
<button id="play">播放</button>
<canvas id="c" width="800" height="460" style="border:1px solid #ccc"></canvas>
<script>
const ctx=document.getElementById('c').getContext('2d');
const MAXLAT=80*Math.PI/180;
const YMAX=Math.log(Math.tan(Math.PI/4+MAXLAT/2));
function merc(la,ph){return [la,Math.log(Math.tan(Math.PI/4+ph/2))];}
function cea(la,ph){return [la,Math.sin(ph)];}
function px(la,ph,t){
  const m=merc(la,ph),e=cea(la,ph);
  const X=(m[0]*(1-t)+e[0]*t+Math.PI)/(2*Math.PI)*760+20;
  const Y=(1-(m[1]*(1-t)+e[1]*t+YMAX)/(2*YMAX))*420+20;
  return [X,Y];
}
function line(a,b,c,d){
  ctx.beginPath();
  for(let i=0;i<=d;i++){
    const p=px(a(b,c,i/d)[0],a(b,c,i/d)[1],window.__t);
    i?ctx.lineTo(p[0],p[1]):ctx.moveTo(p[0],p[1]);
  }
  ctx.stroke();
}
function draw(t){
  window.__t=t;
  ctx.clearRect(0,0,800,460);
  ctx.strokeStyle='#9ab';
  for(let la=-180;la<=180;la+=30)
    line((b,c,f)=>[b*Math.PI/180,-MAXLAT+2*MAXLAT*f],la,0,100);
  for(let ph=-75;ph<=75;ph+=15)
    line((b,c,f)=>[-Math.PI+2*Math.PI*f,b*Math.PI/180],ph,0,120);
  ctx.fillStyle='#000';
  ctx.fillText('t='+t.toFixed(2)+(t<0.5?' 偏墨卡托（保形状，夸大高纬面积）':' 偏等积（保面积，压扁高纬形状）'),10,20);
}
const slider=document.getElementById('t');
slider.oninput=e=>draw(+e.target.value);
let anim=null;
document.getElementById('play').onclick=()=>{
  if(anim){clearInterval(anim);anim=null;return;}
  let t=+slider.value,dir=t>=1?-1:1;
  anim=setInterval(()=>{
    t+=dir*0.02;
    if(t>=1||t<=0)dir*=-1;
    slider.value=t;draw(t);
  },50);
};
draw(0);
</script>
</body>
</html>