我在绘制从 data.seattle.gov 获取的 GeoJSON 文件时遇到问题。具体来说，我正在使用可以找到的 Shape 文件 here .我将其转换为 GeoJSON 文件，并在下面提供了一个小示例。
通过使用 D3，我希望绘制出西雅图的不同区域(实际上我不完全确定它应该是什么，这就是我绘制它的原因......哈......)但是尽管路径计算正确，但出于某种原因，它没有正确显示。
我已经托管了我的示例 here .当我有时间设置它时，我会尝试用 jsFiddle 替换这个链接。问题是，GeoJSON 文件非常大，所以我认为 jsFiddle 不是理想的选择。
我的代码非常简单...我只是根据 GeoJSON 文件的特性附加路径。
var width = 1000,
height = 1000;
var svg = d3.select("body")
.append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
var projection = d3.geo.mercator()
.scale(150)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("geojson/data.geo.json", function(data) {
console.log(data);
g.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "5px")
.attr("fill-opacity", 0);
});
不幸的是，我觉得它只显示了一条路径，而不是所有路径。起初我认为这可能是因为有某种填充，它们只是隐藏在彼此之上，但我将 fill-opacity 设置为 0 并且这也没有帮助。
这是 GeoJSON 文件的一个小样本。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-122.349453,
47.717771
],
[
-122.34948,
47.719585
],
[
-122.349504,
47.721403
],
[
-122.350214,
47.721404
],
...
[
-122.350337,
47.721405
],
[
-122.350258,
47.71596
],
[
-122.349425,
47.715958
],
[
-122.349453,
47.717771
]
]
]
},
"properties": {
"name": "B1",
"styleUrl": "#PolyStyle00",
"styleHash": "-59c62042",
"description": "<html xmlns:fo=\"http://www.w3.org/1999/XSL/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\">\n\n<head>\n\n<META http-equiv=\"Content-Type\" content=\"text/html\">\n\n</head>\n\n<body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\">\n\n<table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100;border-collapse:collapse;padding:3px 3px 3px 3px\">\n\n<tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\">\n\n<td>B1</td>\n\n</tr>\n\n<tr>\n\n<td>\n\n<table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100;border-spacing:0px; padding:3px 3px 3px 3px\">\n\n<tr>\n\n<td>FID</td>\n\n<td>0</td>\n\n</tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>BEAT</td>\n\n<td>B1</td>\n\n</tr>\n\n<tr>\n\n<td>PRECINCT</td>\n\n<td>N</td>\n\n</tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>Shape_Leng</td>\n\n<td>53375.265498</td>\n\n</tr>\n\n</table>\n\n</td>\n\n</tr>\n\n</table>\n\n</body>\n\n</html>\n\n"
}
},
...
最后画出来的是这个……
如有任何帮助，我们将不胜感激。
编辑:抱歉，我的学生帐户似乎从很久以前就不见了。我可以稍后尝试重新创建示例。
最佳答案
我看过你的问题。问题似乎出在 map 上。我遇到了和你一样的问题，尽管我在你链接到的网站上从旧的(2008 年之前的)文件创建 map 没有问题。 Mapshaper (mapshaper.org) 绘制两个图都没有问题，所以问题似乎出在 d3 和这张特定 map 上。我没有时间去探究其中的原因。
使用 mapshaper 简化 map (这是您可能想做的事情)似乎可以生成可以正确绘制的 map :
ogr2ogr -f GeoJSON map_tmp.json spd_beats_wgs84.kmz
mapshaper -p 0.5 --repair -o map.json map_tmp.json
然后我可以使用以下代码绘制 map :
var width = 800;
var height = 500;
var vis = d3.select("#vis").append("svg")
.attr("width", width).attr("height", height);
d3.json("map.json", function(map) {
var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
var path = d3.geo.path().projection(projection);
var bounds = path.bounds(map);
var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
(bounds[1][1] - bounds[0][1]) / height);
var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
(height - scale * (bounds[1][1] + bounds[0][1])) / 2];
projection.scale(scale).translate(transl);
vis.selectAll("path").data(map.features).enter().append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
});
导致:
关于javascript - D3 - 大型 GeoJSON 文件未使用投影正确显示绘制 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23953366/