D3js Карта: GeometryCollection Vs FeaturesCollection

Question

Я рисовал карты в течение нескольких недель, но каждый раз у меня был такой файл geojson (Featurecollection). Basicaly несколько массивов координат для различных районов Касабланки (в моем примере)

{ "типа": "FeatureCollection", "СВК": { "типа": "имя", "свойства": { " имя ":" urn: ogc: def: crs: OGC: 1.3: CRS84 "}}," features ": [{ " type ":" Feature "," properties ": {" name ":" sid elkhader " "arrondissement": «Hay Hassani», «префектура»: «Hay Hassani», «Население»: 18930, «площадь»: 1616340.045}, «geometry»: { «type»: «Polygon», : [ ], [-7,690712466572602, 33,55630146957499], [-7,69193172454834, 33,557239049346535], [-7,6959228515625, 33,56135167528992], [-7,696309089660644, 33,561208630718284], [-7,696545124053955, 33,561494719624619], [-7,697145938873291, 33,561584122213503], [-7,698111534118651, 33,562549664276048], [-7,696180343627932, 33,56406947713436], [-7,698715871374095, 33,566658445267336], [-7,697645503668443, +33,567405785590324], [-7,697098054802192, 33,567712878788591], [-7,696259117371391, +33,568261506969215], [ -7,69601151134932 5, 33,5683181977139], [-7,697387200000034, 33,570266599999982], [-7,696740007740531, +33,570256969950947], [-7,695561836061942, 33,570528261065235], [-7,694268410063101, 33,570921223641093], [-7,693596744041679, 33,571075056616195], [-7,692447518598163, +33,571143296338079], [-7,69142000156123, +33,571163408675481], [-7,690155388704593, 33,57138033300906], [-7,689247978305328, 33,571612665313971], [-7,688806874513382, 33,571727285593433], [-7,688311409275937, 33,571857958148009], [-7,687409400000027, 33,572054400000049] , [-7,687391678068598, 33,572059961946792], [-7,684979438782096, 33,568718150423749], [-7,683219909667969, 33,565678661594823], [-7,683406457011668, 33,563482296958043], [-7,683829534164441, 33,562429900601146], [-7,686476562432639, 33,559325447129368] ]]} }, {«type»: «Feature», «properties»: {«name»: «nassim», «arrondissement»: «Hay Hassani», «префектура»: «Hay Hassani», «Население»: 18898, площадь ": 4776317.152}, "геометрии": { "Тип": "Многоугольник", "координаты": [ [ [-7,665259712372787, 33,530737914470194], [-7,663579428308825, 33,5378162517151], [-7,660416146883682, +33,53687582432655], [-7,653830735645996, 33,533727400613216], [-7,653876700000025, 33,5326443], [-7,65348, +33,531745500000149], [-7,653190299999866, +33,529947799999803], [-7,652943599999785, 33,528677899999671], [ -7.653615699999913, 33526604099999851], [-7.653936200000107, 33.525365200000174], [-7.654509399999957, 33.5241387], [-7.655106500000205, 33.522667000000347], [-7,656280299999967, 33,520306199999879], [-7,656956199999512, 33,519349099999339], [-7,658114900000093, 33,517926900000134], [-7,658983900000114, 33,516343700000149], [-7,659490200000375, 33,515535600000646], [-7,6601104, 33,5145457] , [-7,660947299999948, 33,513347099999926], [-7,662599500000061, +33,511602700000104], [-7,664262500000047, 33,510654500000086], [-7,666333199999984, 33,509563099999966], [-7,668178499999983, 33,50827], [-7,668900600000119, 33,507543800000242], [-7.669823299999847, 33 0,506934599999816], [-7,670733100000266, 33,507059900000414], [-7,673713600000018, 33,50863970000001], [-7,676073900000079, 33,509053], [-7,68223779133892, 33,508502572767156], [-7,684989189541704, 33,508844023847608], [-7,683734893798827, +33,512559745083195 ], [-7,675151824951172, 33,519357925734134], [-7,674551010131836, 33,520717497758142], [-7,671031951904296, 33,524796085610056], [-7,668800354003906, 33,526441777122507], [-7,668285369873048, 33,528516734826688], [-7,665259712372787, +33,530737914470194] ]]} } ....

Теперь, так как я не хочу экспортировать GeoJSON файлы из openstreemap http://polygons.openstreetmap.fr/index.py я имею такой тип GeoJSON (GEOMETRYCOLLECTION) для конкретного города (не окрестности, только форма города)

{ "типа": "GeometryCollection", "геометрии": [{ "типа": "MultiPolygon", "координаты": [[[[- 5.9429266,35.745548300000003], [- 5.9379208,35.743288800000002], [ -5.9327023,35.7417388], [- 5.9272307,35.741231999999997], [- 5.9202848,35.741909499999998], [- 5.9166306,35.746408000000002], [- 5.9156028,35.7496942], [- 5.9046272,35.760035999999999], [- 5.9001726,35.762371000000002], [- 5.8900896,35.7656931], [- 5.8790518,35.756111199999999], [- 5.8770798,35.7525 902], [- 5.8737711,35.745343900000002], [- 5.872858,35.742017500000003], [- 5.8727035,35.741004699999998], [- 5.8699858,35.732553199999998], [- 5.869492,35.731017299999998], [- 5.8673423,35.728874099999999], [- 5.8638447,35.7260068 ], [- 5.8619479,35.7246934], [- 5.8556436,35.720934100000001], [- 5.8510603,35.719324399999998], [- 5.8464426,35.716996799999997], [- 5.8434943,35.714585599999999], [- 5.8387091,35.711292700000001] ....

Вот мои вопросы:

1. Когда я пытаюсь нарисовать карту с типом GeoJSON GEOMETRYCOLLECTION, я имею огромный квадрат с пустой точкой, это потому, что я только имея один сингл массив координат а не несколько, как в первом примере ???
2. Как я могу структурировать новый файл geojson, чтобы использовать координаты Geomtrycollection в FeatureCollection (поскольку он работает только с этим типом) ???

Я искал много Tip 1 и здесь Tip 2 и здесь Tip 3 , но я не мог найти свой ответ

Спасибо вам всем за вашу помощь

Answer 1

Я не удавалось визуализируйте файл Test.json, поэтому я использовал mapshaper, чтобы преобразовать его в GeoJSON, который мы могли бы действительно прочитать. Затем используйте новые перки в d3 для геоданных fitSize поражает и заботится обо всех центрирования и измерения вашего GeoJSON.

#Test.json transformed 
{ 
    "type":"FeatureCollection", 
    "features":[ 
    { 
     "type":"Feature", 
     "properties":{ 

     }, 
     "geometry":{ 
      "type":"Polygon", 
      "coordinates":[ 

Ваша логика в порядке :) просто используя новые методы d3.

d3.json(fichier, function(json) { 
    var projection = d3.geoMercator().fitSize([w, h], json); 
    var path = d3.geoPath().projection(projection); 
    svg.selectAll('path') 
     .data(json.features) 
     .enter() 
     .append('path') 
     .attr('d', path) 
     .style("fill", "red") 
     .style("stroke-width", "1") 
     .style("stroke", "black") 
     .on("mouseover", function(d) { 
     //console.log(d); 
     }); 
    }); 

Вот обновленный plnkr http://plnkr.co/edit/MHsC4J2xFC0nrHXSZQGQ?p=preview