d3-geo
地图投影有时作为点变换来实现:一个函数接受给定的经度 lambda 和纬度 phi,并返回平面上的对应 xy 位置。例如,这里是球面墨卡托投影(以弧度为单位):
🌐 Map projections are sometimes implemented as point transformations: a function that takes a given longitude lambda and latitude phi, and returns the corresponding xy position on the plane. For instance, here is the spherical Mercator projection (in radians):
function mercator(lambda, phi) {
const x = lambda;
const y = Math.log(Math.tan(Math.PI / 4 + phi / 2));
return [x, y];
}如果你的几何图形仅由点组成,这是一个合理的方法。但对于多边形和折线等离散几何图形呢?
🌐 This is a reasonable approach if your geometry consists only of points. But what about discrete geometry such as polygons and polylines?
离散几何在从球面投影到平面时引入了新的挑战。球面多边形的边是测地线(大圆弧段),而不是直线。除了平射投影外,测地线在所有地图投影中都会变成曲线,因此准确投影需要沿每条弧进行插值。D3使用受Visvalingam线简化方法启发的自适应采样来平衡精度和性能。
🌐 Discrete geometry introduces new challenges when projecting from the sphere to the plane. The edges of a spherical polygon are geodesics (segments of great circles), not straight lines. Geodesics become curves in all map projections except gnomonic, and thus accurate projection requires interpolation along each arc. D3 uses adaptive sampling inspired by Visvalingam’s line simplification method to balance accuracy and performance.
多边形和折线的投影还必须处理球面与平面之间的拓扑差异。一些投影需要切割穿过180度经线的几何体,而另一些投影则需要将几何体裁剪到大圆。球面多边形还需要一个绕向顺序约定来确定多边形的哪一侧是内部:小于半球的多边形的外环必须顺时针,大于半球的多边形的外环则必须逆时针。表示孔的内环必须使用其外环的相反绕向顺序。
🌐 The projection of polygons and polylines must also deal with the topological differences between the sphere and the plane. Some projections require cutting geometry that crosses the antimeridian, while others require clipping geometry to a great circle. Spherical polygons also require a winding order convention to determine which side of the polygon is the inside: the exterior ring for polygons smaller than a hemisphere must be clockwise, while the exterior ring for polygons larger than a hemisphere must be anticlockwise. Interior rings representing holes must use the opposite winding order of their exterior ring.
D3 使用球面 GeoJSON 来表示 JavaScript 中的地理特性。D3 支持各种 常见 和 不常见 的地图投影。而且由于 D3 使用球面几何来表示数据,你可以通过旋转几何将任何方面应用到任何投影上。
🌐 D3 uses spherical GeoJSON to represent geographic features in JavaScript. D3 supports a wide variety of common and unusual map projections. And because D3 uses spherical geometry to represent data, you can apply any aspect to any projection by rotating geometry.
请参阅以下之一:
🌐 See one of:
- Paths - 从 GeoJSON 生成 SVG 路径数据
- 投影 - 将球面几何投射到平面上
- Streams - 转换(球面或平面)几何
- 形状 - 生成圆形、直线和其他球面几何
- 球面数学 - 球面几何的底层方法
TIP
要将 shapefile 转换为 GeoJSON,请使用 shp2json,它是 shapefile 包 的一部分。有关 d3-geo 及相关工具的介绍,请参见 命令行制图。另请参阅 TopoJSON,这是 GeoJSON 的扩展,更加紧凑,并且编码了拓扑结构。
小心
D3 的绕点顺序约定也被 TopoJSON 和 ESRI shapefile 使用;然而,它与 GeoJSON 的 RFC 7946 的约定相反。另请注意,标准 GeoJSON WGS84 使用平面等距矩形坐标,而不是球面坐标,因此可能需要 拼接 来消除反经线切割。