openlayers3の移動機能は、3.14以上のバージョンでは動作しません。

Question

バージョン3.14以上のOpenlayers3に問題があります。この例は移動しません。3.14以上のバージョンでは機能しません。バージョン？

私は自分のプロジェクトでタイプサークルの特性を移動しようとしていますが、その方法の例を見つけましたが、最新バージョンのopenlayers3では動作しません。

ご協力ありがとうございます！

var map = new ol.Map({ 
    target: 'map', 
    layers: [new ol.layer.Tile({//Capas 
       title: 'OSM', 
       type: 'base', 
       visible: true, 
       source: new ol.source.OSM() 
      })], 
    view: new ol.View({ 
    center: [-9777389, 5058721], 
    zoom: 5 
    }) 
}); 

function onDrawend() { 
    setTimeout(function() { 
    setActiveEditing(true); 
    activeInteraction.setActive(false); 
    document.getElementById('draw').value = 'select'; 
    }, 200); 
} 

var vectorLayer = new ol.layer.Vector({ 
source: new ol.source.Vector() 
}); 
vectorLayer.setMap(map); 

var pointInteraction = new ol.interaction.Draw({ 
    type: 'Point', 
    source: vectorLayer.getSource() 
}); 
pointInteraction.setActive(false); 
pointInteraction.on('drawend', onDrawend); 

var lineInteraction = new ol.interaction.Draw({ 
    type: 'LineString', 
    source: vectorLayer.getSource() 
}); 
lineInteraction.setActive(false); 
lineInteraction.on('drawend', onDrawend); 

var polygonInteraction = new ol.interaction.Draw({ 
    type: 'Polygon', 
    source: vectorLayer.getSource() 
}); 
polygonInteraction.setActive(false); 
polygonInteraction.on('drawend', onDrawend); 

var circleInteraction = new ol.interaction.Draw({ 
    type: 'Circle', 
    source: vectorLayer.getSource() 
}); 
circleInteraction.setActive(false); 
circleInteraction.on('drawend', onDrawend); 

var rectangleInteraction = new ol.interaction.Draw({ 
    type: 'LineString', 
    source: vectorLayer.getSource(), 
    maxPoints: 2, 
    geometryFunction: function(coordinates, geometry) { 
    if (!geometry) { 
     geometry = new ol.geom.Polygon(null); 
    } 
    var start = coordinates[0]; 
    var end = coordinates[1]; 
    geometry.setCoordinates([ 
     [start, [start[0], end[1]], end, [end[0], start[1]], start] 
    ]); 
    return geometry; 
    } 
}); 
rectangleInteraction.setActive(false); 
rectangleInteraction.on('drawend', onDrawend); 

var selectInteraction = new ol.interaction.Select({ 
    condition: ol.events.condition.click, 
    wrapX: false 
}); 
var modifyInteraction = new ol.interaction.Modify({ 
    features: selectInteraction.getFeatures() 
}); 
var translateInteraction = new ol.interaction.Translate({ 
    features: selectInteraction.getFeatures() 
}); 
var setActiveEditing = function(active) { 
    selectInteraction.getFeatures().clear(); 
    selectInteraction.setActive(active); 
    modifyInteraction.setActive(active); 
    translateInteraction.setActive(active); 
}; 
setActiveEditing(true); 

var snapInteraction = new ol.interaction.Snap({ 
    source: vectorLayer.getSource() 
}); 

map.getInteractions().extend([ 
    pointInteraction, lineInteraction, polygonInteraction, 
    circleInteraction, rectangleInteraction, 
    selectInteraction, modifyInteraction, translateInteraction, 
    snapInteraction]); 

var activeInteraction; 
document.getElementById('draw').addEventListener('change', function(e) { 
    var value = e.target.value; 
    if (activeInteraction) { 
    activeInteraction.setActive(false); 
    } 
    if (value == 'point') { 
    activeInteraction = pointInteraction; 
    } else if (value == 'line') { 
    activeInteraction = lineInteraction; 
    } else if (value == 'polygon') { 
    activeInteraction = polygonInteraction; 
    } else if (value == 'circle') { 
    activeInteraction = circleInteraction; 
    } else if (value == 'rectangle') { 
    activeInteraction = rectangleInteraction; 
    } else { 
    activeInteraction = undefined; 
    } 
    setActiveEditing(!activeInteraction); 
    if (activeInteraction) { 
    activeInteraction.setActive(true); 
    } 
}); 

html, body { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     font-family: "Montserrat", Verdana, sans-serif; 
     } 
     div.full { 
     width: 100%; 
     height: 100%; 
     /*background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF7/r+////JvYf4gAAAAJ0Uk5T/wDltzBKAAAAGElEQVR42mJgwAoYYQCJNWQEh5uPAAIMAP2AAUUBpXchAAAAAElFTkSuQmCC");*/ 
     } 
     .ol-zoom a:hover, 
     .ol-zoom a:focus { 
     color: white; 
     text-decoration: none; 
     }; 
     #draw { 
     position: absolute; 
     top: 10px; 
     right: 45px; 
     padding: 4px; 
     border-radius: 4px; 
     } 
     #edit { 
     position: absolute; 
     top: 10px; 
     } 

​​

Answer 1

あなたは、AndroidのInternet Explorer 9のか、古いバージョンでは、この問題を見ていますか？その場合は、v3.14.0 release notesに記載されているように、​​のポリフィルを追加する必要があります。

あなたがあなたのページに次のpolyfillsを含める必要があり、でも古いブラウザでは、OpenLayersをが必要とするすべてのものを持っていることを確認する：

<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> 
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> 

上記のスニペットはofficial examplesの1から取られています。