12

GeoJSON文字列をSVG文字列に変換するすぐに使用できるJavascriptプラグインはありますか？TempoなどのレンダリングエンジンやプロジェクトJsonTは便利ですが、それらを機能させるにはテンプレートが必要です。

4

3 に答える 3

8

d3.jsライブラリを使用できます。次のコードスニペットがその役割を果たします。

htmlファイルにd3.jsを含めます

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

htmlファイルにidmapの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);

実用的な例を見るには、ここにアクセスしてください。この例では、.data（）属性への入力としてtopojsonを使用していることに注意してください。

于 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 hereによって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 に答える