OpenLayers3入门篇-点在线上的运动

                          点在线上的运动

基本思路：这条线切割成很多的坐标，然后这个点沿着这些坐标前进，以下代码是参考官方案例做了修改，还有很多不足之处

  先将得到的两个点的坐标从字符串转换成数字类型，再传入封装的方法计算出两个坐标之间的距离（单位：米）

注：OpenLayers3有原生API可以计算距离，如果使用其他方法计算距离得到的线的距离和OL画的线的长度比例不对。

得到两点之间的距离长度（单位米），再将两点之间的坐标切割

成与距离相同，也就是两点之间相隔多少米，就有多少个坐标即一米一个坐标，这样如果有多条线的运动，只要传入一个长度点的运动距离相同，不会失真

样例代码：

	function lineToArray(start,end,jsonobj){
		
		var x = [parseFloat(jsonobj.startx),parseFloat(jsonobj.starty)];
		var y = [parseFloat(jsonobj.endx),parseFloat(jsonobj.endy)];
		var c = getDisance2(x,y);//getDisance(x[0], x[1], y[0], y[1])
		
		console.log(c);
		var count  = Math.round(c);
		
		var routeCoords = [];
		var startx = start[0];
		var starty = start[1];
		var endx = end[0];
		var endy = end[1];
		var avg_x=(endx-startx)/count;
		var avg_y=(endy-starty)/count;
		routeCoords.push(start);
		var val_x = startx;
		var val_y = starty;
		for(var i=0;i<count;i++){
			val_x += avg_x;
			val_y += avg_y;
			var val = [val_x,val_y];
			routeCoords.push(val);
		}
		routeCoords.push(end);
		//获取坐标长度
		/**
		 *就在这里计算需要定位的长度
		 */
		var faultPoint = 10000;
		console.log(count);
		console.log(routeCoords.length);
		var routeLength = routeCoords.length;
		//创造运动的点
		
        var geoMarker = new ol.Feature({
          type: 'geoMarker',
          geometry: new ol.geom.Point(routeCoords[0])
        });
        var animating = false;
        var now;
        var styles = {
                //运动的点
                'geoMarker': new ol.style.Style({
                  image:new ol.style.Icon({
						color:'red',
						src:'dot.png'
					})	
                })
              };
        
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
              features: [geoMarker]
            }),
            style: function(feature) {
              // hide geoMarker if animation is active
              if (animating && feature.get('type') === 'geoMarker') {
                return null;
              }
              return styles[feature.get('type')];
            }
          });
        
        map.addLayer(vectorLayer);
        
        //移动点
        var moveFeature = function(event){
        	 var vectorContext = event.vectorContext;
        	 var frameState = event.frameState; 
        	 if(animating){
        		 var elapsedTime = frameState.time - now;       		 
        		 var index = Math.round(9000* elapsedTime / 1000);
        		 console.log(index);
        		 if (index >= faultPoint) {
        			 console.log(index);
                     stopAnimation(true,routeCoords[index]);
                     //vectorLayer.getSource().removeFeature(geoMarker);
                     var geom = new ol.geom.Point(ol.proj.transform(routeCoords[index],
                            'EPSG:3857','EPSG:4326'));
                     pointLight(geom.getCoordinates());                    	 
                     return;
                   }
        		 var currentPoint = new ol.geom.Point(routeCoords[index]);
        		 var feature = new ol.Feature(currentPoint);
        		 vectorContext.drawFeature(feature, styles.geoMarker);
        	 }
        	 map.render();	 
        };
        
        //开始动画
        function startAnimation() {        
        	if(animating){
        		stopAnimation(false);
        	}else{
                animating = true;
                now = new Date().getTime();
                var speed = 30;
                //属性设置或返回指定节点的文本内容，以及它的所有后代
                //startButton.textContent = 'Cancel Animation';
                geoMarker.setStyle(null);
                //绑定postcompose事件，回调函数moveFeature
                map.on('postcompose', moveFeature);
                map.render();                
        	}
        }
        //停止动画
        function stopAnimation(ended,coor) {
            animating = false;
            ended = false;
           // var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
            ///**@type {ol.geom.Point}*/  (geoMarker.getGeometry())
            //  .setCoordinates(coord);
           
            /**@type {ol.geom.Point}*/  (geoMarker.getGeometry())
              .setCoordinates(coor);
            //remove listener
            map.un('postcompose', moveFeature);  
          }
        startAnimation();
	}

转载自：https://blog.csdn.net/Adventure_xph/article/details/52005955