标签: topojson
从shape转换为topojson的问题
我想墨西哥城市的shape文件转换成topojson和使用d3.js使用本教程中显示它http://bost.ocks.org/mike/map/#converting-data.我设法转换它但我无法显示它.任何帮助将不胜感激.
这是我目前的工作流程:
1)下载并解压缩shapefile
wget http://mapserver.inegi.org.mx/MGN/mgm2010v5_0a.zip
unzip mgm2010v5_0a.zip
2)转换为JSON,重新投影到lat-long并对shapefile进行子集化
ogr2ogr -f GeoJSON -t_srs EPSG:4326 -where "CVE_ENT IN ('09')" df.json Municipios_2010_5A.shp
3)转换为topojson
topojson --id-property OID -p name=OID -p name -o df2.json df.json
4)并创建HTML代码
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 1160;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("df2.json", function(error, df2) {
svg.append("path")
.datum(topojson.feature(df2, df2.objects.df))
.attr("d", d3.geo.path().projection(d3.geo.mercator()));
});
</script>
如果我运行html我只是得到一个空白页面.关于我可能做错什么的任何想法？
推荐指数
解决办法
查看次数
缩放d3 v4地图以适合SVG(或根本不适合)
我试图让这个美国规模的地图变小.要么是我的SVG,要么是手动.
这是我最简单的代码:
function initializeMapDifferent(){
var svg = d3.select("#map").append("svg")
.attr("width", 1000)
.attr("height", 500);
d3.json("https://d3js.org/us-10m.v1.json", function (error, us){
svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("fill", "gray")
.attr("d", d3.geoPath());
});
}
我尝试过类似的东西:
var path = d3.geoPath()
.projection(d3.geoConicConformal()
.parallels([33, 45])
.rotate([96, -39])
.fitSize([width, height], conus));
但每次我在路径变量中添加任何东西时,我都会从D3的内部部分得到NAN错误.谢谢你的帮助!
推荐指数
解决办法
查看次数
topojson.object在topojson V1中
我玩topojson玩得很开心,但看起来topojson.object在topojson的V1中是未定义的,在V0中支持它.有人可以解释我如何解决这个问题吗？我试图在格式为topojson的输入文件中为每个多边形绘制不同的路径元素.代码是:
d3.json("maTopo.json", function(error, ma) {
svg.selectAll(".subunit")
.data(topojson.object(ma, ma.objects.ma).geometries)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);
});
推荐指数
解决办法
查看次数
D3js:如何设计地形图？
给定具有高程数据的GIS栅格,如何在D3js中设计地形图？
是否有使用D3js制作的耕地的浮雕/地形图的例子？
不工作:我探索了.tif > gdal_contour.py > .shp > topojson > d3js没有成功的可能性.
我使用包含所有命令的makefile.由于我感兴趣的区域(法国)是一片土地区域,因此该gdal_contour.py方法会产生破碎的等值线,而不会产生封闭的多边形.此外,SVG最终结果失败.我所知道的D3地形图的唯一例子是关于冰岛,它作为一个岛屿,避免了这个问题:将这个国家从世界上耕种不会导致破坏的等值线.
nb:这个项目是#Wikipedia #wikimaps项目的一部分.
推荐指数
解决办法
查看次数
使用横跨第180个子午线的传单显示GeoJSON
我正在尝试显示横跨第180个子午线的geoJSON对象(在本例中为俄罗斯的轮廓).目前,这部分国家/地区位于地图左侧,部分位于右侧:
看看传单,似乎有一个修复,但似乎不起作用:https://github.com/Leaflet/Leaflet/issues/82.我也试过添加一个coordsToLatLng函数,但似乎无法让它工作.平铺图层有一个continuousWorld我认为不适用于geoJSON对象的选项.
此数据位于:https://dl.dropboxusercontent.com/u/12085570/RUS.json.数据从shapefile生成到geojson,最后生成到topojson.转换topojson我使用的--no-stitch-poles选项让它在地图上显示"很好",这意味着它不会将右边的点连接到地图的左侧.
有没有办法让它显示为一个连续的对象而不会在子午线周围分裂？
推荐指数
解决办法
查看次数
Topojson - 新加坡和香港的Arcs
我注意到https://github.com/mbostock/topojson/tree/master/examples上的world-110m.json和world-110m2.json 没有新加坡和香港的路径.我查看了生成world-110m.json文件的Natural Earth数据集,并注意到新加坡列在tiny_countries文件中,但仅作为一个点,而不是多边形.普通国家/地区文件似乎不包括新加坡.但是,请注意 http://techslides.com/d3-world-maps-tooltips-zooming-and-queue/新加坡不是一个重点,而是一条道路.
我注意到上述链接有新加坡和香港的路径.但是,由于某些复杂的代码,我在使用该页面中的文件时遇到了一些问题,并且更愿意手动插入弧.
谢谢!
推荐指数
解决办法
查看次数
如何使用d3将topojson图层显示在传单中？
过去两天我一直试图在Leaflet上制作一张非常简单的地图,并且正在撞墙.
我有一个topoJSON文件,其中包含两个由以前的geoJSON文件构成的图层:5个状态的美国邮政编码,以及5个状态的多边形.
我想在Leaflet上显示这些内容,因为文件大小较小,使用邮政编码层,所以使用topoJSON而不是geoJSON很重要.
问题是我不能为我的生活让我的topoJSON文件中的较小的状态层显示在地图上.我在网上看了很多例子,并按照Mike Bostock的例子:https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/leaflet/index.html#L131-171.
我可以使用d3将文件显示在Web浏览器中,因此文件很好.我在脚本中使用了topoJSON的v1和topojson.feature方法.代码如下.我无法使topoJSON文件可用,但我认为它很好,因为我之前使用过d3.如果有人能够通过剧本发现一些不合适的东西,那就太好了.
谢谢.
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<title>Gulf Zip Codes</title>
</head>
<div id="map"></div>
<style type="text/css">
#map {
height: 800px;
}
path {
fill: #000;
fill-opacity: .1;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: #1f77b4;
fill-opacity: .4;
}
</style>
<body>
<script>
var map = L.map('map').setView([32.546813, -88.374023], 6);
L.tileLayer('http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append("svg"), …推荐指数
解决办法
查看次数
客户端topojson呈现看似不正确的路径
我一直在尝试使用合并的图层数据创建一个TopoJson文件,其中包含美国各州,郡和国会区等其他图层.
原始的.shp shapefile来自人口普查局的制图边界文件.
这些通过ogr2ogr转换为GeoJson.
然后通过节点服务器端库合并为TopoJson格式,量化为1e7,保留比例为0.15.到目前为止,没有任何问题的迹象.
我使用mapshaper查看最终的topojson文件,看起来似乎没问题:
但是,当尝试使用topojson客户端库和D3.geo.path()进行渲染时,我在congressionalDist层中遇到了一些奇怪的路径:(注意美国大陆,AK和HI周围的大矩形路径)
该页面的工作版本可以在这里找到:http://jsl6906.net/D3/topojson_problem/map/
一些相关的说明:
- 如果我更改我的topojson生成脚本以删除简化,那么路径似乎通过相同的d3.js页面正确显示
- 如果我在创建topojson时只保留congressionalDist图层,那么路径似乎通过相同的d3.js页面正确显示:
在尝试了我能够处理的尽可能多的故障排除之后,我想我会问这里有人看看是否有人遇到过任何类似的问题.谢谢你的帮助.
推荐指数
解决办法
查看次数
D3js:如何通过鼠标点击获取Lat/Log地理坐标？
在任何投影的地图数据中使用一些D3js代码和投影的topojson数据,我该如何找回地理坐标？这样的东西:
var svg = d3.select("#viz").append("svg:svg")
.attr("width", 320)
.attr("height", 200)
.on("mousedown", mousedown)
.on("click", mouselocation);
如何通过点击D3js地图可视化来获取地理坐标？
欢迎使用演示链接.
编辑:相关演示列表:
- OpenLayers演示 ......但我们D3js是什么.
- 杰森戴维斯/旋转/使用
projection.invert(d3.mouse(this))
推荐指数
解决办法
查看次数
使用D3.js仅渲染topojson地图的一部分
我正在使用D3.js库从US Census shapefile创建地图.我正在寻找创建一个完整的美国地图,这是没有问题的,以及每个州的地图.
我的工作流程使用人口普查数据,ogr2ogr在命令行根据需要进行了更改,然后由shpescape.com转换为topojson或geojson,因为topojson模块的node.js下载错误(请参阅下面的编辑解决方案)问题).
我的问题更多的是一个实用的问题而不是其他任何问题 - 当提供此代码时(以http://bl.ocks.org/mbostock/4707858为模型):
var width = 640,
height = 500;
var projection = d3.geo.albers();
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("mt_geo.json", function(error, mt_topo) {
var states = topojson.feature(mt_topo, mt_topo.objects.states),
state = states.features.filter(function(d) { return d.id === 34; })[0];
projection
.scale(1)
.translate([0,0]);
var b = path.bounds(state),
s = .95 / Math.max ((b[1][0]-b[0][0])/width, (b[1][1]-b[0][1])/height),
t = [(width-s*(b[1][0]+b[0][0]))/2, (height-s*(b[1][1]+b[0][1]))/2];
projection
.scale(s)
.translate(t);
svg.append("path")
.datum(states)
.attr("class", "feature")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, …推荐指数
解决办法
查看次数