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= 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();
	}


你可能感兴趣的:(前端技术)