KML 多边形的 SVG 路径

我找到了一种在 JavaScript 中将 SVG 路径转换为 SVG 多边形的简单方法。SVG 多边形可以轻松转换为 KML 地标，因为两者都使用坐标列表。这个脚本可以放在一个 HTML 文件中，并且可以直接在浏览器上运行。它将从您的计算机获取 SVG 文件并将修改后的文件保存为文本文件。我建议使用 Chrome，因为 SVG 在其上保持固定大小，从而确保坐标系保持完全相同。<!DOCTYPE html><html><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 中的坐标标记中。您只需要用新行替换空格。

KML 多边形的 SVG 路径

1回答