将坐标值放在 topojson 美国地图上

Question

我正在使用 react-d3-map-bubble 库来绘制美国地图。 反应库-https://github.com/react-d3/react-d3-map-bubble

使用的美国地图 json 文件 - https://d3js.org/us-10m.v1.json

我的目标是在那张地图上绘制点。

在当前的 js 文件中，counties 对象使用弧线并在美国地图上绘制不同的点。图片说明见这里-https://bl.ocks.org/mbostock/9943478

我有纬度和经度而不是弧/多边形。 因此，在 json 文件中，我将使用以下示例更改“国家”对象：

      {
        "type": "GeometryCollection",
        "geometries": [
            {
                "type": "Point",
                "properties": {
                    "name": "Some place in New Mexico",
                    "population": 54590
                },
                "arcs": [
                    []
                ],
                "coordinates":[33.500142,-111.929818]
            }
         ]
       }

使用美国 json 中的给定变换函数，我无法将给定坐标放置到地图上的正确位置。

变换函数

"transform": {
    "scale": [0.09996701564084985, 0.058373467440357915],
    "translate": [-56.77775821661018, 12.469025989284091]
}

所以，

1. 如何为使用 topojson 的坐标获得正确的变换函数？

或

1. 如何将所有坐标转换为弧/多边形，可以直接放置在“县”对象中？

Answer 1

Topojson 和坐标

我认为 topojson 的作用存在一些混淆：“我有纬度和经度而不是弧/多边形”。

Topojson 通过应用“整数坐标的量化增量编码”来节省空间，但真正的空间节省可以来自弧的使用（geojson 将包含两个特征的相互边界两次，每个特征一次）。但 d3 实际上并没有绘制 topojson，数据被转换回 geojson （如您的链接示例中所示）：

topojson.feature(us, us.objects.counties).features

如果从 geojson 移动到 topojson 并再次返回，您的原始坐标系保持不变。因此，如果您从 lat longs 开始，您将以 lat longs 结束。弧线和多边形不是替代坐标系，它们是使用任何给定坐标系中的坐标构建的形状。

问题

问题是您的 topojson 编码的坐标不是纬度和经度对 - 在这种情况下，它们是像素值，因此在 svg 坐标中从 [0,0] 延伸到 [960,600] 的坐标平面上绘制要素空间。 为什么他们会在这个不是经纬度的奇怪坐标空间中？这样您就不需要使用投影来绘制它们，这是faster in the browser 和更简单的示例，例如 Mike Bostock 可能试图在链接块中演示的内容。

topojson 使用投影坐标空间（位于二维笛卡尔平面上）。您的纬度经度使用地理坐标空间（它们是三维椭球上的点）。

解决方案

要将点转换为投影坐标空间，如果要对齐要素，则需要应用相同的投影。

或者，您可以获取美国的未投影数据，并使用相同的投影投影该数据和您的纬度经度点。

1. 将与美国相同的投影应用于每个点

通常情况下，如果 geojson 或 topojson（或 shapefile，如果它没有 .prj 文件）已经投影，您通常无法轻松弄清楚它使用什么投影。在这种情况下，我们知道它是一个复合 d3.geoAlbersUsa() 投影，但我们不知道投影的参数，因此我们不能使用它，除非我们可以访问有关文件的其他数据，或者如果我们自己制作它并且作为结果知道我们使用了哪些参数。

即使我们有这些信息，我们也可能会发现为不同的 svg/canvas 尺寸缩放地图很麻烦，因为我们需要以不同的方式缩放投影数据和未投影数据，因为我们将使用两个不同的坐标系。

1. 获取美国的非投影数据

在线查找美国各州/县/等的地理数据并不难。如果您找到 shapefile，它们很容易在 mapshaper.org 等工具中转换，尽管 geojson 或 topojson 文件也不难找到。您只需要确保坐标使用纬度经度对（顺序为[long,lat]，您问题中的示例坐标使用[lat,long]，这将不起作用。）而不是任何其他坐标系。

完成此操作后，您需要确保将相同的投影应用于所有功能。

为什么缩放和翻译没有帮助

topojson 的 scale 和 translate 也不是指投影参数，而是 topojson 中使用的量化 delta 编码。