将SVG路径转换为KML地标?

时间:2013-01-08 22:08:57

标签: javascript svg kml

我可以找到很多关于如何将KML多边形转换为SVG对象的文档,但没有做任何相反的事情。这样的脚本是否存在,或者是否有人知道如何编写脚本?

基本上我想采取一些GPL SVG maps from wikimedia commons例如this,为每个国家/省(可能包括其他地理叠加层)制作单独的形状,并将它们转换为KML。我猜测提供SVG地图的坐标系和原点的纬度/经度的脚本可以进行这种转换,但这看起来像是一项非常重要的任务,所以我希望已经做了一些事情。< / p>

我在 http://kml2svg.free.fr/ 找到了这些工具,但这只能转换由同一网站上的KML-&gt; SVG转换器生成的SVG文件。

我还认为我可能会反转convert kml polygons to svg paths上发布的jsfiddle示例,但我无法让这个示例在本地Web项目中工作(我对SVG / KML都很新)开发和Javascript,并且不熟悉Proj.4库的工作方式。)

或者,如果有人能想出更好的方法来解决快速创建“政治地图”风格的KML图层的原始问题,我愿意接受建议。

2 个答案:

答案 0 :(得分:3)

只是找我找到你的帖子, 所以这是我的谷歌列表中的另一个热门。

对于初始步骤,您可能需要查看此页面:

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

祝你好运!

答案 1 :(得分:0)

我找到了一种在JavaScript中将SVG路径转换为SVG多边形的简单方法。 SVG多边形都可以轻松地转换为KML地标,因为它们都使用坐标列表。该脚本可以放在HTML文件中,将直接在浏览器上运行。它将从您的计算机中获取一个SVG文件,并将修改后的文件另存为文本文件。我建议使用Chrome,因为SVG会在其上保持固定大小,以确保坐标系保持完全相同。

<!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地标的坐标标签中。您只需要用新行替换空格即可。尽管这不是很有效,但这是进行转换的最简单方法。