D3.js 地理

地理（Geographic）

D3 的方法不同于所谓的栅格方法，例如Leaflet和 Google Maps。这些预渲染地图特征为图像瓦片，它们从网络服务器加载并在浏览器中拼凑在一起形成地图。

通常，D3以 GeoJSON 的形式请求矢量地理信息，并在浏览器中将其呈现为 SVG 或 Canvas。

光栅地图通常看起来更像传统的印刷地图，其中可以显示很多细节（例如地名、道路、河流等），而不会影响性能。但是，使用矢量方法更容易实现动画和交互等动态内容。（将这两种方法结合起来也很常见。）

• D3 映射概念：三个关键概念

1. GeoJSON（用于指定地理数据的基于 JSON 的格式）

2. 投影（从纬度/经度坐标转换为 x 和 y 坐标的函数）

3. 地理路径生成器（将 GeoJSON 形状转换为 SVG 或 Canvas 路径的函数）

GeoJSON 是一种使用 JSON 格式表示地理数据的标准，完整的规范位于geojson.org。每个要素都由几何（国家的简单多边形和廷巴克图的一个点）和属性组成。D3 在渲染 GeoJSON 时会处理大部分细节，因此只需对 GeoJSON 有基本的了解即可开始使用 D3 映射。

投影函数采用经度和纬度坐标（以数组的形式[lon, lat]）并将其转换为 x 和 y 坐标。投影数学可以变得相当复杂，但幸运的是 D3 提供了大量的投影函数。

地理路径生成器是一个接受 GeoJSON 对象并将其转换为 SVG 路径字符串的函数。可以使用该方法创建生成器.geoPath并使用投影功能对其进行配置。

• 地理JSON：

GeoJSON 是一种基于 JSON 的结构，用于指定地理数据。通常，它是使用mapshaper、ogr2ogr、shp2json或QGIS等工具从 shapefile 数据（一种广泛用于 GIS 领域的地理空间矢量数据格式）转换而来的。

shapefile 的一个来源是Natural Earth，如果开始，我建议尝试使用mapshaper来导入 shapefile 并导出为 GeoJSON。它还可以按属性过滤（例如，如果您想按大陆过滤国家）。

可以在不详细了解 GeoJSON 规范的情况下创建地图，因为诸如 mapshaper 和 D3 之类的工具可以很好地抽象出细节。

到目前为止，我们已经在示例文件中嵌入了 GeoJSON 对象。实际上，GeoJSON 将位于一个单独的文件中，并使用 ajax 请求加载。但在本章的其余部分，我们将使用以下方式加载 GeoJSON 文件：

• 预测：将球体（例如地球）上的点转换（或“投影”）到平面（例如屏幕）上的点的方法有很多。

  简而言之，没有完美的投影，因为每个投影都会扭曲形状、面积、距离和/或方向。选择投影是选择您不想扭曲的属性并接受其他属性会失真的情况（或选择努力平衡方法的投影）。例如，如果准确表示国家的大小很重要，那么选择一个努力保留面积的投影（可能以形状、距离和方向为代价）。

  D3 的核心预测：

  • geoAzimuthalEqualArea

  • geoAzimuthalEquidistant

  • geoGnomonic

  • geoOrthographic

  • geoStereographic

  • geoAlbers

  • geoConicConformal

  • geoConicEqualArea

  • geoConicEquidistant

  • geoEquirectangular

  • geoMercator

  • geoTransverseMercator

  核心投影具有用于设置以下参数的配置功能：

  规模	投影的比例因子
  中央	投影中心[经度、纬度]
  翻译	投影中心的像素 [x,y] 位置
  旋转	投影的旋转 [lambda, phi, gamma]（或 [yaw, pitch, roll]）

  每个参数的确切含义取决于每个投影背后的数学，但从广义上讲：

  • scale 指定投影的比例因子。数字越大，地图越大。

  • center 指定投影的中心（带[lon, lat]数组）

  • translate 指定投影中心在屏幕上的位置（带[x, y]数组）

  • rotate 指定投影的旋转（带[λ, φ, γ]数组），其中参数分别对应 yaw、pitch 和 roll

  可以使用投影的方法将像素坐标转换为经度/纬度数组

  .fitExtent()方法设置投影的比例和平移，以使几何形状适合给定的边界框

• 地理路径生成器

  • 渲染 SVG：1.将特征数组加入 SVGpath元素；2.使用地理路径生成器更新每个path元素的属性d

  • 渲染到画布：1.将canvasDOM 元素传递给生成器的context方法;2.开始一个画布路径（使用context.beginPath()）并调用geoGenerator它将产生必要的画布调用

  • 直线和圆弧：地理路径生成器可以区分多边形（通常用于地理区域）和点（通常用于经度/纬度位置）特征。它将多边形渲染为线段，将点渲染为弧。

  • 路径几何：地理路径生成器还可用于计算投影 GeoJSON 特征的面积（以像素为单位）、质心、边界框和路径长度（以像素为单位）：

• 形状：可以向地图添加线和/或圆。

• 球面几何

d3.geoInterpolate()函数接受 0 到 1 之间的输入并在两个[lon, lat]位置之间进行插值：

可以使用d3.geoContains接受 GeoJSON 功能和[lon, lat]数组并返回布尔值来检查鼠标或触摸事件是否发生在要素边界内(SVG渲染情况下有效)