OpenLayers是一款开源的地图库,可以在Web浏览器中显示交互式地图。它可以与OpenStreetMap、Google Maps、Bing Maps等在线地图服务集成使用。

OpenLayers中的轨迹动画可以通过使用OpenLayers的Vector和Feature API,结合一些JavaScript动画库,如Tween.js或jQuery,来实现。下面是一个简单的示例:

1.准备地图和轨迹数据

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([116.38, 39.9]),
    zoom: 12
  })
});

var trackCoords = [
  [116.38, 39.9],
  [116.4, 39.92],
  [116.42, 39.95],
  [116.44, 39.98]
];

var trackFeature = new ol.Feature({
  geometry: new ol.geom.LineString(trackCoords).transform('EPSG:4326', 'EPSG:3857')
});

var trackSource = new ol.source.Vector({
  features: [trackFeature]
});

var trackLayer = new ol.layer.Vector({
  source: trackSource,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 2
    })
  })
});

map.addLayer(trackLayer);

2.创建动画函数

var speed = 50; // 轨迹动画速度,单位为千米/小时
var now; // 当前时间
var speedFactor; // 时间因子
var animation; // 动画

function animateTrack(timestamp) {
  if (!now) {
    now = timestamp;
    speedFactor = speed / 3600000; // 将速度转换为每毫秒的距离
  }

  var timeElapsed = timestamp - now;
  var distance = speedFactor * timeElapsed;
  var vectorContext = ol.render.getVectorContext(event);
  var frameState = event.frameState;

  // 计算当前坐标
  var trackCoords = trackFeature.getGeometry().getCoordinates();
  var trackLength = trackCoords.length;
  var lastCoord = trackCoords[trackLength - 1];
  var currentCoord = lastCoord;
  var targetDistance = distance;

  for (var i = 0; i < trackLength - 1; ++i) {
    var startCoord = trackCoords[i];
    var endCoord = trackCoords[i + 1];
    var segmentDistance = ol.coordinate.distancesphere(startCoord, endCoord);

    if (targetDistance > segmentDistance) {
      targetDistance -= segmentDistance;
    } else {
      var t = targetDistance / segmentDistance;
      currentCoord = [startCoord[0] + t * (endCoord[0] - startCoord[0]), startCoord[1] + t * (endCoord[1] - startCoord[1])];
      break;
    }
  }

  // 更新轨迹
  var feature = new ol.Feature({
    geometry: new ol.geom.Point(currentCoord).transform('EPSG:4326', 'EPSG:3857')
  });

  vectorContext.setStyle(new ol.style.Style({
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({
        color: 'red'
      }),
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
      })
    })
  }));

  vectorContext.drawGeometry(feature.getGeometry());

  // 判断是否到达终点
  if (currentCoord[0] === lastCoord[0] && currentCoord[1] === lastCoord[1]) {
    cancelAnimationFrame(animation);
    return;
  }

  // 继续动画
  map.render();
  animation = requestAnimationFrame(animateTrack);
}

3.启动动画

animation = requestAnimationFrame(animateTrack);

以上示例中,我们先创建了一个包含一条线段的矢量图层,然后定义了一个速度变量和一些动画函数。最后,我们通过调用requestAnimationFrame函数启动动画。不断地调用animateTrack函数,直到轨迹到达终点。

需要注意的是,在使用OpenLayers的Vector API时,需要使用transform方法将经纬度坐标转换为Web墨卡托投影坐标。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐