显示 KML 图层

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图层没有出现。这是我网站的 link，我想在其中显示这张地图： http://www.jourdan.org.br/geojourdan-teste/

谁能帮帮我？谢谢！

Answer 1

您需要使用版本 3.5.0 而不是 3.4.0 才能获得新向量 api 请参阅 release notes

显示 KML 图层

Show a KML layer

kml

openlayers-3