Преобразование GeoJSON в SVG с помощью Javascript

Существует ли готовый к использованию подключаемый модуль Javascript, который преобразует строку GeoJSON в строку SVG? Механизм рендеринга, такой как Tempo, или проект JsonT было бы полезно, но мне нужен шаблон, чтобы заставить их работать.


javascript svg rendering geojson
person camilokawerin    schedule 22.11.2011    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Вы можете использовать библиотеку d3.js. Следующий фрагмент кода выполнит эту работу:

Включите d3.js в свой html-файл.

<script src="files/d3.v3.min.js"></script>

Предполагая, что у вас есть div с картой идентификаторов в вашем html-файле:

<div id="map"></div>

Следующий код js добавит карту на вашу карту div. geoJsonObj — это ваш геоджсон.

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

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

Чтобы увидеть рабочий пример, перейдите здесь. Обратите внимание, что в примере используется topojson в качестве входных данных для атрибута .data().

person Mr.Hunt    schedule 30.01.2013
comment
Откуда в вашем коде переменная path в последней строке? - person user56reinstatemonica8; 24.07.2016
comment
Неважно, я нашел (и обновил) полный пример здесь: stackoverflow.com/questions/18425440/ - person user56reinstatemonica8; 24.07.2016
comment
@ user568458 путь не является переменной, это элемент svg, например div в html. developer.mozilla.org/en-US/docs/Web/ SVG/Учебник/Пути - person Mr.Hunt; 26.07.2016
comment
.attr("d", path); — это переменная Javascript с именем path, используемая для применения атрибутов d к путям SVG, которые рисует D3. Глядя на другие примеры D3, я бы предположил, что это Объект генератора геопути D3 определен чем-то вроде var path = d3.geo.path().projection( someProjectionObject ); - person user56reinstatemonica8; 26.07.2016

arrow_upward
4
arrow_downward

Существует базовый инструмент для преобразования geojson в svg geojson2svg и как модуль npm также. Выводом geojson2svg является строка svg, поэтому этот инструмент можно использовать как в браузере, так и с node.js.

Очень легко преобразовать строку svg в элемент dom. Это было объяснено bobince здесь очень хорошо с кодом JavaScript. Для удобства я сделал модуль npm.

geojson2svg дает вам больше гибкости, но для быстрого решения лучше всего подходит d3.

Отказ от ответственности: я являюсь автором geojson2svg.

person Gagan    schedule 31.10.2014

arrow_upward
-2
arrow_downward

Вы можете заглянуть в GDAL, не уверен, что он полностью поддерживает создание SVG, но GDAL обычно может конвертировать все геоформаты в другие геоформаты.

См.: http://www.gdal.org/ogr/ogr_formats.html.

person Arend    schedule 22.11.2011
comment
Спасибо, но мне нужна библиотека или плагин Javascript, а GDAL/OGR — это C++. - person camilokawerin; 23.11.2011