openlayers 入门教程（十二）：定位与轨迹_openlayers的元素沿一个经纬度轨迹运动

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

---

在OpenLayers中实现定位和轨迹的功能通常涉及到地图上的点标记（Marker）动态更新位置以及记录和显示轨迹路径。以下是一些基本步骤和概念：

一、定位功能实现

1. 实时定位

• 通过HTML5 Geolocation API获取用户设备的实时经纬度信息。
• 在OpenLayers中创建一个Marker，并将其位置设置为获取到的实时经纬度坐标。
• 开启Marker的动画更新，确保在用户移动时位置能够实时更新。

if (navigator.geolocation) {
  navigator.geolocation.watchPosition(function(position) {
    var coordinate = ol.proj.transform(
      [position.coords.longitude, position.coords.latitude],
      'EPSG:4326', // GPS坐标系
      'EPSG:3857' // OpenLayers 默认使用的Web Mercator投影
    );
    if (marker) {
      marker.setPosition(coordinate);
    } else {
      marker = new ol.Feature({
        geometry: new ol.geom.Point(coordinate)
      });
      vectorSource.addFeature(marker);
    }
  }, function(error) {
    console.error('Error getting geolocation:', error.message);
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. 地图居中定位

根据获取的坐标，调用view.centerOn() 或 view.setCenter()方法使地图视图中心聚焦到该点。

map.getView().setCenter(coordinate);
1

二、轨迹功能实现

1. 轨迹记录

• 随着位置变化不断收集并保存坐标点到数组或数据库。
• 可以定期或每次位置更新时将新的坐标点添加到一个线状几何体（如ol.geom.LineString）中。

var trackLineString = new ol.geom.LineString([]);
trackLineString.appendCoordinate(coordinate);

// 创建一个表示轨迹的Feature
var trackFeature = new ol.Feature({
  geometry: trackLineString
});

// 添加到矢量图层
var vectorSource = new ol.source.Vector({
  features: [trackFeature]
});
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});
map.addLayer(vectorLayer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. 轨迹回放

如果需要实现轨迹回放功能，可以创建一个定时器，按时间顺序逐步更新线状几何体的顶点，模拟轨迹的动态播放。

三、实战示例

示例1：显示带箭头的线段轨迹，箭头居中

示例 2：定位动画（平移 - 弹性平移 -飞行）

示例 3：实时显示单个卫星的位置及轨迹

四、Openlayers 入门教程 -系列文章列表

• openlayers 入门教程（一）：应该如何学习openlayers
• openlayers 入门教程（二）：Map 篇
• openlayers 入门教程（三）：View 篇
• openlayers 入门教程（四）：Layers 篇
• openlayers 入门教程（五）：Sources 篇
• openlayers 入门教程（六）：Controls篇
• openlayers 入门教程（七）：Interactions篇
• openlayers 入门教程（八）：Geom 篇
• openlayers 入门教程（九）：Overlay 篇
• openlayers 入门教程（十）：Style 篇
• openlayers 入门教程（十一）：Formats篇
• openlayers 入门教程（十二）：定位与轨迹
• openlayers 入门教程（十三）：动画
• openlayers 入门教程（十四）：第三方插件
• openlayers 入门教程（十五）：与 canvas、echart，turf 等交互