Sid*_*rth 5 javascript maps d3.js topojson reactjs
我正在使用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]
}
]
}
Run Code Online (Sandbox Code Playgroud)
使用 US json 中给定的转换函数,我无法将给定的坐标放置到地图上的正确位置。
变换函数
"transform": {
"scale": [0.09996701564084985, 0.058373467440357915],
"translate": [-56.77775821661018, 12.469025989284091]
}
Run Code Online (Sandbox Code Playgroud)
所以,
或者
Topojson 和坐标
我认为对 topojson 的作用存在一些困惑:“我有纬度和经度而不是弧/多边形”。
Topojson 通过应用“整数坐标的量化增量编码”来节省空间,但真正的空间节省可以来自弧的使用(geojson 将包含两个特征的相互边界两次,每个特征一次)。但 d3 实际上并没有绘制 topojson,数据被转换回 geojson (如链接示例中所示):
topojson.feature(us, us.objects.counties).features
如果从 geojson 移动到 topojson 然后再返回,您的原始坐标系将保持不变。因此,如果您从经纬度开始,您将以经纬度结束。圆弧和多边形不是替代坐标系,它们是使用任何给定坐标系中的坐标构建的形状。
问题
问题是您的 topojson 编码的坐标不是纬度和经度对 - 在本例中它们是像素值,以便在 svg 坐标空间中从 到 延伸的坐标平面上绘制该[0,0]特征[960,600]。为什么它们会在这个奇怪的不是经纬度的坐标空间中?这样您就不需要使用投影来绘制它们,这在浏览器中速度更快,并且对于迈克·博斯托克(Mike Bostock)可能试图在链接块中演示的示例来说更简单。
topojson 使用投影坐标空间(位于二维笛卡尔平面上)。您的纬度经度使用地理坐标空间(三维椭球上的点)。
解决方案
要将点转换为投影坐标空间,如果您希望要素对齐,则需要应用相同的投影。
或者,您可以获取美国的未投影数据,并使用相同的投影来投影该数据和您的纬度经度点。
通常,如果 geojson 或 topojson(如果没有 .prj 文件,则为 shapefile)已经进行了投影,您无法轻松地弄清楚它使用什么投影。在本例中,我们知道它是复合d3.geoAlbersUsa()投影,但我们不知道投影的参数,因此我们无法使用它,除非我们可以访问有关该文件的其他数据,或者如果我们自己制作它因此知道我们使用了什么参数。
即使我们有这些信息,我们可能会发现针对不同的 svg/canvas 大小缩放地图很麻烦,因为我们需要以不同的方式缩放投影数据和未投影数据,因为我们将使用两个不同的坐标系。
在线查找美国州/县/等的地理数据并不太困难。如果您找到 shapefile,它们很容易在mapshaper.org 等工具中进行转换,尽管 geojson 或 topojson 文件也不难找到。您只需要确保坐标使用纬度经度对(顺序为[long,lat],问题中的示例坐标使用的[lat,long]将不起作用。)而不是任何其他坐标系。
一旦你有了这个,你需要确保对所有功能应用相同的投影。
为什么缩放和平移没有帮助
topojson的scale和平移也不是指投影参数,而是指topojson中使用的量化增量编码。
| 归档时间: |
|
| 查看次数: |
1672 次 |
| 最近记录: |