这篇东西就是专门给那些被地图投影搞到头秃的开发者准备的，直接告诉你怎么在 D3 里正确配置 d3.geo.mercator，避免坐标偏移和变形让你怀疑人生。
说实话，刚入行那会儿做地理可视化，我总觉得这玩意儿能有多难？不就是画个图嘛。结果呢？被 d3.geo.mercator 坑得怀疑人生。那时候不懂啥是墨卡托投影的陷阱，随便拉个 d3.geo.mercator 就往页面上扔，结果高纬度地区拉得跟橡皮筋似的， Greenland 比 Africa 还大，同事在旁边笑我是不是对世界地图有啥误解。这种低级错误，我现在想起来还觉得脸红。
咱们干技术的，最怕的就是文档里写得模棱两可。D3 的文档确实经典，但有时候太简略。比如你初始化一个 d3.geo.mercator 对象，默认中心点是 [0,0]，缩放是 150。这看着挺正常，但如果你拿的是中国区域的数据，或者北美数据，这默认设置简直就是灾难。我有一次给客户做项目，用的是默认的 d3.geo.mercator，结果客户说地图怎么歪了，我盯着屏幕看了半天，才发现是中心点没对准。后来我学会了先算 centroid，再 setCenter，这样出来的图才正。
还有缩放比例的问题。很多人喜欢用 fitSize 或者 fitExtent，这俩函数确实好用，能自动适配容器大小。但是！如果你在里面嵌套了多个 d3.geo.mercator 实例，或者数据源坐标系不一致，那画面就裂开了。我见过有人为了追求视觉效果，把 scale 设得特别大，结果导致地图边缘出现严重的拉伸变形，看起来就像个扭曲的地球仪。这时候你就得权衡了，是要精准度还是要美观度。一般来说，对于中小比例尺地图，d3.geo.mercator 表现还算凑合，但一旦涉及极地或者大跨度区域，你就得考虑换 d3.geo.albersUsa 或者 d3.geo.conicConformal 了。
数据清洗也是个头疼的事儿。很多开源 GeoJSON 数据，坐标顺序可能是 [lon, lat]，也可能是 [lat, lon]，D3 默认是前者。你要是搞反了，地图直接炸裂，变成一条直线或者一堆乱码。我有一次接手前任的代码，里面全是硬编码的坐标转换逻辑，看着就头疼。后来我统一用 d3.geo.mercator 的投影转换功能，把数据统一标准化，虽然前期花点时间，但后期维护省心多了。
再说说性能。如果你的数据量特别大，比如几万个点，直接用 d3.geo.mercator 渲染可能会卡顿。这时候你得考虑简化数据，或者用 canvas 代替 SVG。我试过用 WebGL 加速，效果确实好，但开发成本也高。对于大多数中小项目，优化一下 d3.geo.mercator 的参数，比如减少不必要的重绘，也能提升不少流畅度。
总之，做地图可视化，别迷信默认配置。每个 d3.geo.mercator 实例都要根据你的数据特点去微调。中心点、缩放、旋转，这三个参数调好了，地图看着才舒服。别等到上线了才发现地图歪了，那时候再改代码，头发都要掉光了。
我见过太多人在这上面栽跟头，有的甚至因为地图显示问题被甲方骂得狗血淋头。其实只要稍微多花点时间研究一下投影原理，这些坑都能避开。别嫌麻烦，地理信息这东西，差之毫厘谬以千里。你现在的每一分细心，都是将来少掉的一根头发。
最后唠叨一句，别总觉得 d3.geo.mercator 是万能的。它有自己的局限，比如面积失真。如果你需要做面积统计，最好换个投影。别为了省事硬用，到时候数据不准，背锅的还是你。
本文关键词：d3.geo.mercator
