问题标签 [topojson]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
663 浏览

d3.js - Properly scale a vector to fit a raster layer

So I've created a clipped and reprojected raster image from a Natural Earth 2 data set. It is simple enough to set that as a base layer and project a vector layer on top of it. The problem I'm having is properly scaling the images so they align perfectly.

Please refer to this block for the example: http://bl.ocks.org/mkessy/8545864

Here is what I've done so far: Use gdalwarp to reproject the raster to Albers Equal Area and clip to the bounding box of North Dakota, output the image to my desired resolution (960 x 500) In D3 I use the exact same projection and overlay the vector onto the raster Now how do I go about adjusting the scale so that it properly aligns the 2 layers? I'm thinking it may do with the resolution of the original raster, perhaps I've distorted it by resizing? I know how to automatically compute scale based off the bounding box but it still doesn't fit the raster layer. I've looked at several examples and cannot figure out how the author computed the scales: see Costa Rica and the New York Times Border Graphic, 3/2/2013) (can't post link). In both cases the scale parameter passed to the d3.geo object is a magic integer as far as I can tell.

0 投票
1 回答
8931 浏览

javascript - 将标记放在使用 topoJSON 和 d3.js 生成的地图上

我正在创建一个特定状态的地图,我一直在尝试使用 d3.js 和 topojson 并创建了一个很棒的地图,但现在我想在地图上添加一个标记。

但是现在我遇到了问题,因为当我添加标记时,有一个 GeoJSON 文件可以将标记添加到生成的地图中,而且我想在按下标记时打开工具提示。

我的地图与此非常相似:http: //bl.ocks.org/mbostock/4699541,我想要的只是通过具有标记地理坐标的 GeoJSON 文件向各州添加标记。

所以地图目前是 所以地图目前是

预计地图... 预计地图...

0 投票
1 回答
2049 浏览

d3.js - d3.js:从点发出同心圆的地图

离开 d3.js 几个月了……我继承了一张简单的美国地图,其中包含其他人开始的功能。

这些特征由不同大小的简单点表示。

我想为每个点添加发射的同心圆,类似于 Mike Bostock 的经典 Onion 示例:http://bl.ocks.org/mbostock/4503672 (虽然看起来不那么不祥)

我在这里设置了一个块:http: //bl.ocks.org/mbostock/4503672

(不确定为什么块中的状态没有正确渲染,但这可能无关紧要。)

在迈克的例子中,只有一个点,所以我很难理解如何将他所做的翻译成我所拥有的(很多点)。

这是我的脚本:

迈克制作戒指的例子的关键部分是:

如何将圆环定位在点上?

0 投票
1 回答
933 浏览

d3.js - 基于 d3.js topojson 的 170 个国家的 choloropleth 地图。在选择时显示特定国家地图

我需要在基于 d3.js topojson 的 chloropleth 地图中显示 170 个国家/地区县/州级别的订单/收入/销售等数量。允许用户从下拉列表中选择国家,并应显示相应的国家 chloropleth 地图。

我必须为 170 个国家/地区实施类似于此 http://bl.ocks.org/thedod/4548858的方法。我将把这个 html 集成到 java j2ee 项目的 jsf 页面中。

  1. 当用户从下拉列表中选择一个国家/地区时,我是否必须创建 170 个 topojson 文件并按需加载。
  2. 有没有现成的数据库。如果我只是传递一个国家/地区名称/代码,只需返回该国家/地区的 topojson 和 admin2 详细信息。

请给我一个解决方案/更好的做法。我只想要基于开源java 的技术/库。

0 投票
1 回答
3248 浏览

javascript - 如何在 d3js 中控制地图上图层的顺序

我有一个关于使用 d3js 制作地图的简单问题。我想制作一个有两层的地图。一层是地图的轮廓(geoJson),另一层包含街道(topoJson)。我的问题是,街道层总是加载在轮廓层的前面,无论之前在代码中写的是哪一个。我想相反的情况:街道前面的轮廓层。我认为这个问题的发生是因为两个请求都是异步的,并且之前加载了轮廓层,因为它是最轻的。

这是代码...

是否可以先加载街道图层,等到街道绘制完成后再加载轮廓图层?提前致谢。

0 投票
2 回答
1517 浏览

leaflet - 传单:俄罗斯芬兰边境的 geoJson 覆盖错误

我正在使用来自 naturalearthdata.com 的 1:50m 文化矢量形状文件

我使用 ogr2ogr 使用以下命令创建 geoJson 文件:

然后我使用以下命令创建一个 topoJson 文件:

一旦我有了我的 topoJson 文件,我将它加载到 Leaflet:

我试过 1:50m 文件以及 Natural Earth 的 1:10m 文件。两者都给了我在芬兰边境颠倒的俄罗斯的这一部分。

在芬兰边境反转的俄罗斯部分

任何想法如何解决这个问题?谢谢

0 投票
1 回答
754 浏览

javascript - 如何翻译和包装d3.js世界地图二维投影

我们有一个项目,我们想显示矢量图,但将中心从子午线偏移,这样亚洲就更中心了。

我可以使用 d3.geo.equirectangular().center([-155.0, 0]) 来翻译地图,但是(显然)没有环绕,所以我们失去了斯堪的纳维亚东部的一切。

有没有一种方法可以使地图在 2D 投影中“包裹”而不渲染 2 个地图。

理想情况下,我不想使用地图平铺等,因为我们的要求相当简单,因为我们需要一个基本的整个地图和 1 或 2 级缩放以及可以是动态的图层。

0 投票
1 回答
1892 浏览

javascript - 使用 D3 制作多层地图

我正在尝试使用 topjson 加载 D3 地图,并将其加入一个单独的 CSV 文件,其中包含我想用来为地图着色的数据。我可以在多个图层之间切换,但每次都重新绘制地图。我已经搜索了有关如何执行此操作的一些线索,但我似乎无法弄清楚。任何人都可以提供任何帮助吗?

我想将 CSV 和 JSON 数据分开,以防我们想要动态编辑 CSV。我想一次性将相关课程添加到每个国家/地区,或者在用户在三个按钮之间切换时添加和删除课程。要么对我有用,我似乎不知道该怎么做。

这是我的代码的一个 jfiddle:http: //jsfiddle.net/2H7Pm/但是,我似乎对那里的 JSON 有一些语法问题。

示例地图确实可以在我的 github 上使用:http: //newamericafoundation.github.io/worldofdrones/

谢谢您的帮助!

0 投票
1 回答
2941 浏览

leaflet - 在 Leaflet 地图中使用 topoJSON

我正在学习如何使用 Leaflet 制作用于公共卫生目的的在线交互式地图(经验丰富的 ArcGIS 用户,Mapbox TileMill)。我慢慢来,所以我理解每段代码,并且我正在使用 Leaflet choropleth示例,因为我想制作 choropleth 地图。我坚持的当前任务是如何正确地将 topoJSON 数据添加到 Leaflet 地图。我已经尝试使用以下代码将美国状态 geoJSON 转换为 topoJSON,但它没有奏效。有什么建议么?

我已经查看了 topoJSON API参考,但我确信我一定是犯了一个简单的错误,因为我是 JavaScript 的初学者。谢谢大家的帮助!

最佳伊莱

0 投票
0 回答
964 浏览

d3.js - 如何通过 id 从 topjson 文件中隔离某个状态?

我正在使用 D3 创建美国地图并将其与国会选区重叠。我开始使用 Mike Bostock教程中的大部分代码。我现在正试图让用户在选择时只显示一种状态。我尝试了他的缩放示例,但效果不佳。我正在使用 Mike 的 us.json 文件(在我删除了不需要的县数据之后)。如何使用 D3 仅针对特定状态解析该文件。我看到每个州都有一个与之关联的 id。例如...

{"type":"Topology","objects":{"states":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","id":2,"arcs":[[[9426]],[[9427]],

我假设 id 是状态 fips 代码。

这是我使用 D3 的基准函数的代码片段。如您所见,我成功提取了状态 ID: