Javascript GeoJSON格式的多边形显示不正确
我正在尝试使用d3.js和三个数据文件制作地图: 带有我的底图的简单.topojson文件 带有多边形区域的.geojson文件 一个包含数据的.csv文件,其字段与.geojson相同 首先,我用以下代码创建了我的底图:Javascript GeoJSON格式的多边形显示不正确,javascript,d3.js,queue,geojson,cartography,Javascript,D3.js,Queue,Geojson,Cartography,我正在尝试使用d3.js和三个数据文件制作地图: 带有我的底图的简单.topojson文件 带有多边形区域的.geojson文件 一个包含数据的.csv文件,其字段与.geojson相同 首先,我用以下代码创建了我的底图: var width = 360, height = 600, width2 = 479; var proj = d3.geo.mercator() .center([7.76, 48.57]) .scale(130000) .translate([w
var width = 360,
height = 600,
width2 = 479;
var proj = d3.geo.mercator()
.center([7.76, 48.57])
.scale(130000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(proj);
var svg = d3.select("#carte").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("strasbourg.json", function(error, base) {
svg.append("path")
.data(topojson.feature(base, base.objects.contour).features)
.attr("class", "fond-stras")
.attr("d", path);
结果很好,因此我将代码变得更复杂:
var width = 360,
height = 600,
width2 = 479;
var proj = d3.geo.mercator()
.center([7.76, 48.57])
.scale(130000)
.translate([width / 2, height / 2]);
// This array will be used to the next choropleth
var couleurs = ['rgb(165,15,21)','rgb(222,45,38)','rgb(251,106,74)',
'rgb(252,146,114)','rgb(252,187,161)','rgb(254,229,217)'];
var path = d3.geo.path()
.projection(proj);
var svg = d3.select("#carte").append("svg")
.attr("width", width)
.attr("height", height);
// I use queue.v1.min.js to load my .topojson, .geojson and .csv
queue()
.defer(d3.json,"strasbourg.json")
.defer(d3.json, "chute_ries.json")
.defer(d3.csv, "progression_riesk.csv")
.await(ready);
function ready(error,base,areas,results) {
// I declare my base map like before, it works always fine
svg.append("path")
.data(topojson.feature(base, base.objects.contour).features)
.attr("class", "fond-stras")
.attr("d", path);
// the problematic part begins here :
svg.append("g").attr("class","areas")
.selectAll("path")
.data(areas.features)
.enter()
.append("path")
.attr("class", "area")
.attr("d", path)
// I write this to test an automatic colouring
.attr("fill", function(d,i){
if (results[i].diff_ries<-23){
return couleurs[0]
}
else {return couleurs[4]
}
})
不幸的是,它不能像您在这里看到的那样工作:
尽管我做了很多努力,但我还是没能让它发挥作用。My.geojson是用QGis创建的,所以我想它尊重右手规则
我的控制台没有显示任何错误,因此我无法确定什么是错误的。我怀疑这可能是数据声明,但我见过几个例子,其中它是用.geojson数据编写的,工作得非常完美。这有点棘手,但问题来自我原始文件的投影:Lambert-93是一个法语参考,而不是脚本中精确的墨卡托
我用墨卡托投影重新保存了文件,一切都很好 在我看来,你的坐标不适合墨卡托投影。您可能在创建文件时使用了错误的投影。谢谢您的评论!我刚刚尝试在QGis上使用WGS84投影重新保存我的.geojson,但仍然不起作用:-。。。也许会有帮助。你是对的,拉尔斯,我有一个错误的投影区域。再次感谢!