OpenLayers 3 实现轨迹回放

  function PathBack() {
        var PVLayer = new ol.layer.Vector({
            source: new ol.source.Vector({})
        });
        var pointList = new Array();
        map.addLayer(PVLayer);
        $.ajax({
            type: "get",
            url: "images/zb.json",
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var obj = data.T_Project;
                for (var i = 0; i < obj.length; i++) {
                    var pointFeature = new ol.Feature({
                        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(obj[i].x), parseFloat(obj[i].y)], ‘EPSG:4326‘, ‘EPSG:3857‘))
                    })
                    var propertieList = new Array();
                    //     propertieList.push(obj[i].ID, obj[i].x, obj[i].y, obj[i].Note);
                    propertieList.push(obj[i].ID, obj[i].x, obj[i].y);
                    pointFeature.setProperties(propertieList);
                    if (pointFeature != null) {
                        pointList.push(pointFeature);
                    }
                }

                var stoptime = setInterval(function () {
                    if (j + 1 <= pointList.length) {
                        if (j > 0) {
                            var twoCoordinatePoint = new Array();
                            var coordinateFirst = pointList[j - 1].getGeometry().getCoordinates();
                            var coordinateSecond = pointList[j].getGeometry().getCoordinates();
                            twoCoordinatePoint.push(coordinateFirst);
                            twoCoordinatePoint.push(coordinateSecond);
                            var lineString = new ol.geom.LineString(twoCoordinatePoint);

                            var lineFeature = new ol.Feature({
                                geometry: lineString
                            });

                            PVLayer.getSource().addFeature(lineFeature);
                            pointList[j - 1].setStyle(null);
                        }
                        pointList[j].setStyle(iconstyle);
                        PVLayer.getSource().addFeature(pointList[j]);
                    }
                    else {
                        clearInterval(stoptime);
                    }
                    j++;
                }, 300);

            },
            error: function (result) {

            }
        });
    }
时间: 2024-11-05 18:44:22

OpenLayers 3 实现轨迹回放的相关文章

百度地图利用DrivingRoute做轨迹回放

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"

使用百度地图API实现轨迹回放

调用百度地图API实现路线的轨迹回放功能其实很简单,只要搞懂以下几点即可: 1.需要用Polyline方法先绘制好路线图 2.用Marker添加标注点 3.关键一步,通过结合定时器,使用Marker创建的标注点实例的setPosition改变标注点位置,实现播放功能 代码分享,直接复制即可使用 [html] view plaincopy <!DOCTYPE html> <html> <head> <meta name="viewport" co

如何实现LBS轨迹回放功能?含多平台实现代码

本篇文章告诉您,如何实现轨迹回放.并且提供了web端,iOS端,Android端3个平台的轨迹回放代码.拷贝后可以直接使用.另外,文末有小彩蛋,算是开发者的福利. Web端/JavaScript 实现轨迹回放有2个主要功能需要实现,1个是定位取点,1个是按照轨迹慢慢移动Marker. 如何实现定位取点,可以看之前的文章:http://www.cnblogs.com/milkmap/p/4962085.html 本篇文章里的定位点,我就直接假设一堆点,可以push到数组里. var marker,

百度地图轨迹回放,自定义路书,边走边画线

在原有的百度路书的基础上,做了修改,使其能实现边走边画线的需求. 源代码如下,其中您的密钥要换成自己的,如果不换,则需要粘贴到百度API示例里面的GPS路书的编辑器中才能运行 <html lang="en"> <head> <meta charset="utf-8" /> <title>轨迹回放(路书)</title> <style type="text/css"> body

GPS/轨迹追踪、轨迹回放、围栏控制

折腾一个多月终于弄完了这个项目,起初都未曾接触GPS/轨迹追踪.轨迹回放.圈划围栏...等一些在百度地图或者Googel地图操作的一些业务,后端的业务相对来说简单点 cas单点登录,mongdb灵活的数据存储方式,ActiveMQ消息推送.Redis存储... 这篇的主要篇幅主要来讲述下项目中的一些地图上棘手的问题 接口测试数据: 1.GPS数据接收接口对于日期格式的转化 作为码农都知道Web接口传输的数据都是以Json的数据形式传输,日期格式不同是我们头疼的事情,当然要是我们自己给App端,云

使用GMap.NET类库,实现地图轨迹回放。(WPF版)

前言 实现轨迹回放,GMap.NET有对应的类GMapRoute.这个类函数很少,功能有限,只能实现简单的轨迹回放.要实现更复杂的轨迹回放,就需要自己动手了. 本文介绍一种方法,可以实现复杂的轨迹回放.有句话"功夫在诗外",GMap.NET给你提供了基本地图处理功能:但是不要让CMap.NET束缚了手脚.你需要有深刻理解地图实现原理,深入理解WPF动画的原理,才能到达随心所欲.最终的效果如下: GMap.NET 显示原理 地图就是由许多方格"瓦片"组合而来.当你移动

单次轨迹回放

已知有一段轨迹数据,点击回放按钮,小车沿着路线自动的往前运动,播放完毕也就结束了 public class MoveSingleThread extends Thread{ private List<LatLng> mLatLngList; private Marker mCarMarker; public MoveSingleThread(List<LatLng> latLngs, Marker marker) { super(); mLatLngList = latLngs;

GPS功能:百度路书自定义【轨迹回放】

如题所述:百度的编辑界面很直观,修改后就可以运行,地址:http://developer.baidu.com/map/jsdemo.htm#c2_8: 因为同事研究了一下午结果都没搞出来,他copy百度示例的代码写的很混乱,贴来贴去的,结果把自己陷进去了,看到如此情形实在不忍心啊,(毕竟是demo,百度提供的代码大可以大刀阔斧的修改,不用吝啬)于是就参与了进去.先看API,然后看示例分析,必须要修改生成自己的轨迹线,如果能找到回到函数对轨迹数据进行自定义问题就解决了,果不其然就是这样的.关键还是

mui 地图轨迹回放

<!doctype html><html> <head>        <meta charset="UTF-8">        <title></title>        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user