Как создать 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 ], 
...

Но когда я пытаюсь использовать файл de 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 при преобразовании файла формы, но эти неясные числа превысили мои знания.

Итак, в конце я просто использовал проекцию mercator и перенес ее в 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 , я использовал mapshaper .

Я все еще был бы заинтересован в менее трудоемком и более гибком решении. Так что если у кого-то есть идея, заранее спасибо! Но на данный момент я счастлив, что могу распознать 16 Бундеслинд Германии!


1
atialreference.org - это полезный сайт для прогнозов и кодов EPSG.
DMC

5

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

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


Вероятно, есть проблема. Я ничего не уточнил В основном из-за недостатка знаний. Но я нашел решение моей проблемы. Я опубликую это через минуту.
Флавио

3

Вы правы, для карты Германии вам нужно изменить проекцию по умолчанию, так как она подходит для данных США. Это сосредоточено где-то в Канзасе и для карты размера 960xsomething.

Правильные параметры, конечно, также зависят от размеров вашей карты.

Если вы хотите использовать проекцию d3.geo.albers (лучше всего подходит для сопутствующих карт ), вот мои параметры:

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.