javascript 将SVG路径转换为KML地标？

zpjtge22 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(243)

我可以找到很多关于如何将KML多边形转换为SVG对象的文档，但没有相反的文档。这样的剧本存在吗，或者有人知道如何写一个？
基本上我想把一些GPL SVG maps from wikimedia commons e。例如this，它为每个国家/省制作单独的形状（可能包括其他地理覆盖），并将它们转换为KML。我猜SVGMap的坐标系和原点的经度/纬度提供的脚本可以进行这种转换，但这看起来像是一个不平凡的任务，所以我希望已经做了一些事情。
我在**http://kml2svg.free.fr/**找到了这些工具，但它只能转换由同一网站上的KML-〉SVG转换器生成的SVG文件。
我还想我也许可以反转convert kml polygons to svg paths上发布的jsfiddle示例，但我无法让该示例在本地Web项目中工作（我对SVG/KML开发和Javascript都很陌生，并且不熟悉Proj的工作原理。4库）。
或者，如果有人能想到一个更好的方法来解决快速创建“政治Map”风格的KML层的原始问题，我愿意接受建议。

JavaScript

来源：https://stackoverflow.com/questions/14224889/convert-svg-paths-to-kml-placemarks

2条答案

按热度按时间

bakd9h0s1#

只是寻找相同的我发现你的帖子，所以这里的另一个击中从我的谷歌列表。
对于初始步骤，您可能需要查看此页面：
https://github.com/tbrugz/kmlutils
这个项目的目的是为基于XML的“可视化”文件格式提供功能。主要关注KML，SVG和GraphML文件格式。
该项目的主要功能是将SVG文件转换为KML文件的工具。目前它（svg 2kml）部分转换多边形（tbrugz.geo.SVG2KML）
该项目还提供了一个SVG到GraphML的转换工具（tbrugz.geo.SVG2GraphML）
祝你好运！

赞(0）回复(0）举报 2023-04-28

31moq8wy2#

我发现了一种简单的方法，在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地标的coordinates标记中。你只需要用新的行替换空格就行了。虽然这不是很有效，但这是最简单的方法。

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 将SVG路径转换为KML地标？

2条答案

相关问题

热门标签

最新问答