使用Javascript将GeoJSON转换为SVG

Question

是否有一个现成的 Javascript插件,可以将GeoJSON字符串转换为SVG字符串？渲染引擎,如Tempo,或项目JsonT将是有用的,但我需要模板使它们工作.

Answer 1

您可以使用d3.js库.以下代码片段将完成以下工作:

在你的html文件中包含d3.js.

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

假设你的html文件中有id id的div:

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

以下js代码将地图添加到您的div地图.geoJsonObj是你的geojson.

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()属性的输入.

Answer 2

有一个基本工具可用于将 GeoJSON 转换为 SVG geojson2svg并作为npm 模块。由于 geojson2svg 的输出是 SVG 字符串，因此该工具可以在浏览器中使用，也可以与 Node.js 一起使用。

这是一个例子：

npm install geojson2svg --save

var geojson2svg = require('geojson2svg')

var converter = geojson2svg(
   {attributes: ['properties.foo', 'properties.bar', 'properties.baz']})
var svgStr = converter.convert({
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {type: 'LineString', coordinates: [[0,0], [1000,1000]]},
    properties: {foo: 'fooVal-1', bar: 'barVal-1', baz: 'bazVal-1'}
  }, {
    type: 'Feature',
    geometry: {type: 'LineString', coordinates: [[10,10], [100,100]]},
    properties: {foo: 'fooVal-2', bar: 'barVal-2'}
  }]  
})

console.log(svgStr) 
/* output
[
  '<path d="M128,128 128.00638801979818,127.99361198020182" foo="fooVal-1" bar="barVal-1" baz="bazVal-1"/>',
  '<path d="M128.00006388019798,127.99993611980202 128.00063880197982,127.99936119802018" foo="fooVal-2" bar="barVal-2"/>'
]

*/

将 SVG 字符串转换为 DOM 元素非常容易。bobince在这里用 JavaScript 代码很好地解释了这一点。为了方便起见，我制作了一个npm 模块。

免责声明：我是 geojson2svg 的作者。

Answer 3

您可以查看 GDAL，不确定它是否完全支持 SVG 创建，但 GDAL 通常可以将所有地理格式转换为其他地理格式。

参见：链接