openlayers-13-轨迹回放

已于 2023-05-22 23:13:29 修改
阅读量844 收藏 3
点赞数
分类专栏： OpenLayers入门与实践 文章标签： webgis openlayers
于 2023-05-16 00:05:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chuanren1991/article/details/130695315
版权

主要实现 轨迹线的加载、轨迹跟随播放、速度控制、暂停播放、继续播放的功能

效果图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin:0px;
            padding:0px;
        }
        #mapCon {
            width: 100%;
            height: 100%;
        }
        .controller-box{
            position: absolute;
            top: 25px;
            left: 30%;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon">
        <div class="controller-box">
            <button onclick="addHistoryTrack()">加载轨迹</button>
            <button onclick="playHistoryTrack()">轨迹回放</button>
            <button onclick="pausePlay()">暂停回放</button>
            <button onclick="continuePlay()">继续回放</button>
            <button onclick="reset()">复位</button>
            <div style="margin-top: 10px;">
                播放时定位<input type="checkbox" name="播放时定位" id="playToCenter">
                    播放速度：  慢<input type="range" name="" id="speedRange" max="3" min="1" step="1" onchange="changeRange()">快
            </div>
            
        </div>
    </div>

    <script type="text/javascript">
        var positions = [
            {
                DeviceId: "dev_01",
                lon: 122.04481,
                lat: 37.51939,
                PositionTime: "2021-06-11 10:10:00",
            },
            {
                DeviceId: "dev_01",
                lon: 122.04481,
                lat: 37.51939,
                PositionTime: "2021-06-11 10:10:02",
            },
            {
                DeviceId: "dev_01",
                lon: 122.0426,
                lat: 37.51937,
                PositionTime: "2021-06-11 10:11:17",
            },
            {
                DeviceId: "dev_01",
                lon: 122.03448,
                lat: 37.51672,
                PositionTime: "2021-06-11 10:12:18",
            },
            {
                DeviceId: "dev_01",
                lon: 122.03065,
                lat: 37.51382,
                PositionTime: "2021-06-11 10:13:17",
            },
            {
                DeviceId: "dev_01",
                lon: 122.02631,
                lat: 37.50703,
                PositionTime: "2021-06-11 10:14:17",
            },
            {
                DeviceId: "dev_01",
                lon: 122.0262,
                lat: 37.50018,
                PositionTime: "2021-06-11 10:15:16",
            }
        ];
        let pointIndex = 0;
        var animateSpeed = 1000;//默认1s移动一个点
        var historyPoint=null;
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥
        var center = [122.04481,37.51939];//北京经纬度
        var vectorSource;
        var trackPoints = [];
        var map;
        var mapView;
        //初始化地图
        function initMap(){

            //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
            //source是必填项，用于为图层设置来源。

            //ol.source.XYZ: 
            //创建天地图矢量图层
            var TiandiMap_vec = new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                    wrapX: false
                })
            });
            //创建天地图矢量注记图层
            var TiandiMap_cva = new ol.layer.Tile({
                title: "天地图矢量注记图层",
                source: new ol.source.XYZ({
                    url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
                })
            });
            //1. 实例化Map对象加载地图
            map = new ol.Map({
                //地图容器div的ID
                target: 'mapCon',
                //地图容器中加载的图层
                layers: [TiandiMap_vec, TiandiMap_cva],
                //地图视图设置
                view: new ol.View({
                    //地图初始中心点（经纬度）
                    center: center,
                    //地图初始显示级别
                    zoom: 13,
                    projection: "EPSG:4326"
                })
            });
            mapView = map.getView();
            //2.创建用于绘制轨迹线的矢量图层以及图层源
            //矢量标注的数据源
            vectorSource = new ol.source.Vector();
            //矢量标注图层
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                zIndex:1000,
            });
            map.addLayer(vectorLayer);
        }
        

        initMap();

        var createPointStyle = function (feature) {
            return new ol.style.Style({
                image: new ol.style.Icon(
                    ({
                        //设置图标点
                        //anchor: [0.5, 30],
                        //图标起点
                        anchorOrigin: 'top-right',
                        //指定x值为图标点的x值
                        anchorXUnits: 'fraction',
                        //指定Y值为像素的值
                        anchorYUnits: 'pixels',
                        //偏移
                        offsetOrigin: 'top-right',
                        // offset:[0,10],
                        //图标缩放比例
                        // scale:0.5,
                        //透明度
                        opacity: 1,
                        color: '#fff',
                        //size: [32,32],
                        //图标的url
                        src: 'static/img/hq.png'
                    })),
                text: new ol.style.Text({
                    //位置
                    textAlign: 'center',
                    //基准线
                    textBaseline: 'middle',
                    //文字样式
                    font: 'normal 12px 微软雅黑',
                    //文本内容
                    text: feature.values_.data.DeviceId,
                    //文本填充样式（即文字颜色）
                    fill: new ol.style.Fill({ color: '#FF0000' })
                }),
                //zIndex:1000
            });
        }

        //添加历史轨迹的拐点
        function addHistoryPoint(data) {
            let newPoint = [data.lon, data.lat];
            trackPoints.push(data);
            historyPoint = new ol.Feature({
                //几何信息
                geometry: new ol.geom.Point(newPoint),
                data:data
            });
            //设置要素的样式
            historyPoint.setStyle(createPointStyle(historyPoint));
            //将新要素添加到数据源中
            vectorSource.addFeature(historyPoint);
            if(trackPoints.length>1){
                let points = [trackPoints[trackPoints.length-1],trackPoints[trackPoints.length-2]]
                addTrackLine(points);
                //获取播放定位的选中状态
                let checkFlag = document.getElementById("playToCenter").checked
                //如果被选中，则窗口视角跟随轨迹
                if(checkFlag){
                    mapView.setCenter(newPoint);
                }
                
            }
        }

        //创建矢量标注样式
        function createMarkerStyle(feature) {
            return new ol.style.Style({
                /**{olx.style.IconOptions}类型*/
                image: new ol.style.Icon(
                    ({
                        // anchor: [0.5, 0.5],//图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置
                        anchorOrigin: 'top-right',//锚点的偏移位置，默认是top-left，
                        anchorXUnits: 'fraction',//锚点X的单位，默认为百分比，也可以使用px
                        anchorYUnits: 'pixels',//锚点Y的单位，默认为百分比，也可以使用px
                        offsetOrigin: 'top-right',//原点偏移bottom-left, bottom-right, top-left, top-right,默认 top-left
                        // offset:[0,10],
                        //图标缩放比例
                        // scale:0.5,//可以设置该比例实现，图标跟随地图层级缩放
                        //透明度
                        opacity: 0.75,//如果想隐藏某个图标，可以单独设置该值，透明度为0时，即可隐藏，此为隐藏元素的方法之一。
                        //图标的url
                        src: 'static/img/hq.png'
                    })
                ),
                text: new ol.style.Text({
                    //位置
                    textAlign: 'center',
                    //基准线
                    textBaseline: 'middle',
                    //文字样式
                    font: '20px 宋体',
                    //文本内容
                    text: feature.get('name'),//通过设置的fature的name属性获取，也可以通过参数获取设置，此处接收 字符串 对象
                    //文本填充样式（即文字颜色），红色
                    fill: new ol.style.Fill({ color: '#ff002f' }),
                    //描边颜色，蓝色
                    stroke: new ol.style.Stroke({ color: '#0022ff', width: 1 })
                })
            });
        }
        
        //添加历史轨迹线
        function addHistoryTrack(){
            addTrackLine(positions);
        }
        //添加折线
        function addTrackLine(points){
            let linePoints = [];
            for (let i = 0; i < points.length; i++) {
                //添加点
                let newPoint = [points[i].lon, points[i].lat];
                linePoints.push(newPoint);
            }
            var lineFeature = new ol.Feature({
                geometry: new ol.geom.LineString(linePoints)
            });
            lineFeature.setStyle(new ol.style.Style({
                //填充色
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                //边线颜色
                stroke: new ol.style.Stroke({
                    color: '#ff0019',
                    width: 5
                }),
                //形状
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            }));
            // 注入容器
            vectorSource.addFeature(lineFeature);
        }
        //复位初始化
        function reset(){
            //移除绘制的轨迹线
            vectorSource.clear();
            pointIndex = 0;
            historyPoint = null;
            trackPoints = [];
            mapView.setZoom(13);
            mapView.setCenter(center);
        }
        /**
         * 历史轨迹落点动画
         */
        function playHistoryTrack() {
            let index = pointIndex;
            //获取滑块中设置的速度
            let rangeValue = document.getElementById("speedRange").value;
            animateSpeed = rangeValue=='1'?1500:rangeValue=='2'?1000:500;

            animateTimeOutIndex = setTimeout(function () {
                //最后一个点时，结束轨迹播放
                if (index >= positions.length) {
                    historyPoint = null;
                    trackPoints = [];
                    pointIndex = 0;
                } else {
                    //添加点

                    if (historyPoint != null) {
                        vectorSource.removeFeature(historyPoint);
                        historyPoint = null;
                        addHistoryPoint(positions[index]);
                    } else {
                        addHistoryPoint(positions[index]);
                    }
                    pointIndex++;
                    playHistoryTrack();
                }
            }, animateSpeed);
        }
        //暂停播放轨迹
        function pausePlay(){
            clearTimeout(animateTimeOutIndex);
        }
        //继续播放
        function continuePlay(){
            playHistoryTrack();
        }
    </script>
</body>
</html>

示例代码

阿发博客
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
轨迹回放示例
BIGEMAP_13的博客
08-19 1793
Bigemap轨迹回放示例 编辑时间：2017-07-03 轨迹回放完整html+js代码示例： <!DOCTYPE html> <html> <head> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <metahttp-equiv="Content-...
openlayers3轨迹回放完整版
02-05
openlayers3中使用js的requestAnimationFrame实现轨迹回放，代码没整理，仅供参考
Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)
BADAO_LIUMANG_QIZHI的博客
07-10 3372
场景 Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118634344 上面实现的导航效果，如果是车辆行驶的点位轨迹X和Y都会改变就会这样 怎样实现车辆的图片带旋转角度，即车辆行驶带转角的效果。 要实现的效果如下 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公..
openlayers之轨迹回放（附加暂停、继续播放功能）
我灰灰凭啥输
04-08 5224
效果图 老规矩，直接上代码，已经把该备注的都备注好了（可直接复制查看） <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
vue3 + openlayers---实现轨迹回放prerender
最新发布
QDxin_xyz的博客
05-25 202
【代码】vue3 + openlayers---实现轨迹回放prerender。
Openlayers6.5 实现轨迹回放
weixin_43864599的博客
01-16 1217
官网列子 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
OpenLayers3的轨迹回放
weixin_30920513的博客
01-19 908
OpenLayers3实现轨迹回放需要动画操作，官网上的例子用的是postcompose，但是还可以使用javascript中setInterval和setTime. 我的例子是按官网上来的http://openlayers.org/en/latest/examples/feature-move-animation.html?q=anim 增加了过程中能够调整速...
openlayers-release-2.13增加了轨迹demo.zip
08-14
这对于数据分析和历史轨迹回放具有很大的帮助。开发者还可以利用这些API实现缩放、平移、动画播放等效果，以增强用户体验。 此外，OpenLayers 2.13的轨迹功能不仅可以用于地图上的可视化，还可以与其他GIS工具结合...
Openlayers3实现车辆轨迹回放功能
10-14
在OpenLayers 3中实现车辆轨迹回放功能是一项常见的需求，尤其在GIS（地理信息系统）应用中。OpenLayers是一个强大的JavaScript库，它允许开发者在Web上创建交互式的地图。在这个功能中，我们将讨论如何利用...
openlayers 3实现车辆轨迹回放
10-14
在本文中，我们将深入探讨如何使用OpenLayers 3实现车辆轨迹回放功能。这个功能允许用户以动画的形式查看车辆在过去移动的路径，这对于交通监控、物流管理和地理信息系统（GIS）分析等场景非常有用。 首先，我们要...
cm_Openlayers-master.rar
05-23
这个"cm_Openlayers-master"压缩包提供了丰富的示例，帮助开发者深入理解并掌握OpenLayers的使用，实现地图布点、监控位置、动态显示位置态势以及轨迹回放等功能。 一、OpenLayers基础 OpenLayers允许开发者在任何...
Openlayers轨迹回放功能源码
01-14
Openlayers利用获取的坐标集，在地图上实现轨迹回放功能 Openlayers利用获取的坐标集，在地图上实现轨迹回放功能
车辆轨迹回放
12-14
示范使用SuperMap iServer Java 6R通过时间函数触发为FeaturesLayer添加PictureMarkerStyle和设置指定的时间段上在属性的开始值和结束值之间发生的动画两种方式实现车辆行走的效果；采用的开发模式是Flex+iServer Java 6R
openLayers轨迹
qq_34076585的博客
08-03 599
<template> <div class="map" id="map"> <div class="overlay-container" style="display: none"> <!-- 车辆弹窗 --> <div class="overlay" ref="overlay_truck"> <div class="close" @click="overlay.setPosition(.
openlayers 3 实现车辆轨迹回放
Kaybee - 练级之路
01-24 9993
先上效果： 利用 openlayers 3地图的 postcompose 事件监听地图的重绘 注意：此代码是我在Vue 的methods 里面写的测试方法，并不能直接运行，请在理解的基础上测试。 vm 为vue的this对象 注释已经很丰富了，先做个备份，后期会编辑加入一点详解。 实现代码： html： div id="menu"> labe
Vue+Openlayer实现轨迹路线
热门推荐
~~
08-27 1万+
<template> <div> <div id="map" ref="map" style="width: 100vw; height: 100vh"></div> </div> </template> <script> import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; im...
openlayer 轨迹回放
Himire的专栏
05-13 2051
&lt;!doctype html&gt; &lt;html&gt; &lt;meta charset="utf-8"&gt; &lt;head&gt; &lt;title&gt;轨迹回放&lt;/title&gt; &lt;script language="javascript" src="ol-debug.js"&g
天地图专题四：在天地图上显示运行轨迹
liusaint1992的专栏
10-07 1万+
我们就实现了在天地图上显示坐标轨迹。可以根据后台查询出来的数据在地图上显示轨迹。
OpenLayers-添加Marker
05-24
要在OpenLayers中添加标记，可以使用OpenLayers.Feature.Vector类来创建一个新的矢量特征，该特征将用作标记。然后可以将此特征添加到OpenLayers.Layer.Vector图层中，以在地图上显示标记。 以下是一个简单的示例，演示如何在OpenLayers中添加一个标记： ```javascript // 创建一个地图对象 var map = new OpenLayers.Map("map"); // 创建一个基本的OSM图层 var osmLayer = new OpenLayers.Layer.OSM(); map.addLayer(osmLayer); // 创建一个矢量图层来显示标记 var vectorLayer = new OpenLayers.Layer.Vector("Markers"); map.addLayer(vectorLayer); // 创建一个新的矢量特征，其中心点位于(0, 0)处 var markerFeature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(0, 0) ); // 将特征添加到矢量图层中 vectorLayer.addFeatures([markerFeature]); ``` 在上面的代码中，我们首先创建了一个基本的OpenStreetMap图层。然后创建了一个新的矢量图层，用于显示标记。接下来，我们创建了一个新的矢量特征，该特征表示一个点位于(0, 0)处。最后，我们将特征添加到矢量图层中，以在地图上显示标记。 你可以根据需要更改标记的位置和其他属性。例如，你可以将点的坐标更改为地图上的实际位置，或者将标记的样式更改为自定义图标。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值