KML 多边形的 SVG 路径
[英]SVG paths to KML polygons
问题描述
I want to create a svg to kml converter in Java.
我想用 Java 创建一个 svg 到 kml 转换器。 I have created a sort of translator for this task, that takes in text in svg format and prints out text in kml format.我为此任务创建了一种翻译器，它接收 svg 格式的文本并打印出 kml 格式的文本。 I am able to handle circle and rect tags so far.到目前为止，我能够处理circle和rect标签。 I'm not able to handle paths .我无法处理路径。
How can I read svg paths(the d attribute) and reconstruct them in kml?如何读取 svg 路径（d 属性）并在 kml 中重建它们？
The main issue stems from the fact that svg paths are not simple sequences of coordinates, and they have curves in them.主要问题源于这样一个事实，即 svg 路径不是简单的坐标序列，它们中有曲线。 Here's an example of an svg path input that I need to handle:这是我需要处理的 svg 路径输入示例：
<html>
<body>
<svg width="10000" height="1000">
<path id="square" fill="#0000FF"
d="M351.3,251 l-3.1-2.2c-0.3-0.2-0.3-0.5-0.1-0.8l2.2-3.1c0.2-0.3,0.5-0.3,0.8-0.1l3.1,2.2
c0.3,0.2,0.3,0.5,0.1,0.8l-2.2,3.1C355,251.1,354.6,251.2,354.3,251z"/>
</body>
</html>
If I can figure out how to evaluate the string in the d attribute, the only other issue is how to create the curves using the values extracted from the string in the d attribute.如果我能弄清楚如何评估 d 属性中的字符串，唯一的另一个问题是如何使用从 d 属性中的字符串中提取的值创建曲线。
This format of paths is not the one commonly found online;这种路径格式不是网上常见的格式； it is something that was created using adobe illustrator by someone else and now I don't have access to that software.它是由其他人使用 adobe illustrator 创建的，现在我无法访问该软件。 Since there are no spaces or regular commas, I'm not able to understand how to read the string properly.由于没有空格或常规逗号，我无法理解如何正确读取字符串。
1 个解决方案
解决方案1
0 已采纳 2019-08-23 04:44:23
I found an easy way to convert SVG paths to SVG polygons in JavaScript.我找到了一种在 JavaScript 中将 SVG 路径转换为 SVG 多边形的简单方法。 SVG polygons can easily be converted to KML placemarks since both use a list of coordinates. SVG 多边形可以轻松转换为 KML 地标，因为两者都使用坐标列表。 This script can be placed in an HTML file and will directly work off a browser.这个脚本可以放在一个 HTML 文件中，并且可以直接在浏览器中工作。 It will take an SVG file from your computer and save the modified file as a text file.它将从您的计算机中获取一个 SVG 文件并将修改后的文件保存为文本文件。 I'd recommend using Chrome, since the SVG maintains a fixed size on it, which ensures that the coordinate system remains exactly the same.我建议使用 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+","+py; for(var i=1; i<length; i++){ p=path.getPointAtLength(i); stp=stp+" "+p.x+","+py; //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>
You can then directly take the points attribute and place it in the coordinates tag in KML.然后，您可以直接获取points属性并将其放置在 KML 中的坐标标记中。 You'll just have to replace the spaces with new lines.您只需要用新行替换空格。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.