Question

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

上的示例

到Openlayers的最新版本。得到一个我无法弄清楚的错误;由pointerSove事件触发，作为displaySnap函数的结果。玩下面的JS小提琴。

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/（这将为您提供最新版本的示例）。您始终可以从http://openlayers.org/开始。您尝试重现的Synthetic Points示例位于：http://openlayers.org/en/latest/examples/synthetic-points.html。

转换＆＃34;合成点时的错误＆＃34;例如Openlayers 3.5到3.16

1 个答案: