javascript - 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;
      }

<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.min.js"></script-->
<!--  version 3.13.1 change library to compare
https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.min.js --this WORK's!!!

https://cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.min.js This NOT WORK and higher
-->
<select id="draw">
      <option value="select">Select to draw…</option>
      <option value="point">Point</option>
      <option value="line">Line</option>
      <option value="polygon">Polygon</option>
      <option value="circle">Circle</option>
      <option value="rectangle">Rectangle</option>
    </select>
    <div id="map" class="full"></div>

Answer 1

您在 Internet Explorer 9 或更早版本的 Android 中是否遇到此问题？如果是这样，那么您需要为 requestAnimationFrame 添加一个 polyfill，如 v3.14.0 release notes 中所述。 .

为了确保您拥有 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 之一.