openlayers 3 차량 궤적 재생 실현

본 논문 의 사례 는 openlayers 3 가 차량 궤적 재생 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
선행 효과:

openlayers 3 지 도 를 이용 한 post copose 사건 감청 지도 재 구성
메모:이 코드 는 제 가 Vue 의 methods 에 쓴 테스트 방법 입 니 다.직접 실행 할 수 없습니다.이 해 를 바탕 으로 테스트 하 십시오.
vm 는 vue 의 this 대상 에 대한 설명 이 풍부 합 니 다.먼저 백업 을 하고 나중에 편집 하여 상세 한 설명 을 추가 합 니 다.
구현 코드:
html：

<div id="menu">
   <label for="speed" style="font-weight: bold;">
        :&nbsp;
    <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);
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.