为什么GeoJSON功能看起来像功能本身的负照片？ [英] Why do GeoJSON features appear like a negative photo of the features themselves?

问题描述

我有一个漂亮的标准代码，它读取GeoJSON文件，并使用D3.js呈现其功能。它运行得相当不错，除了使用此文件： https://github.com/regiskuckaertz/ d3 / blob / master / circonscriptions.json

I have a pretty standard code thats reads a GeoJSON file and renders its features using D3.js. It works fairly well except with this file: https://github.com/regiskuckaertz/d3/blob/master/circonscriptions.json

这个文件看起来并不奇怪，事实上你可以在GitHub或geojsonlint.com上预览。然而，D3绘制看起来像特征被用作剪辑掩码的路径，即所有形状都是特征本身的否定。代码是非常标准的，虽然：

The file doesn't look weird or anything, in fact you can preview it on GitHub or geojsonlint.com. However, D3 draws paths that look like the features were used as a clipping mask, i.e. all the shapes are negatives of the features themselves. The code is pretty standard though:

var proj = d3.geo.mercator()
  .scale(25000)
  .center([6.08642578125,49.777716951563754])
  .rotate([-.6, -.2, 0]);

var path = d3.geo.path().projection(proj);

function ready(error, luxembourg) {
  svg
    .selectAll("path")
    .data(luxembourg.features)
    .enter().append("path")
      .attr("d", path)
      .attr("class", function(d) { return quantize(rateById.get(d.properties.name)); })
}

你可以看看这里： http://jsfiddle.net/QWZXd/

相同的程式码

推荐答案

由于某些原因，这些多边形中的点是相反的顺序 - 它们应该是顺时针的，但是被定义为逆时针，并且d3遵循用于多边形解释的右手规则。

For some reason, the points in these polygons are in reverse order - they ought to be clockwise, but are defined as counterclockwise, and d3 follows the right-hand rule for polygon interpretation.

要修正，反转点，在文件或JS中：

To fix, reverse the points, either in the file or in JS:

luxembourg.features.forEach(function(feature) {
    feature.geometry.coordinates[0].reverse();
});

固定小提琴： http://jsfiddle.net/nrabinowitz/QWZXd/1/

这篇关于为什么GeoJSON功能看起来像功能本身的负照片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！