将 "synthetic points" 示例从 Openlayers 3.5 转换为 3.16 时出现错误

Question

正在尝试更新 http://ol3.qtibia.ro/build/examples/synthetic-points.html

处的示例

到最新版本的 Openlayers。遇到一个我无法弄清楚的错误；由 pointermove 事件触发，作为 displaySnap 函数的结果。玩转下面的 JS fiddle。

var point = null;
var line = null;
var displaySnap = function(coordinate) {
  var closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
  if (closestFeature === null) {
    point = null;
    line = null;
  } else {
    var geometry = closestFeature.getGeometry();
    var closestPoint = geometry.getClosestPoint(coordinate);
    if (point === null) {
      point = new ol.geom.Point(closestPoint);
    } else {
      point.setCoordinates(closestPoint);
    }
    if (line === null) {
      line = new ol.geom.LineString([coordinate, closestPoint]);
    } else {
      line.setCoordinates([coordinate, closestPoint]);
    }
  }
  map.render();
};

map.on('pointermove', function(evt) {
  if (evt.dragging) {
    return;
  }
  var coordinate = evt.coordinate;
  displaySnap(coordinate);
});

map.on('click', function(evt) {
  displaySnap(evt.coordinate);
});

var imageStyle = new ol.style.Circle({
  radius: 10,
  fill: null,
  stroke: new ol.style.Stroke({
    color: 'rgba(255,255,0,0.9)',
    width: 3
  })
});
var strokeStyle = new ol.style.Stroke({
  color: 'rgba(255,255,0,0.9)',
  width: 3
});
map.on('postcompose', function(evt) {
  var vectorContext = evt.vectorContext;
  if (point !== null) {
    vectorContext.setStyle(imageStyle);
    vectorContext.drawGeometry(point);
  }
  if (line !== null) {
    vectorContext.setStyle(null, strokeStyle);
    vectorContext.drawGeometry(line);
  }
});

Answer 1

这是一个更新后的工作示例：http://jsfiddle.net/1vzp3mwd/8/

这是我所做的：

我加载了完整库的 "debug" version 以获得更好的堆栈跟踪和更容易的调试。（请注意，您永远不想在生产中使用它。）
我更改了您的 vectorContext.setStyle() 调用，以便使用 ol.style.Style 对象调用它们。有关详细信息，请参阅 the API docs。

这是更新示例的相关部分：

var stroke = new ol.style.Stroke({
  color: 'rgba(255,255,0,0.9)',
  width: 3
});

var style = new ol.style.Style({
  image: new ol.style.Circle({
    radius: 10,
    fill: null,
    stroke: stroke
  }),
  stroke: stroke
});

map.on('postcompose', function(evt) {
  var vectorContext = evt.vectorContext;
  vectorContext.setStyle(style);
  if (point !== null) {
    vectorContext.drawGeometry(point);
  }
  if (line !== null) {
    vectorContext.drawGeometry(line);
  }
});

确保使用 http://openlayers.org/en/latest/examples/ when looking for examples (this will give you examples for the latest release). You can always get to that from http://openlayers.org/. The Synthetic Points example you are trying to reproduce is located here: http://openlayers.org/en/latest/examples/synthetic-points.html.

将 "synthetic points" 示例从 Openlayers 3.5 转换为 3.16 时出现错误

Bug when converting "synthetic points" example from Openlayers 3.5 to 3.16

openlayers-3