我正在使用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中的给定变换函数,我无法将给定坐标放在地图上的正确位置。
转换功能
"transform": {
"scale": [0.09996701564084985, 0.058373467440357915],
"translate": [-56.77775821661018, 12.469025989284091]
}
所以,
OR
答案 0 :(得分:3)
Topojson和坐标
我认为对于topojson的作用存在一些困惑:“我有lat和long而不是arcs / polygons”。
Topojson节省空间我应用“整数坐标的量化delta编码”,但实际节省的空间可以来自弧的使用(geojson将包含两个特征的相互边界两次,每个特征一次)。但是d3实际上没有绘制topojson,数据被转换回geojson(如链接示例所示):
topojson.feature(us, us.objects.counties).features
如果从geojson移动到topojson并再次返回,则原始坐标系保持不变。因此,如果你从lat longs开始,你将完成lat longs。弧和多边形不是替代坐标系,它们是在任何给定坐标系中使用坐标构建的形状。
<强>问题强>
问题是你的topojson编码的坐标不是纬度和经度对 - 在这种情况下它们是像素值,因此在从[0,0]
延伸到{{1}的坐标平面上绘制要素在svg坐标空间中。 为什么他们会在这个不是纬度经度的奇数坐标空间?因此,您不需要使用投影来绘制它们,这是faster in the browser并且更简单,例如Mike Bostock可能试图在链接块中演示。
topojson使用投影坐标空间(位于二维笛卡尔平面上)。纬度经度使用地理坐标空间(三维椭球上的点)。
<强>解决方案强>
要将点转换为投影坐标空间,如果要对齐要素,则需要应用相同的投影。
或者,您可以获取美国的未投影数据,并使用相同的投影预测该数据和您的纬度经度。
通常情况下,如果已经预测了geojson或topojson(或者如果它没有.prj文件那么形状文件),那么你无法轻易找出它的投影。在这种情况下,我们知道它是一个复合d3.geoAlbersUsa()投影,但我们不知道投影的参数,所以我们不能使用它,除非我们可以访问有关该文件的其他数据,或者我们自己创建它因此知道我们使用了什么参数。
即使我们有这些信息,我们也可能会发现为不同的svg / canvas尺寸缩放地图很麻烦,因为我们需要不同地缩放投影数据和未投影数据,因为我们将使用两个不同的坐标系。
在线查找美国州/县/等地理数据并不困难。如果你找到shapefile,它们很容易在mapshaper.org这样的工具中转换,虽然geojson或topojson文件也不难找到。您只需要确保坐标使用纬度经度对([960,600]
的顺序,问题中的示例坐标使用[long,lat]
这将无效。)而不是任何其他坐标系。
完成此操作后,您需要确保对所有功能应用相同的投影。
为什么缩放和翻译不帮助
topojson的比例和平移也不是指投影参数,而是topojson中使用的量化delta编码。