Question

我有一个示例将div的内容保存到PNG文件（从此处获取：http://openlayers.org/en/master/examples/export-map.html）

除此之外，我还需要显示几个kml图层。我得到了一个例子，我试图将它们与我自己的脚本合并。

这就是我现在所得到的：

<!DOCTYPE html>
<html>
<head>

    <title>Export map example</title>
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>

</head>
<body>
    <div class="container-fluid">

        <div class="row-fluid">
            <div class="span12">
                <div id="map" class="map"></div>
                <div id="no-download" class="alert alert-error" style="display: none">
                    This example requires a browser that supports the
                    <a href="http://caniuse.com/#feat=download">link download</a> attribute.
                </div>
                <a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
            </div>
        </div>

    </div>
    <script>
        var projection = ol.proj.get('EPSG:3857');

        var mapafundo = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var map = new ol.Map({
            /**                layers: [
             new ol.layer.Tile({
             source: new ol.source.OSM()
             }),
             new ol.layer.Vector({
             source: new ol.source.Vector({
             projection: projection,
             url: 'http://www.jourdan.org.br/wp-content/uploads/2015/01/VILA-NOVA.kml',
             format: new ol.format.KML()
             })
             })
             ], */
            target: 'map',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }),
            view: new ol.View({
                center: [-5462834.47, -3058929.70],
                projection: projection,
                zoom: 10
            })
        });

        map.addLayer(mapafundo);


        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'http://www.jourdan.org.br/wp-content/uploads/2015/01/VILA-NOVA.kml',
                format: new ol.format.KML()
            }),
            visible: true
        });


        map.addLayer(vector);



        var exportPNGElement = document.getElementById('export-png');

        if ('download' in exportPNGElement) {
            exportPNGElement.addEventListener('click', function (e) {
                map.once('postcompose', function (event) {
                    var canvas = event.context.canvas;
                    exportPNGElement.href = canvas.toDataURL('image/png');
                });
                map.renderSync();
            }, false);
        } else {
            var info = document.getElementById('no-download');
            /**
             * display error message
             */
            info.style.display = '';
        }

    </script>
</body>
</html>

但是没有出现kml图层。这是我网站的链接，我想在这里显示这张地图： http://www.jourdan.org.br/geojourdan-teste/

谁能帮助我吗？谢谢！

Answer 1

你需要使用版本3.5.0而不是3.4.0来使新的向量api看到release notes

显示KML图层

1 个答案: