这篇文章主要为大家详细介绍了openlayers 3实现车辆轨迹回放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了openlayers 3实现车辆轨迹回放的具体代码，供大家参考，具体内容如下
先上效果：
利用 openlayers 3地图的 postcompose 事件监听地图的重绘
注意：此代码是我在Vue 的methods 里面写的测试方法，并不能直接运行，请在理解的基础上测试。
vm 为vue的this对象 注释已经很丰富了，先做个备份，后期会编辑加入一点详解。
实现代码：
html：
<!-- 注：此代码仅为上面速度条和按钮--
核心代码:
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= routeLength) { stopAnimation(true); return; } //fixme --------------- if( index 14 && index 43 && 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-600'), 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); }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue+Openlayers自定义轨迹动画
- vue使用openlayers实现移动点动画
以上就是openlayers 3实现车辆轨迹回放的详细内容，更多请关注本站其它相关文章！
