use*_*795 3 shapefile map-projections d3.js
这是第一个topojson问题.我在渲染地图(纽约市区)时遇到问题,无法弄清楚原因.下面的代码只是这个示例的副本,带有不同的topojson文件.我在这里上传了这个文件.以下是有关我如何创建文件的详细信息.现在,我只是变得混乱.可能原因是topojson文件,但我不知道什么是错的.
ps:我无法将其标记为topojson因为之前未使用过该标记
TopoJSON文件
1)从这里下载shapefile
(在"自治市镇和社区区"下的文件"自治市镇"(左),ArcView Shapefile)
2)使用QGis简化shapefile
3)转换为TopoJSON
ogr2ogr -f geoJSON nybb-geo.json nybb.shp
topojson -o nybb.json nybb-geo.json
HTML/JS代码
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.boundary {
fill: none;
stroke: #000;
stroke-width: .5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var path = d3.geo.path();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/geo/nybb.json", function(error, topology) {
svg.append("path")
.datum(topojson.object(topology, topology.objects['nybb-geo'].geometries[0]))
.attr("d", path)
.attr("class", "boundary");
});
</script>
正如用户10579的评论所建议的,我能够通过将shapefile重新投影到NAD83(EPSG 4269)来解决问题.从重新投影的shapefile创建topojson文件后,d3.js显示地图
var projection = d3.geo.albers();
var path = d3.geo.path().projection(projection);
我遇到的第二个问题与正确的中心,比例和翻译值有关.使用上面的代码,nyc将只是一个带有大量空白区域的小点.找到正确的中心,比例和翻译值可能有点单调乏味.最后,我添加了下面的代码,它允许您拖放地图并滚动以更改比例参数.每次更改后都会显示这些值,以便将地图放在正确的位置,并从控制台输出中采用最后一个参数.
svg.call(d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.on("zoom", redraw));
function redraw() {
if (d3.event) {
projection
.translate(d3.event.translate)
.scale(d3.event.scale);
}
map.datum(topojson.object(topology, topology.objects.nyct2010))
.attr("d", path)
.attr("class", "boundary");
console.log("Current scale:" + projection.scale())
console.log("Current translate:" + projection.translate())
console.log("Current rotate:" + projection.rotate())
}
| 归档时间： |
|
| 查看次数： |
3820 次 |
| 最近记录： |