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

来源：互联网发布：上海索昂软件编辑：程序博客网时间：2024/05/01 01:11

点在线上的运动

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

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

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

1 0