如何在openlayers中从数组的连续点绘制线串 [英] How to draw linestring from consecutive points of array in openlayers

问题描述

我正在尝试在连续图层Points的openlayers中绘制LineString，以使其具有从头到尾绘制的动画效果.

I am trying to draw LineString in openlayers with consecutive Points to give it a feel of animation like it is drawing from start to end.

我尝试通过遵循此示例来实现. OL2的所有引用都转换为OpenLayers 5，但对于整个数组，绘制仍应发生一点，然后进行下一步，而不是一次.

I tried to achieve it by following this example. All references of OL2 are converted to OpenLayers 5, but still drawing should happen one point followed by next for entire array and not at once.

在此处找到当前输出的代码-我的代码.

Find my code with current output here - my code.

[供参考]这是我正在尝试实现的用于小叶的蛇动画

[For reference] This is I am trying to achieve Snake animation for leaflet.

推荐答案

仅使用线串的顶点不会产生平滑的动画.您可以在OpenLayers示例 https://openlayers中看到. org/en/v4.6.5/examples/feature-move-animation.html ，其中标记在直线部分上的移动速度更快.如果您需要像OpenLayers 2示例中那样沿直线平滑移动，则需要使用.getCoordinateAt()来计算您应该随时保持在直线上的位置.这是一个基于标记动画示例的演示，还计算了显示蛇示例的线串的顶点之间的位置.您还可以绘制自己的直线，并观察它们的动画效果.

Using only the vertices of a linestring doesn't give a smooth animation. You can see that in the OpenLayers example https://openlayers.org/en/v4.6.5/examples/feature-move-animation.html where the marker moves much faster over the straight sections. If you need smooth movement along straight lines as in the OpenLayers 2 example you need to use .getCoordinateAt() to calculate where on the line you should be at any time. Here's a demo based on the marker animation example but also calculating positions between vertices showing the linestring from the snake example. You can also draw you own straight lines and watch them animate smoothly.

var style = new ol.style.Style({
  stroke: new ol.style.Stroke({
width: 4,
color: 'red'
  })
});

var raster = new ol.layer.Tile({
  source:  new ol.source.OSM()
});

var vector = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View()
});

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://raw.githubusercontent.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/master/route.js');
xhr.onload = function() {
  // read the route coordinates
  eval(xhr.responseText);
  // reverse the route
  var geom = new ol.geom.LineString(route.reverse());
  // change Lat/Lon to Lon/Lat
  geom.applyTransform(function(c){ return c.reverse(); });
  geom.transform('EPSG:4326', map.getView().getProjection());
  map.getView().fit(geom.getExtent(), { size: map.getSize() });
  var snake = new ol.Feature();
  vector.getSource().addFeature(snake);
  animate_line(snake, geom, 30000);
}
xhr.send();

function animate_line(feature, linestring, duration) {

  var length = linestring.getLength();
  var length_shown = 0;

  var coords = linestring.getCoordinates();
  var coords_shown = [coords[0], coords[0]];
  var geom_shown = new ol.geom.LineString(coords_shown);
  feature.setGeometry(geom_shown);

  var coordcount = 1;
  var start = new Date().getTime();
  var listenerKey = map.on('postcompose', animate);

  function animate() {

var elapsed = new Date().getTime() - start;
var toAdd = length*elapsed/duration - length_shown;
var point = linestring.getCoordinateAt(Math.min(elapsed/duration, 1));

// restart from last intermediate point and remove it
var newPart = new ol.geom.LineString(coords_shown.slice(-1));
coords_shown.pop();

// add vertices until required length exceeded
while (coordcount < coords.length && newPart.getLength() <= toAdd) {
  newPart.appendCoordinate(coords[coordcount]);
  coords_shown.push(coords[coordcount]);
  coordcount++;
}

// replace overrun vertex with intermediate point
coords_shown.pop();
coordcount--;
coords_shown.push(point);

geom_shown.setCoordinates(coords_shown);
length_shown += toAdd;

if (elapsed > duration) {
  ol.Observable.unByKey(listenerKey);
}
map.render();

  }

}

draw = new ol.interaction.Draw({
  source: vector.getSource(),
  type: 'LineString'
});

draw.on('drawend',function(evt){
  geom = evt.feature.getGeometry();
  evt.feature.setGeometry(undefined);
  animate_line(evt.feature, geom, 6000);
});
map.addInteraction(draw);

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

这篇关于如何在openlayers中从数组的连续点绘制线串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！