使用 Javascript 将 GeoJSON 转换为 SVG

Posted 2023-02-16

【中文标题】使用 Javascript 将 GeoJSON 转换为 SVG

【英文标题】：Transform GeoJSON to SVG with Javascript

【发布时间】：2012-01-04 07:34:50

【问题描述】：

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

【参考方案1】：

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

在您的 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);

要查看工作示例，请转至 here。请注意，该示例使用 topojson 作为 .data() 属性的输入。

【讨论】：

代码最后一行的变量path 来自哪里？

没关系，我在这里找到（并更新）了一个完整的示例：***.com/questions/18425440/…

@user568458 path 不是变量，它是一个 svg 元素，就像 html 中的 div 一样。 developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

.attr("d", path); - 这是一个名为 path 的 Javascript 变量，用于将 d 属性应用于 D3 绘制的 SVG 路径。查看其他 D3 示例，我猜它是 D3 geo path generator object 定义为 var path = d3.geo.path().projection( someProjectionObject );

【参考方案2】：

有一个基本工具可用于将 GeoJSON 转换为 SVG geojson2svg 和 npm module。由于 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 here 已经用 JavaScript 代码很好地解释了这一点。为方便起见，我创建了一个npm module。

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

【参考方案3】：

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

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

【讨论】：

谢谢，但我需要一个 Javascript 库或插件，而 GDAL / OGR 是 C++。