OpenLayers基础教程——轨迹回放

最新推荐文章于 2024-05-25 22:20:13 发布

HerryDong

最新推荐文章于 2024-05-25 22:20:13 发布

阅读量6k

点赞数 4

文章标签： openlayers

本文链接：https://blog.csdn.net/HerryDong/article/details/121101191

版权

1、前言

在OpenLayers中，轨迹回放的实现方式有两种：一种是监听postcompose事件，另一种是利用interval定时器实现，下面开始介绍。

2、轨迹点数据

首先模拟一份轨迹点数据：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using Newtonsoft.Json;

namespace RouteApp.ashx
{
    /// <summary>
    /// GetPointHandler 的摘要说明
    /// </summary>
    public class GetPointHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            List<Point> points = new List<Point>();
            for (int i = 1; i <= 100; i++)
            {
                points.Add(new Point
                {
                    Longitude = 120.0 + i / 1000.0,
                    Latitude = 30.0 + i / 1000.0
                });
            }
            for (int i = 1; i <= 100; i++)
            {
                points.Add(new Point
                {
                    Longitude = 120.1 + i / 1000.0,
                    Latitude = 30.1
                });
            }
            for (int i = 1; i <= 100; i++)
            {
                points.Add(new Point
                {
                    Longitude = 120.2 + i / 1000.0,
                    Latitude = 30.1 + i / 1000.0
                });
            }

            context.Response.Write(JsonConvert.SerializeObject(points));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class Point
    {
        /// <summary>
        /// 经度
        /// </summary>
        public double Longitude { get; set; }

        /// <summary>
        /// 纬度
        /// </summary>
        public double Latitude { get; set; }
    }
}

3、实现方式一

第一种实现方式是通过监听postcompose事件实现，官网也有例子，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>轨迹回放</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
    <script src="lib/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="map" style="width:1200px;height:800px;"></div>
    <button id="btn">轨迹回放</button>

    <script>
        // 获取轨迹点
        var points = [];
        $.ajax({
            type: 'get',
            url: 'ashx/GetPointHandler.ashx',
            dataType: 'json',
            async: false,
            cache: false,
            success: function (res) {
                res.forEach(function (point) {
                    points.push([point.Longitude, point.Latitude]);
                })
            }
        });

        // 轨迹
        var route = new ol.geom.LineString(points);
        var routeCoords = route.getCoordinates();
        var routeLength = routeCoords.length;

        // 轨迹线要素
        var routeFeature = new ol.Feature({
            type: 'route',
            geometry: route
        });

        // 轨迹点要素
        var geoMarker = new ol.Feature({
            type: 'geoMarker',
            geometry: new ol.geom.Point(routeCoords[0])
        });

        // 创建样式
        var styles = {
            'route': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    width: 5,
                    color: 'blue'
                })
            }),
            'geoMarker': new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10,
                    snapToPixel: false,
                    fill: new ol.style.Fill({
                        color: 'red'
                    }),
                })
            })
        };

        var center = [120, 30];
        var animating = false;
        var speed, now;

        // 创建瓦片图层
        var tileLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'tile/{z}/{x}/{y}.png'
            })
        });

        // 创建要素图层
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [
                    routeFeature,
                    geoMarker
                ]
            }),
            style: function (feature) {
                if (animating && feature.get('type') === 'geoMarker') {
                    return null;
                }
                return styles[feature.get('type')];
            }
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                tileLayer,
                vectorLayer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: center,
                zoom: 11
            })
        });

        // 监听事件
        var moveFeature = function (event) {
            var vectorContext = event.vectorContext;
            var frameState = event.frameState;

            if (animating) {
                var elapsedTime = frameState.time - now;
                var index = Math.round(speed * elapsedTime / 1000);
                if (index >= routeLength) {
                    stopAnimation(true);
                    return;
                }

                var currentPoint = new ol.geom.Point(routeCoords[index]);
                var feature = new ol.Feature(currentPoint);
                vectorContext.drawFeature(feature, styles.geoMarker);
            }
            map.render();
        };

        // 开始动画
        function startAnimation() {
            if (animating) {
                stopAnimation(false);
            } else {
                animating = true;
                now = new Date().getTime();
                speed = 50;
                geoMarker.setStyle(null);
                map.getView().setCenter(center);
                map.on('postcompose', moveFeature);
                map.render();
            }
        }

        // 停止动画
        function stopAnimation(ended) {
            animating = false;
            var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
            (geoMarker.getGeometry()).setCoordinates(coord);
            map.un('postcompose', moveFeature);
        }

        // 轨迹回放
        $('#btn').click(function () {
            startAnimation();
        })
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

4、实现方式二

第二种实现方式就是利用JavaScript中的interval实现，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>轨迹回放</title>
    <link href="lib/ol/ol.css" rel="stylesheet" />
    <script src="lib/ol/ol.js"></script>
    <script src="lib/jquery/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="map" style="width:1200px;height:800px;"></div>
    <button id="btn">显示轨迹</button>

    <script>
        // 获取轨迹点
        var points = [];
        $.ajax({
            type: 'get',
            url: 'ashx/GetPointHandler.ashx',
            dataType: 'json',
            async: false,
            cache: false,
            success: function (res) {
                res.forEach(function (point) {
                    points.push([point.Longitude, point.Latitude]);
                })
            }
        });

        // 创建瓦片图层
        var tileLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'tile/{z}/{x}/{y}.png'
            })
        });

        // 创建轨迹点图层
        var markerLayer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 20,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                })
            })
        });

        // 创建轨迹线图层
        var lineLayer = new ol.layer.Vector({
            source: new ol.source.Vector(),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    width: 5,
                    color: 'blue'
                })
            })
        });

        // 创建地图
        var map = new ol.Map({
            target: 'map',
            layers: [
                tileLayer,
                markerLayer,
                lineLayer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120.0, 30.0],
                zoom: 11
            })
        });

        // 定时器
        var interval;
        var index = 0;

        // 显示轨迹
        $('#btn').click(function () {
            // 清除定时器
            if (interval != undefined) {
                clearInterval(interval);
            }

            // 清空要素图层
            markerLayer.getSource().clear();
            lineLayer.getSource().clear();
            index = 0;

            // 绘制轨迹线
            if (points.length > 1) {
                var lineFeature = new ol.Feature({
                    geometry: new ol.geom.LineString(points)
                });
                lineLayer.getSource().addFeature(lineFeature);
            }

            // 创建定时器
            interval = setInterval(function () {
                if (index < points.length) {
                    // 清除已有轨迹点
                    markerLayer.getSource().clear();

                    // 添加轨迹点
                    var currentPoint = points[index];
                    markerFeature = new ol.Feature({
                        geometry: new ol.geom.Point(currentPoint)
                    });
                    markerLayer.getSource().addFeature(markerFeature);

                    // 索引+1
                    index++;
                } else {
                    clearInterval(interval);
                    index = 0;
                }
            }, 10);
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

HerryDong

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
2
评论
OpenLayers基础教程——轨迹回放

1、前言在OpenLayers中，轨迹回放的实现方式有两种：一种是监听postcompose事件，另一种是利用interval定时器实现，下面开始介绍。2、轨迹点数据首先模拟一份轨迹点数据：using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;using System.Web;using Newtonsoft.Json;namespace Ro
复制链接

扫一扫