无法在 openlayers 3 矢量图层中绘制多边形和线条

Question

我写了一个代码，应该得到刚刚在矢量图层上创建的特征。

<select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
</select>

//is actually empty    
var sourceVector = new ol.source.Vector({});

layerVector = new ol.layer.Vector({
    id: 'myLayer',
    source: sourceVector,
    style:cStyle // I set a style, I just dont iclude it for brevity
});

var draw;
var typeSelect = document.getElementById('type');

function addInteraction() {
    draw = new ol.interaction.Draw({
        source: sourceVector,
        type: typeSelect.value
    });
    map.addInteraction(draw);
}

 //when something is selected by the dropdown
 //remove the previous interaction and reset it
typeSelect.onchange = function(e) {
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();

    //when drawing is finished, get coords and print them
    draw.on('drawend',
    function(evt) { 
        var justNowFeature = evt.feature;
        var featureGeom = justNowFeature.getGeometry().getCoordinates();
        console.log("FEATURESGEOJSON  "+featureGeom );
    }
);

这也适用于获取几何类型

var featureGeom = justNowFeature.getGeometry().getType();

实际上我只想保存类型和坐标，所以我没问题。

除此之外，这仅适用于积分。如果我选择 Polygon 或 LineString，它不会在控制台中打印任何内容，我也没有收到任何错误，它只是不起作用。

有什么解决办法吗？

谢谢

Answer 1

您需要在 addInteraction 函数中放置 'drawend' 事件初始化。在此处检查 fiddle。 fiddle here 初始化 'drawend' 事件时，不存在绘制交互。 Firebug 虽然应该通知您 "draw" is undefined

这是您的代码。我在CAPITALS做了一些评论来解释。

<select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
</select>

//is actually empty    
var sourceVector = new ol.source.Vector({});

layerVector = new ol.layer.Vector({
    id: 'myLayer',
    source: sourceVector,
    style:cStyle // I set a style, I just dont iclude it for brevity
});

var draw;
var typeSelect = document.getElementById('type');

function addInteraction() {
    draw = new ol.interaction.Draw({
        source: sourceVector,
        type: typeSelect.value
    });
    map.addInteraction(draw);
}

 //when something is selected by the dropdown
 //remove the previous interaction and reset it
typeSelect.onchange = function(e) {
    //HERE YOU REMOVE THE INTERCATION AND THUS ALL LISTENERS 
    //ASIGNED TO IT REMOVED
    // SO YOU NEED TO REASIGN THE LISTENERS AS THIS IS A BRAND NEW INTERACTION
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();

    //when drawing is finished, get coords and print them
    //HERE YOU JUST ASIGN THE LISTENER AT STARTUP. 
    //THIS HAPPENS ONCE AND NOT EACH TIME YOU 
   // ADD BACK THE INTERACTION
    draw.on('drawend',
    function(evt) { 
        var justNowFeature = evt.feature;
        var featureGeom = justNowFeature.getGeometry().getCoordinates();
        console.log("FEATURESGEOJSON  "+featureGeom );
    }
);

无法在 openlayers 3 矢量图层中绘制多边形和线条

Cannot get drawn polygons and lines in openlayers 3 vector layer

openlayers-3