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

Posted 2021-04-09

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

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

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

在当前的js文件中，县对象使用弧和绘制美国地图上的不同点。在这里查看图片描述 - https://bl.ocks.org/mbostock/9943478

我有lat和long而不是arcs / polygons。因此，在json文件中，我将使用以下示例更改“countries”对象：

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

使用US json中的给定变换函数，我无法将给定坐标放在Map上的正确位置。

变换功能

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

所以，

1. 我怎样才能获得使用topojson的坐标的正确变换函数？

要么

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

答案

Topojson和坐标

我认为有一些关于topojson做什么的困惑：“我有拉特和长片而不是弧/多边形”。

Topojson节省空间我应用“整数坐标的量化delta编码”，但真正的空间节省可以来自弧的使用（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（或者如果它没有.prj文件那么形状文件），那么你就无法轻易搞清楚。在这种情况下，我们知道它是一个复合d3.geoAlbersUsa()投影，但我们不知道投影的参数，所以我们不能使用它，除非我们可以访问有关该文件的其他数据，或者我们自己制作并因此知道我们使用了什么参数。

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

2. 获取美国的未投影数据

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

完成后，您需要确保对所有功能应用相同的投影。

为什么缩放和翻译不帮助

topojson的缩放和平移也不是指投影参数，而是topojson中使用的量化delta编码。