openlayers 3实现车辆轨迹回放


Posted in Javascript onSeptember 24, 2020

本文实例为大家分享了openlayers 3实现车辆轨迹回放的具体代码,供大家参考,具体内容如下

先上效果:

openlayers 3实现车辆轨迹回放

利用 openlayers 3地图的 postcompose 事件监听地图的重绘

注意:此代码是我在Vue 的methods 里面写的测试方法,并不能直接运行,请在理解的基础上测试。
vm 为vue的this对象 注释已经很丰富了,先做个备份,后期会编辑加入一点详解。

实现代码:

html:

<div id="menu">
   <label for="speed" style="font-weight: bold;">
    运动速度: 
    <input id="speed" type="range" min="1" max="20" step="1" value="10" />
   </label>
   <button id="start-animation">
    开始运动
   </button>
  </div>
<!-- 注:此代码仅为上面速度条和按钮--

核心代码:

startMove:function () {
    var vm=this;
    var map=vm.map;
    vm.clearOverlayers("beijing_sq");

    //中间站
    var stops=[
     [12909554.6597,4933234.84552], //14
     [12909824.6852,4931594.7854], //43
     [12910026.8837,4930523.89946], //63
     [12910870.563,4929357.26511]  //85
    ];

    var stopMakers = new Array();

    for(var i=0;i<4;i++){
     var s = new ol.Feature({
      type: 'stop',
      geometry: new ol.geom.Point(stops[i])
     });
     stopMakers.push(s);
    }


    var Coordinates=vm.path;

    //将离散点构建成一条折线
    var route = new ol.geom.LineString(Coordinates);
    //获取直线的坐标
    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 startMarker = new ol.Feature({
     type: 'icon',
     geometry: new ol.geom.Point(routeCoords[0])
    });
    var endMarker = new ol.Feature({
     type: 'icon',
     geometry: new ol.geom.Point(routeCoords[routeLength - 1])
    });

    var styles = {
     'route': new ol.style.Style({
      stroke: new ol.style.Stroke({
       width: 6,
       color: '#F2C841'
      }),
      fill:new ol.style.Fill({
       color:"#F6E3A3"
      })
     }),
     /*'icon': new ol.style.Style({
      image: new ol.style.Icon({
       anchor: [0.5, 1],
       src: require()
      })
     }),*/
     'geoMarker': new ol.style.Style({
       /*image: new ol.style.Circle({
        radius: 7,
        snapToPixel: false,
        fill: new ol.style.Fill({ color: 'black' }),
        stroke: new ol.style.Stroke({
         color: 'white',
         width: 2
        })
       })*/
       image: new ol.style.Icon({
        src: require('../../assets/map/left_red_car.png'),
        rotateWithView: false,
        rotation: -Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]),
        scale:0.3,
       })
      }),
     'stop':new ol.style.Style({
      image:new ol.style.Circle({
       radius:10,
       snapToPixel:false,
       fill:new ol.style.Fill({ color:'red'}),
       stroke:new ol.style.Stroke({
        color:'white',
        width:2
       })
      })
     })
    };

    var animating = false;
    var speed, now;
    var speedInput = document.getElementById('speed');
    var startButton = document.getElementById('start-animation');

    var vectorLayer = new ol.layer.Vector({
     id:'carLayer',
     source: new ol.source.Vector({
      features: [routeFeature, geoMarker, startMarker, endMarker,stopMakers[0],stopMakers[1],stopMakers[2],stopMakers[3]]
     }),
     style: function (feature) {
      //如果动画是激活的就隐藏geoMarker
      if (animating && feature.get('type') === 'geoMarker') {
       return null;
      }
      return styles[feature.get('type')];
     }
    });

    //var center = ol.proj.fromLonLat([115.981,40.451]);

    map.addLayer(vectorLayer);

    // 要素移动
    var moveFeature = function (event) {
     var vectorContext = event.vectorContext; //HTML5 Canvas context,ol.render.canvas.Immediate的对象
     var frameState = event.frameState;  //freme 的状态
     if (animating) {
      var elapsedTime = frameState.time - now; //elapsedTime 已过时间
      //通过增加速度,来获得lineString坐标
      var index = Math.round(speed * elapsedTime / 1000); //已经走了多少个点

      //console.log("#########",routeCoords[index]);

      if (index >= routeLength) {
       stopAnimation(true);
       return;
      }

      //fixme ---------------
      if( index < 14){
       flashFeature(0);
      }
      if( index == 14){
       changeStyle(0, 1);
      }

      if(index > 14 && index <43){
       flashFeature(1);
      }
      if(index == 43){
       changeStyle(1, 2);
      }


      if(index > 43 && index <63){
       flashFeature(2);
      }
      if(index == 63){
       changeStyle(2, 3);
      }

      if(index > 63 && index <85){
       flashFeature(3);
      }
      if(index == 85){
       changeStyle(3, 3);
      }
      //fixme--------------------

      var dx,dy,rotation,carStyle;
      if(routeCoords[index] && routeCoords[index+1]){
       dx=routeCoords[index][0]-routeCoords[index+1][0];
       dy=routeCoords[index][1]-routeCoords[index+1][1];
       rotation = Math.atan2(dy,dx);
       //console.log("***********",rotation);

       carStyle= new ol.style.Style({
        image: new ol.style.Icon({
         src: require('../../assets/map/left_red_car.png'),
         rotateWithView: false,
         rotation: -rotation,
         scale:0.3,
        })
       });
       var currentPoint = new ol.geom.Point(routeCoords[index]); //当前点
       var feature = new ol.Feature(currentPoint);
       //Render a feature into the canvas.
       // Note that any zIndex on the provided style will be ignored - features are rendered immediately in the order that this method is called.
       // If you need zIndex support, you should be using an ol.layer.Vector instead
       vectorContext.drawFeature(feature, carStyle);
      }
     }
     //继续动画效果
     map.render();
    };

    function changeStyle(previous,next) {
     //console.log(stopMakers[previous]);
     stopMakers[previous].setStyle(new ol.style.Style({
      image: new ol.style.Circle({
       radius: 10,
       snapToPixel: false,
       fill: new ol.style.Fill({color: 'green'}),
       stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
       })
      })
     }));
    }

    var colors=['red','green'];
    var colorIndex=0;
    function flashFeature(index) {
     var color;
     colorIndex++;
     colorIndex=colorIndex % 30;

     if(colorIndex < 15){
      color=colors[0];
     }else {
      color = colors[1];
     }
     stopMakers[index].setStyle(new ol.style.Style({
      image: new ol.style.Circle({
       radius: 10,
       snapToPixel: false,
       fill: new ol.style.Fill({
        color: color
       }),
       stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
       })
      })
     }));
    }

    function startAnimation() {
     if (animating) {
      stopAnimation(false);
     } else {
      animating = true;
      now = new Date().getTime();   /** 开始时的时间*/
      speed = speedInput.value;
      startButton.textContent = '结束运动';
      //隐藏geoMarker
      geoMarker.setStyle(null);
      //设置显示范围
      //map.getView().setCenter(center);
      map.on('postcompose', moveFeature); /** postcompose事件-- 地图渲染时都会触发 */
      map.render();
     }
    }

    /**
     * @param {boolean}结束动画
     */
    function stopAnimation(ended) {
     animating = false;
     startButton.textContent = '开始运动';

     //如果动画取消就开始动画
     var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
     /** @type {ol.geom.Point} */
     (geoMarker.getGeometry()).setCoordinates(coord);
     //移除监听
     map.un('postcompose', moveFeature); /** 解除postcompose 事件 */
    }

    startButton.addEventListener('click', startAnimation, false);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 #Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 #Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 #Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
Openlayers实现点闪烁扩散效果
Sep 24 #Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 #Javascript
vue3.0生命周期的示例代码
Sep 24 #Javascript
You might like
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
用Python读取几十万行文本数据
2018/12/24 Python
Django异步任务线程池实现原理
2019/12/17 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
董事长秘书职责
2014/01/31 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
学习计划是什么
2019/04/30 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
php将xml转化对象的实例详解
2021/11/17 PHP