2013-03-17 13 views
4

Моя цель - использовать d3 для генерации путей svg для каждой функции в данной коллекции объектов GeoJSON.Географические несоответствия GeoJSON между d3 и листом

Когда я рисую дорожки с помощью листовки, все функции выглядят идеально.

d3.json("ct_counties.geo.json", function(data) { 
    var leaflet_paths = leaflet_map.addLayer(new L.GeoJSON(data)); 
}); 

two maps

Но когда я карту пути с использованием d3, некоторые из особенностей выглядят неправильно.

d3.json("ct_counties.geo.json", function(collection) { 
    var bounds = d3.geo.bounds(collection); 

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

    var feature = g.selectAll("path") 
     .data(collection.features) 
     .enter().append("path") 
     .attr('class','county'); 

    d3_map.on("viewreset", reset); 

    reset(); 

    function project(x) { 
     var point = d3_map.latLngToLayerPoint(new L.LatLng(x[1], x[0])); 
     return [point.x, point.y]; 
    } 

    function reset() { 
     var bottomLeft = project(bounds[0]); 
     var topRight = project(bounds[1]); 
     svg.attr("width", topRight[0] - bottomLeft[0]) 
     .attr("height", bottomLeft[1] - topRight[1]) 
     .style("margin-left", bottomLeft[0] + "px") 
     .style("margin-top", topRight[1] + "px"); 
     g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")"); 
     feature.attr("d", path); 
    } 
}); 

Посмотреть отличительные отличия here.

И обратитесь к полному коду here.

Поскольку обе карты используют одну и ту же коллекцию функций, почему версия d3 неверна?

+2

Похоже, многоугольники интерпретируются по-разному. Из-за порядка очков. При ближайшем рассмотрении, похоже, что один пункт отсутствует в каждом полигоне. Вероятно, бит, где конец приклеивается к началу? – flup

ответ

22

D3 не ошибается, данные неверные и лифлет более снисходителен.

Принимая Litchfield (верхний левый графство) в качестве примера:

{ 
    "type" : "Feature", 
    "properties" : { 
     "kind" : "county", 
     "name" : "Litchfield", 
     "state" : "CT" 
    }, 
    "geometry" : { 
     "type" : "MultiPolygon", 
     "coordinates" : [ [ [ [ -73.0535, 42.0390 ], [ -73.0097, 42.0390 ], 
       [ -73.0316, 41.9678 ], [ -72.8892, 41.9733 ], 
       [ -72.9385, 41.8966 ], [ -72.9495, 41.8090 ], 
       [ -73.0152, 41.7981 ], [ -72.9823, 41.6392 ], 
       [ -73.1631, 41.5571 ], [ -73.1576, 41.5133 ], 
       [ -73.3219, 41.5078 ], [ -73.3109, 41.4694 ], 
       [ -73.3876, 41.5133 ], [ -73.4424, 41.4914 ], 
       [ -73.4862, 41.6447 ], [ -73.5191, 41.6666 ], 
       [ -73.4862, 42.0500 ] ] ] ] 
    } 
} 

мультиполигон не закрыта, ее конец не совпадает с началом. Я нанесены координаты, маркировка первой координаты красным, и последний один зеленый: points in the multipolygon

Как вы можете видеть, последняя координату получает отбрасывается d3.

GeoJSON specification говорит

LinearRing закрыта LineString с 4 или более положениях. Первая и последняя позиции эквивалентны (они представляют эквивалентные точки).

Так d3 имеет точку (не каламбур) и MultiPolygon должно быть закрыто, добавив начало координат в конце:

...[ -73.4862, 42.0500 ], [ -73.0535, 42.0390 ] ] ] ] 
+0

Спасибо @flup. Один момент разъяснения: я не предлагал d3, поскольку структура была неправильной; скорее, я имел в виду мою реализацию карты d3. – s2t2

+1

Этот ответ заслуживает многих пунктов – callum