五十七、openlayers官网示例Marker Animation解析——在地图上添加路径动画、沿路径往返运动

最新推荐文章于 2025-09-27 20:18:41 发布

原创

最新推荐文章于 2025-09-27 20:18:41 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #openlayers官方示例 #openlayers #地图

官网demo地址：

Marker Animation

这篇绘制了一个运动轨迹动画。

先请求了一个json文件。

fetch(
      "https://openlayers.org/en/latest/examples/data/polyline/route.json"
    ).then(function (response) {
      response.json().then(function (result) {
        const polyline = result.routes[0].geometry;

        const route = new Polyline({
          factor: 1e6,
        }).readGeometry(polyline, {
          dataProjection: "EPSG:4326",
          featureProjection: "EPSG:3857",
        });
})

文件中的数据格式跟我们常见的不太一样，

这些字符串是一种被称为 Polyline 编码的格式。是一种用于在地图上高效存储和传输折线（路径）的坐标数据的编码方法。用于将一系列纬度和经度坐标压缩成一个字符串。它使用增量编码和可变长度编码技术，使得路径数据在传输时占用更少的空间。所以需要使用Polyline先进行解析。

解析完之后，可以直接创建为feature，同时，创建起点和终点以及运动中的图标feature。

const routeFeature = new Feature({
          type: "route",
          geometry: route,
        });
        const startMarker = new Feature({
          type: "icon",
          geometry: new Point(route.getFirstCoordinate()),
        });
        const endMarker = new Feature({
          type: "icon",
          geometry: new Point(route.getLastCoordinate()),
        });
        const position = startMarker.getGeometry().clone();
        const geoMarker = new Feature({
          type: "geoMarker",
          geometry: position,
        });

给每个feature绑定相应的样式。

const styles = {
          route: new Style({
            stroke: new Stroke({
              width: 6,
              color: [237, 212, 0, 0.8],
            }),

最低0.47元/天解锁文章