12

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

4

3 回答 3

8

您可以使用d3.js库。以下代码片段将完成这项工作：

在 html 文件中包含 d3.js

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

假设，您的 html 文件中有带有 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() 属性的输入。

于 2013-01-30T13:52:04.130 回答
5

有一个基本工具可用于将 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 的作者。

于 2014-10-31T09:59:28.540 回答
-2

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

见：http ://www.gdal.org/ogr/ogr_formats.html

于 2011-11-22T22:46:23.853 回答