OpenLayers 3 - 几何集合空答案

【问题标题】：OpenLayers 3 - Geometry Collection EmptyOpenLayers 3 - 几何集合空
【发布时间】：2017-09-16 20:40:06
【问题描述】：

我对使用 Ol_3 编写几何有疑问。

当我使用ol.interaction.Draw 时，我注意到编写功能时出现了一些奇怪的行为。使用提到的交互，我想添加矢量（点、线串、多边形等），但在第一次尝试（或单击）时，我得到 GEOMETRYCOLLECTION EMPTY，但是当我第二次使用相同的命令时，我得到了想要的结果有人可以解释这种行为吗？如何避免这种行为？

是否可以在第一次尝试/单击时获取几何图形？

以下示例 sn-p：

var vector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 12,
                fill: new ol.style.Fill()
            })
        })
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vector
    ],
    target: 'map',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4
    })
});

map.on('pointermove', function(e) {
    if (e.dragging) return;
    var
        pixel = map.getEventPixel(e.originalEvent),
        hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

var button = $('#pan').button('toggle');
var interaction;
var features = undefined;;
$('div.btn-group button').on('click', function(event) {
    var id = event.target.id;
    var features;
    var selectedFeatures = undefined;
    button.button('toggle');
    button = $('#' + id).button('toggle');
    map.removeInteraction(interaction);

    switch (id) {
        case "select":
            document.getElementById("export").innerHTML="";
            interaction = new ol.interaction.Select();
            map.addInteraction(interaction);
            features = interaction.getFeatures();

            dragBoxInteraction = new ol.interaction.DragBox({
                condition: ol.events.condition.platformModifierKeyOnly,
                style: new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: [12, 25, 25, 4]
                    })
                })
            });
            dragBoxInteraction.on('boxend', function(event) {
                selectedFeatures = interaction.getFeatures();
                selectedFeatures.clear();
                var extent = dragBoxInteraction.getGeometry().getExtent();
                vector.getSource().forEachFeatureIntersectingExtent(extent, function(feature) {
                    selectedFeatures.push(feature);
                });
            });
            map.addInteraction(dragBoxInteraction);

            break;
        case "point":
            interaction = new ol.interaction.Draw({
                type: 'Point',
                source: vector.getSource()
            });
            vector.getSource().on('addfeature', function(e) {
                var source = e.target;
                var writer = new ol.format.WKT();

                if (vector.getSource().getState() === 'ready') {
                    //https://gis.stackexchange.com/questions/179907/openlayers-3-geojson-save-and-load
                    var wkt = writer.writeFeatures(vector.getSource().getFeatures());
                    document.getElementById("export").innerHTML = wkt;
                }
            });
            map.addInteraction(interaction);
            break;


        default:
            break;
    }
    var snap = new ol.interaction.Snap({
        source: vector.getSource()
    });
    map.addInteraction(snap);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol.css" type="text/css">
</head>

<body>
    <div class="container">
        <div id="map" class="map"></div>
        <br>
 
            <pre>
            <div id="export"></div>
            </pre>
        <!-- <button type="button" class="btn btn-outline-danger" id="js-remove">Izbriši</button> -->
        <div class="btn-group btn-group-sm" id="bar" role="group" aria-label="Draw">
            <button id="pan" type="button" class="btn btn-primary">Pan</button>
            <button id="select" type="button" class="btn btn-default active">Select</button>
            <button id="point" value="pointless" type="button" class="btn btn-success">Point</button>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.3.2/ol.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
        <!-- <script src="functions_draw.js" type="text/javascript"></script> -->
</body>

</html>

更新

我根据JGH的回答编辑了sn-p，希望对你有帮助:)

【问题讨论】：

请注意，在第二次单击时，您将获得第一个点的坐标（因此打印输出总是在您刚刚绘制的点后面一个点）
@JGH 是的，有人知道这是为什么吗？

标签： javascript gis openlayers openlayers-3

【解决方案1】：

drawend 事件在功能实际添加到其源之前触发。它（不是很明显）记录在 here 下，在 finishDrawing() 定义下。

因此，为了让您的代码正常工作，您可以在层源上而不是交互上监听事件。

换行试试

interaction.on('drawend', function(e) {

通过

vector.getSource().on('addfeature', function(e){

【讨论】：