openlayers轨迹播放

最新推荐文章于 2025-06-24 10:52:28 发布
转载 最新推荐文章于 2025-06-24 10:52:28 发布 · 333 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhoushangwu/p/9449031.html
文章标签：

#javascript #ViewUI

本文介绍了一种使用OpenLayers库实现轨迹动画的方法。通过处理经纬度坐标数据，并利用HTML5和JavaScript进行交互控制，实现了轨迹平滑播放的效果。文章详细展示了如何添加按钮控制动画的播放、暂停及速度调节等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="lib/OpenLayers/ol.js"></script>
    <script src="olStyle/Light.js"></script>
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .map {
            width: 100%;
            height: 100%;
            background: #f6f6f4;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 300px;
            border-radius: 10px;
            /*这个属性设置使填充进度条时的图形为圆角*/
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        input[type=range]::-webkit-slider-runnable-track {
            height: 15px;
            border-radius: 10px;
            /*将轨道设为圆角的*/
            box-shadow: 0 1px 1px #65bdd3, inset 0 .125em .125em #127f9b;
            /*轨道内置阴影效果*/
        }

        input[type=range]:focus {
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 25px;
            width: 25px;
            margin-top: -5px;
            /*使滑块超出轨道部分的偏移量相等*/
            background: #08c1e6;
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 0.125em rgba(49, 155, 187, 0.5);
            /*设置边框*/
            box-shadow: 0 .125em .125em #08c1e6;
            /*添加底部阴影*/
        }
    </style>
</head>

<body>
    <div id="map" class="map" data-id="11"></div>
    <input type="button" id="tempstop" value="暂停" />
    <input type="button" id="start" value="开始" />
    <input type="button" id="stop" value="停止" />
    <input type="button" id="next" value="前进" />
    <input type="button" id="prev" value="后退" />
    <input type="range" id="sudu" value="800" max="2000" min="100" step="100" />
</body>

</html>
<script type="text/javascript">
    var points = [
        [120.27194738388057, 36.3357839481728]
        , [120.27194738388057, 36.33528166973691]
        , [120.27194738388057, 36.33528266973691]
        , [120.2717328071594, 36.33459124591144]
        , [120.27145385742186, 36.333882530121315]
        , [120.270938873291, 36.33315652189482]
        , [120.27091741561887, 36.332741657013344]
        , [120.2705955505371, 36.33213664176766]
        , [120.27070283889768, 36.33139333089085]
        , [120.27057409286496, 36.33087473770719]
        , [120.27108907699584, 36.33006226811251]
        , [120.27177572250363, 36.32987211443067]
        , [120.27271986007688, 36.329664673521194]
        , [120.27357816696164, 36.32918064258463]
        , [120.27342796325681, 36.32826443293632]
        , [120.27364253997803, 36.32753837235599]
        , [120.27447938919066, 36.327088902892015]
        , [120.2756381034851, 36.326795017609925]
        , [120.27731180191037, 36.32632825635429]
        , [120.27881383895873, 36.32601708063062]
        , [120.28033733367917, 36.32572319130615]
        , [120.28138875961302, 36.32570590366433]
        , [120.2832770347595, 36.32555031471519]
        , [120.28469324111937, 36.32555031471519]
        , [120.28591632843013, 36.32548116397142]
        , [120.2876543998718, 36.325412013166286]
        , [120.2888774871826, 36.325412013166286]
        , [120.29087305068967, 36.3253774377407]
        , [120.29175281524657, 36.32485880451607]
        , [120.29284715652466, 36.3245649108233]
    ]

    var newPoints = []

    function DealPoints() {
        $.each(points, function (i, item) {
            var currLng = parseFloat(item[0]);
            var currLat = parseFloat(item[1]);

            newPoints.push(ol.proj.fromLonLat([currLng, currLat]));

            if ((i + 1) == points.length) {
                return false;
            }

            var nextLng = parseFloat(points[i + 1][0]);
            var nextLat = parseFloat(points[i + 1][1]);

            var diffLng = nextLng - currLng;
            var diffLat = nextLat - currLat;

            var currParamsLng = 0
            var currParamsLat = 0

            var base = 0.0001;

            currParamsLng = 0.0001
            currParamsLat = (diffLat / diffLng) * 0.0001;

            if (diffLng < diffLat) {
                currParamsLng = (diffLng / diffLat) * 0.0001;
                currParamsLat = 0.0001
            }
            // currParamsLng = Math.sqrt(0.000000001 / (1 + (diffLng / diffLat) * (diffLng / diffLat)));
            // currParamsLat = (diffLng / diffLat) * currParamsLng

            // currParamsLng = Math.abs(currParamsLng);
            // currParamsLat = Math.abs(currParamsLat);

            if (currParamsLng < 0) {
                currParamsLng = -currParamsLng;
            }

            // if (diffLng < 0) {
            //     if (currParamsLng > 0) {
            //         currParamsLng = -currParamsLng;
            //     }
            // } else {
            //     if (currParamsLng < 0) {
            //         currParamsLng = -currParamsLng;
            //     }
            // }

            if (diffLat > 0) {
                if (currParamsLat < 0) {
                    currParamsLat = -currParamsLat;
                }
            } else {
                if (currParamsLat > 0) {
                    currParamsLat = -currParamsLat;
                }
            }

            if (diffLng == 0) {
                currParamsLng = 0;
                currParamsLat = 0.0001;
            }

            if (diffLat == 0) {
                currParamsLng = 0.0001;
                currParamsLat = 0;
            }

            if (diffLng > 0) {
                currLng = currLng + currParamsLng;
                currLat = currLat + currParamsLat;
                while (currLng < nextLng) {

                    newPoints.push(ol.proj.fromLonLat([currLng, currLat]));

                    currLng = currLng + currParamsLng;
                    currLat = currLat + currParamsLat;
                }
            } else if (diffLng < 0) {
                currLng = currLng - currParamsLng;
                currLat = currLat + currParamsLat;
                while (currLng > nextLng) {

                    newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                    currLng = currLng - currParamsLng;
                    currLat = currLat + currParamsLat;
                }
            } else {
                currLng = currLng + currParamsLng;
                currLat = currLat + currParamsLat;
                while (currLat < nextLat) {

                    newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
                    currLng = currLng + currParamsLng;
                    currLat = currLat + currParamsLat;
                }
            }
            //     if (diffLng > 0 && diffLat > 0) {
            //             currLng = currLng + currParamsLng;
            //             currLat = currLat + currParamsLat;
            //         while (currLng < nextLng) {

            //             newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
            //             currLng = currLng + currParamsLng;
            //             currLat = currLat + currParamsLat;
            //         }
            //     }
            //     else if (diffLng > 0 && diffLat < 0) {
            //             currLng = currLng + currParamsLng;
            //             currLat = currLat - currParamsLat;
            //         while (currLng > nextLng) {

            //             newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
            //             currLng = currLng + currParamsLng;
            //             currLat = currLat - currParamsLat;
            //         }
            //     }
            //     else if (diffLng < 0 && diffLat < 0) {
            //             currLng = currLng - currParamsLng;
            //             currLat = currLat - currParamsLat;
            //         while (currLng > nextLng) {

            //             newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
            //             currLng = currLng - currParamsLng;
            //             currLat = currLat - currParamsLat;
            //         }
            //     }
            //     else {
            //             currLng = currLng - currParamsLng;
            //             currLat = currLat + currParamsLat;
            //         while (currLng > nextLng) {

            //             newPoints.push(ol.proj.fromLonLat([currLng, currLat]));
            //             currLng = currLng - currParamsLng;
            //             currLat = currLat + currParamsLat;
            //         }
            //     }
        })

        //console.log(newPoints);
    }

    DealPoints();

    var map;

    //轨迹
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 2
            })
        })
    });

    //动画
    var speed;
    //点标记
    var geoMarker
    var endMarker

    //样式
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            snapToPixel: false,
            fill: new ol.style.Fill({ color: 'rgba(30,144,255,1)' }),
            stroke: new ol.style.Stroke({
                color: 'rgb(30,144,255)', width: 2
            })
        })
    });


    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });

    //地图初始化
    function InitMap() {
        map = new ol.Map({
            layers: [new ol.layer.Vector({
                source: new ol.source.Vector()
                }),
                style: function (feature, resolution) {
                    switch (feature.get('layer')) {
                        case 'poi':
                            poiStyle.getText().setText(feature.get('name'));
                            return poiStyle;
                        case 'boundary': return boundaryStyle;
                        case 'lawn': return lawnStyle;
                        case 'road':
                            roadStyle.getText().setText(feature.get('name'));
                            return (resolution < 2) ? roadStyle : null;
                        case 'building':
                            return buildingStyle(feature, resolution);
                        case 'other':
                            otherStyle.getText().setText(feature.get('name'));
                            return otherStyle;
                        default: return null;
                    }
                }
            }), layer, vectorLayer],
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat([120.277, 36.330]),
                minZoom: 1,
                zoom: 16
            })
        });
    }

    /*显示并编辑区域**********************************************************************************/
    function AddPolygon() {
        layer.getSource().clear();

        //var line = new ol.geom.LineString(points);
        var line = new ol.geom.LineString(newPoints);

        var feature = new ol.Feature({
            geometry: line
        });

        layer.getSource().addFeature(feature);

        SetMoveMark();
    }

    function SetMoveMark() {
        geoMarker = new ol.Feature({
            geometry: new ol.geom.Point(newPoints[0])
        });
        geoMarker.setStyle(style)

        endMarker = new ol.Feature({
            geometry: new ol.geom.Point(newPoints[newPoints.length - 1])
        });
        endMarker.setStyle(style);

        vectorLayer.getSource().addFeatures([geoMarker, endMarker]);
    }

    InitMap();

    AddPolygon();

    /////////////////////////////////////////////////////////////////////////////////

    //startMarker.setStyle(styles.geoMarker);

    //动画
    var index = 0;
    var date;
    var tempDate;
    var center = ol.proj.fromLonLat([120.277, 36.330]);
    var moveFeature = function (event) {
        var vectorContext = event.vectorContext;

        if (index >= newPoints.length) {
            console.log(new Date());
            stopAnimation();
            clearInterval(inter);
            return;
        }

        var currentPoint = new ol.geom.Point(newPoints[index]);
        var feature = new ol.Feature(currentPoint);
        vectorContext.drawFeature(feature, style);
        var frameState = event.frameState;

        if (ispuse == 0) {
            var t = frameState.time - date;

            if (t / speed > index) {
                index = index + 1;
            }
        }
    };



    function startAnimation() {
        //now = new Date().getTime();
        speed = 100 / $("#sudu").val() * 100;
        geoMarker.setStyle(style);
        map.on('postcompose', moveFeature);
        map.render();
    }


    /**
     * @param {boolean} ended end of animation.
     */
    function stopAnimation() {
        index = 0;
        date = 0;
        tempDate = 0;
        (geoMarker.getGeometry()).setCoordinates(newPoints[0]);
        map.un('postcompose', moveFeature);
    }

    var inter;
    var ispuse = 0;

    $("#tempstop").click(function () {
        //stopAnimation();
        map.render();
        clearInterval(inter);
        tempDate = (new Date()).getTime();
        ispuse = 1;
    })


    $("#start").click(function () {
        console.log(new Date());
        if (date == undefined || date == 0) {
            date = (new Date()).getTime();
        }
        if (tempDate != undefined && tempDate != 0) {
            date = date + ((new Date()).getTime() - tempDate);
        }
        ispuse = 0;
        startAnimation();
        startMove();
    })

    function startMove() {
        inter = setInterval(function () {
            map.render();
        }, speed);
    }

    $("#stop").click(function () {
        stopAnimation();
        clearInterval(inter);
    })

    $("#next").click(function () {
        index = index + 1;
        date = date - speed;
        map.render();
    })

    $("#prev").click(function () {
        index = index - 1;
        date = date + speed;
        map.render();
    })

</script>

　　

转载于:https://www.cnblogs.com/zhoushangwu/p/9449031.html

使用openlayers展示对象的移动轨迹
05-19
使用openlayers展示对象的移动轨迹
OpenLayers3的轨迹回放
weixin_30920513的博客
01-19 962
OpenLayers3实现轨迹回放需要动画操作，官网上的例子用的是postcompose，但是还可以使用javascript中setInterval和setTime. 我的例子是按官网上来的http://openlayers.org/en/latest/examples/feature-move-animation.html?q=anim 增加了过程中能够调整速...
记录openlayers实现轨迹回放功能（播放，暂停，进度条控制，重播）
最新发布
abc749826862的博客
06-24 452
本文介绍了基于OpenLayers 10.6.0的路径动画实现方案。主要内容包括：1）使用天地图影像和注记图层作为底图；2）通过坐标转换将经纬度转为墨卡托投影；3）绘制路径、起点终点标记及运动小车；4）利用setInterval实现动画，支持开始/暂停/重播功能；5）通过Math.atan2计算车头朝向，动态更新位置；6）提供进度条控制和播放速度调节功能。系统采用模块化设计，封装了地图初始化、路径绘制、动画控制等核心功能，实现了完整的轨迹回放解决方案。
openlayers3轨迹回放完整版
02-05
openlayers3中使用js的requestAnimationFrame实现轨迹回放，代码没整理，仅供参考
openlayers画轨迹
12-29
openlayers画轨迹功能，实现动态回访
Openlayers6.5 实现轨迹回放
weixin_43864599的博客
01-16 1347
官网列子 import Feature from 'ol/Feature' import LineString from 'ol/geom/LineString' import VectorSource from 'ol/source/Vector' import VectorLayer from 'ol/layer/Vector' import { Style, Circle as CircleStyle, Icon, Stroke, Fill } from 'ol/style' import Point
Vue+Openlayers自定义轨迹动画
01-18
本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码，供大家参考，具体内容如下 <a>OpenlayersTrack <div class=bar :s
Openlayers轨迹回放功能源码
01-14
在给定的标题和描述中，重点是OpenLayers如何实现轨迹回放功能，这通常涉及到动态展示一系列地理坐标点随着时间推移的变化。 轨迹回放功能在很多领域都有应用，例如交通监控、运动轨迹记录、无人机飞行路径等。要...
openlayers之轨迹回放（附加暂停、继续播放功能）
我灰灰凭啥输
04-08 6061
效果图 老规矩，直接上代码，已经把该备注的都备注好了（可直接复制查看） <div id="map"></div> <label for="speed"> speed:&nbsp; <input id="speed" type="range" min="10" max="999" step="10" value="60"> </label> <button id="start-animation">S
openlayers之轨迹回放
gisdoer
02-20 2137
#openlayers之轨迹回放 openlayers实现gps轨迹回放，绑定对应数据格式可以直接嵌入项目中; 效果如下视频 openlayers之GPS实时监控 轨迹回放 #项目说明 openlayers实现gps数据轨迹回放，原生js，里面有演示数据，按照格式修改。 代码直...
openlayers 轨迹回放（历史轨迹），实时轨迹
无心使然云中漫步
06-21 1597
本篇介绍一下使用openlayers轨迹回放（历史轨迹），实时轨迹。
Openlayers3实现车辆轨迹回放功能
10-14
主要介绍了Openlayers3实现车辆轨迹回放功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers轨迹移动
12-07
openlayers 已知线路，获取坐标，实时渲染坐标位置，回放轨迹功能
OpenLayers基础教程——轨迹回放
HerryDong的博客
11-02 6549
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
Openlayers 实现轨迹播放/暂停/重新播放/从点击处播放
guzicheng1990的博客
11-14 2420
说明： 我的需求是需要实现轨迹播放/暂停/重新播放/从点击处播放，因此封装了一个类 解决方案： 1、初始化：主要是处理一下图层以及数据，通过插值构造一个全局数组 /** * @description 初始化轨迹 */ (function init() { //地图容器 that._map = _map; ...
openlayers 轨迹回放
qq_38000851的博客
04-21 4544
要求：在地图上展示用户工作时，所经过的轨迹。 参考 ：https://openlayers.org/en/latest/examples/feature-move-animation.html?q=anim 在要求不是很高的时候，官网的例子已经可以满足轨迹回放的需求了，但是现在要求，轨迹回放的时候，图标运动要连贯，不能出现跳跃的现象，于是，只好修改官网的例子了。 思路： 1）任意两点间距离过长，在...
openlayers：实现车辆轨迹回放功能（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 192
openlayers：实现车辆轨迹回放功能（附完整源码）
openlayers 实现轨迹播放、框选、mark交互等功能
shengandshu的博客
05-06 2580
基于项目需求二次封装了openlayers。 插件地址：https://github.com/ShengAndShu/ol-map。可以下载到本地查看代码实现和demo。 git clonehttps://github.com/ShengAndShu/shengandshu.github.io.git cd ol-map npm install npm run dev 轨迹播放 ...
vue3openlayers 轨迹播放 并实现速度设置、进度控制、开始时间、结束时间、开始、暂停
02-26
### 实现 Vue 3 和 OpenLayers 轨迹播放 #### 功能概述 在 Vue 3 中使用 OpenLayers 可以创建一个交互式的轨迹播放器，支持速度设置、进度控制、开始时间和结束时间等功能。通过结合 JavaScript 定时器和动画框架来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值