javascript - 导出 KML 谷歌地图

Question

我使用谷歌地图 APIv3，我使用不同的标记创建我的 map ，并创建一个一切正常的行程。我的问题是:我想用 javascript 将我的行程导出到 KML 文件中，我做了很多搜索，但没有找到好的答案或教程，有人有解决方案或用 javascript 导出是不可能的吗？也许替代解决方案是可能的......

Answer 1

这不是一个解决方案，而且有点半途而废。我挖出了一年前的nodejs项目。也许它可以给你一些想法。

是的，我知道您想要一个浏览器解决方案。 (抱歉!)

浏览器 JavaScript 不能很好地处理文件。但是您绝对可以使用数据 URI 来使数据可下载，或者您可以填充文本区域并让用户手动复制 KML。

实际的 KML 是一个简单的 xml 文件，您可以按照您认为合适的方式生成它。

var kml = "<?xml version="1.0" encoding="UTF-8"?><kml ...";  // done?

您可以使用模板使事情变得更容易。

这是我的服务器解决方案。它的重量非常轻，采用 geotweets (json) 作为输入并输出 kml 文件。我正在使用 EJS用于模板化。我知道 EJS 也在浏览器中运行，所以也许以下内容至少可以帮助您一点。

我的模板文件(这是针对谷歌地球的，由于 LatLonQuad 和海拔线的原因，可能无法在谷歌地图中工作。但除此之外，我知道 gmaps kml 与谷歌地球 kml 非常非常相似，而且通常是交叉兼容的):

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
    <Document>
        <Style id="whiteLine">
            <LineStyle>
                <color>ffffffff</color>
                <width>1</width>
            </LineStyle>
        </Style>
        <Placemark id="<%= id %>">
            <styleUrl>#whiteLine</styleUrl>
            <MultiGeometry>
                <LineString>
                    <altitudeMode>absolute</altitudeMode>
                    <coordinates>
                        <%= lineStart %>
                        <%= lineEnd %>
                    </coordinates>
                </LineString>
                <Polygon id="<%= id %>_poly">
                    <altitudeMode>absolute</altitudeMode>
                    <outerBoundaryIs>
                        <LinearRing>
                            <coordinates>
                                <%= quadP1 %>,<%= polyAltitude %>
                                <%= quadP2 %>,<%= polyAltitude %>
                                <%= quadP3 %>,<%= polyAltitude %>
                                <%= quadP4 %>,<%= polyAltitude %>
                                <%= quadP1 %>,<%= polyAltitude %>
                            </coordinates>
                        </LinearRing>
                    </outerBoundaryIs>
                </Polygon>
            </MultiGeometry>
        </Placemark>
        <GroundOverlay>
            <Icon>
                <href><%= image %></href>
                <viewBoundScale>0.75</viewBoundScale>
            </Icon>
            <altitudeMode>absolute</altitudeMode>
            <altitude><%= quadAltitude %></altitude>
            <gx:LatLonQuad>
                <coordinates>
                    <%= quadP1 %>
                    <%= quadP2 %>
                    <%= quadP3 %>
                    <%= quadP4 %>
                </coordinates>
            </gx:LatLonQuad>
        </GroundOverlay>
    </Document>
</kml>

我向它提供了这样的数据。

exports.generate = function (tweet, config, callback) {
    var ejs = require('ejs');
    var fs = require('fs');

    // ... Omitted stuff for brewity

    fs.readFile(config.kmlTemplate, 'utf8', function (err, template) {
        var content = ejs.render(template, {
            id           : tweet.id_str,
            lineStart    : geo[1].toString() + ',' + geo[0].toString() + ',' + altitude,
            lineEnd      : geo[1].toString() + ',' + geo[0].toString() + ',0',
            image        : config.imageUrl + tweet.id_str + '.png',
            quadAltitude : altitude,
            polyAltitude : altitude - 1,
            quadP1       : ( geo[1] - width ).toString() + ',' + ( geo[0] - height ).toString(),
            quadP2       : ( geo[1] + width ).toString() + ',' + ( geo[0] - height ).toString(),
            quadP3       : ( geo[1] + width ).toString() + ',' + ( geo[0] + height ).toString(),
            quadP4       : ( geo[1] - width ).toString() + ',' + ( geo[0] + height ).toString()
        });

        fs.writeFile(config.kmlPath + tweet.id_str + '.kml', content, function (err) {
            if (err) { console.log(err); }
            else { callback(); }
        });
    });

还有谷歌的KML reference这就是您真正需要的一切，但这将是一场噩梦。