Як створити GeoJSON, який працює з D3?


17

Я просто намагаюся перетворити .shp файл у формат geoJSON, використовуючи:

ogr2ogr -f geoJSON output.json input.shp

Після виконання команди нічого, здається, не так. Ось уривок з output.json

    {
    "type": "FeatureCollection",

    "features": [
    { "type": "Feature", 
    "properties": { "ID_0": 86, "ISO": "DEU", "NAME_0": "Germany", "ID_1": 1, "NAME_1": "Baden-Württemberg", "NL_NAME_1": null, "VARNAME_1": null, "TYPE_1": "Land", "ENGTYPE_1": "State" }, 
    "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.708400940398242, 47.715581894910606 ], [ 8.713716147005524, 47.701734382960055 ], 
...

Але коли я намагаюся використовувати файл JSON у d3 (http://d3js.org/), щоб намалювати SVG полігони, вихід просто неправильний. Оскільки файли shp відображаються правильно в QGIS, я думаю, що в моєму використанні має бути щось не так ogr2ogr. SVG, який я отримую, не зовсім помиляється, але, здається, є деталь, яку я не можу знайти. Здається, вона була перевернута догори дном і якось перекручена на дві окремі частини.

Ось javaScript, який я використовував для створення svg:

//dimensions
var w = 2000;
var h = 2000;

var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    var path = d3.geo.path();

    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);

Хтось має уявлення, що тут пішло не так? Я також намагався перетворити shp-файл за допомогою Qgis та myGeodata (http://converter.mygeodata.eu/vector). Але жоден з них не працює так, як слід.

Я дуже новачок у всьому матеріалі картографії. Тож я був би дуже радий отримати поради.

Дуже дякую!

Відповіді:


7

Гаразд, розігрування різних проекцій, масштабів та перекладів у d3 вирішило мою проблему. Оскільки проекція за замовчуванням при використанні d3.geo.path () є albersUsa, то були вагомі підстави спробувати деякі інші прогнози. Я думаю, що проблему можна було б вирішити простіше, використовуючи правильну специфікацію EPSG при перетворенні файлу форми, але ці незрозумілі числа перевищили мої знання.

Отже, що я зробив, врешті-решт, просто використовую проекцію Меркатора і вводячи її у svg-viewport з translate ().

   d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    //dimensions
    var w = 2000;
    var h = 2000;

    var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    //create geo.path object, set the projection to merator bring it to the svg-viewport
    var path = d3.geo.path()
        .projection(d3.geo.mercator()
        .scale(20000)
        .translate([0, 3800]));

    //draw svg lines of the boundries
    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);
    });

Ось посилання на файли форм, які я використовував, та отриманий geoJSON. Для спрощення файлів форм , які я отримав від GADM , я використовував Maphaper .

Мені все одно було б цікаво менш трудомістке і гнучкіше рішення. Тож якщо у когось є ідея, заздалегідь дякую! Але на даний момент я щасливий, що можу визнати 16 Бундесландії Німеччини!


1
pacereference.org - це корисний веб-сайт для прогнозів та кодів EPSG.
dmci

5

Ви спробували вказати правильний EPSG-код для свого формфайлу та виводу GeoJSON? Наприклад:

ogr2ogr -f GeoJSON -s_srs EPSG:.... -t_srs EPSG:.... output.json input.shp


Напевно, проблема є. Я нічого не уточнював, головним чином через брак знань. Але я знайшов вирішення своєї проблеми. Я опублікую його через хвилину.
Флавіо

3

Ви праві, для карти Німеччини вам потрібно змінити проекцію за замовчуванням, як вона підходить для даних США. Він зосереджений десь у Канзасі та на карті розміром 960xщо.

Правильні параметри, звичайно, також залежать від розмірів вашої карти.

Якщо ви хочете використовувати проекцію d3.geo.albers (найкраще для карт coropleth ), ось мої параметри:

var w = 415;
var h = 555;

var albers = d3.geo.albers()
    .origin([11, 51])
    .parallels([49, 53])
    .translate([230, 290])
    .scale(4000);

var path = d3.geo.path().projection(albers);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.