导出 KML google 地图

Question

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

Answer 1

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

是的，我知道您需要一个浏览器解决方案。（对不起！）

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

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

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

您可以使用模板让事情变得更简单。

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

我的模板文件（这是针对 google 地球的，由于 LatLonQuad 和高度线，可能不适用于 google 地图。但除此之外我知道 gmaps kml与 google earth 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(); }
        });
    });

还有 google 的 KML reference 是您真正需要的，但这是一场噩梦。

导出 KML google 地图

export KML google map

javascript

google-maps

google-maps-api-3

google-maps-markers

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