3

KML ポリゴンを SVG オブジェクトに変換する方法に関する多くのドキュメントを見つけることができますが、その逆を行うものはありません。そのようなスクリプトは存在しますか、それともスクリプトの書き方を知っている人はいますか?

基本的に、ウィキメディア コモンズから GPL SVG マップの一部を取得したいと思います。たとえば、これは、国/州ごとに個別の形状を作成し (おそらく他の地理的オーバーレイを含む)、それらを KML に変換します。SVG マップの座標系と原点の緯度/経度を指定したスクリプトでこの変換を行うことができると思いますが、これは簡単ではないタスクのように見えるので、何かが既に行われていることを願っています。

http://kml2svg.free.fr/でツールを見つけましたが、これは同じサイトの KML->SVG コンバーターによって生成された SVG ファイルしか変換できません。

また、 convert kml polygons to svg pathsに投稿された jsfiddle の例を元に戻すこともできると思いましたが、この例をローカル Web プロジェクトで動作させることはできませんでした (私は SVG/KML 開発とJavascript、および Proj.4 ライブラリの仕組みに慣れていない)。

または、「政治地図」スタイルの KML レイヤーをすばやく作成するという元の問題を解決するためのより良いアプローチを誰かが考えられる場合は、提案を受け付けています。

4

2 に答える 2

3

私があなたの投稿を見つけたのと同じものを探しているので、ここに私のグーグルリストからの別のヒットがあります。

最初のステップとして、次のページをご覧ください。

https://bitbucket.org/tbrugz/kmlutils/

幸運を！

于 2013-01-17T22:20:27.757 に答える
0

JavaScript で SVG パスを SVG ポリゴンに変換する簡単な方法を見つけました。どちらも座標のリストを使用するため、SVG ポリゴンは KML 目印に簡単に変換できます。このスクリプトは HTML ファイルに配置でき、ブラウザから直接動作します。コンピューターから SVG ファイルを取得し、変更されたファイルをテキスト ファイルとして保存します。SVG は固定サイズを維持するため、Chrome を使用することをお勧めします。これにより、座標系がまったく同じままになります。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reader</title>
</head>
<body>
<h1>SVG paths to polygons</h1>
<input type="file" id="fileReader" />
<br>
<p id="Content"></p>
<script>
document.getElementById("fileReader").addEventListener('change',function(){
var fr = new FileReader();
fr.onload = function(){;
var d = new DOMParser().parseFromString( this.result.toString(), "image/svg+xml" );
var nodelist = d.querySelectorAll('path');
console.log("Number of paths: " + nodelist.length);
nodelist.forEach(function(path){//This replaces each path with a polygon, keeping the same id.
var polygon = d.createElementNS("http://www.w3.org/2000/svg", "polygon");
polygon.setAttribute("id", path.getAttribute("id"));
console.log("Converting " + path.getAttribute("id"));
var length = path.getTotalLength();
var p=path.getPointAtLength(0);
var stp=p.x+","+p.y;
for(var i=1; i<length; i++){
    p=path.getPointAtLength(i);
    stp=stp+" "+p.x+","+p.y;
    //This places points along the path at one unit distance apart.
}
polygon.setAttribute("points", stp);
path.replaceWith(polygon);
});
var text1 = new XMLSerializer().serializeToString(d);
document.write(text1);
function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Starting file download.
download("output.txt", text1);
}
fr.readAsText(this.files[0]);
})
</script>
</body>
</html>

その後、属性を直接取得してpoints、KML 目印の座標タグに配置できます。スペースを新しい行に置き換えるだけです。これはあまり効率的ではありませんが、変換を行う最も簡単な方法です。

于 2019-08-02T09:14:09.450 に答える