OpenLayers 3 - 幾何集合空

我有使用Ol_3寫幾何的問題。OpenLayers 3 - 幾何集合空

當我使用ol.interaction.Draw時，我發現在編寫Features時會出現一些奇怪的現象。使用提到的交互我想添加矢量（點，線串，多邊形等），但在第一次嘗試（或點擊）我得到GEOMETRYCOLLECTION EMPTY，但當我第二次使用相同的命令時，我得到所需的結果有人可以解釋行爲，以及如何避免它？

是否有可能在第一次嘗試/點擊時獲得幾何圖形？

舉例如下片段：

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://openlayers.org/en/v4.3.2/css/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://openlayers.org/en/v4.3.2/build/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>

UPDATE

我根據JGH答案編輯片段，希望它有助於:)

來源

2017-09-16 Svinjica

注意更換線路

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

，關於第2點擊，您將獲得1點的座標（所以打印輸出始終是一個落後一分，你只是畫） – JGH

@JGH是的，有誰知道這是爲什麼？ – Svinjica

的在功能實際添加到其源中之前，會觸發事件。根據finishDrawing()定義，（不明顯）記錄爲here。

因此，爲了讓您的代碼正常工作，您可以監聽層來源上的事件而不是交互。

嘗試通過

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

來源

2017-09-18 01:34:07 JGH

是的，就是這樣。保持良好的工作。 :) – Svinjica

OpenLayers 3 - 幾何集合空

回答

相關問題