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

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

为了确保您拥有OpenLayers所需的一切，即使在旧浏览器中，您也应该在页面上包含以下polyfill：

<!-- 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之一。

openlayers3移动功能，如果不低于3.14版本则不起作用

1 个答案: