如何使用JS来开发室内三维地图的轨迹回放功能

 在制作完成室内三维地图的功能后，最经常有的需求就是如何做人员的轨迹回放，一般流程都是从数据库中查询轨迹坐标后，经过后台查询接口返回给前端，接下来的事情都交给JS来完成。

如果想做好一个性能好的轨迹回放功能，还是很有技术含量的，比如我要加一个时间轴，可以随时拖动时间查询，然后能快速响应显示人的轨迹？

这就需要借鉴视频播放的思路了，每次从后台请求人员位置数据的时候只请求30分钟的(每分钟3条)，然后检查轨迹队列里面是否少于10条，少于的时候就再次请求接下来30分钟的，这样就能保证后台能够每次只查小批量的数据，

能够快速响应返回，当用户拖动播放条时，浪费的人员查询数据就会少很多，这样给用户体验上会感觉好很多。

此篇文章先从实现使用ESMap地图SDK开发一个人的轨迹回放功能开始，有时间轴的后期再分析介绍。

 

开发过程如下图流程：

若有不足，欢迎指正。

首先创建好地图后，我在地图上增加了楼层控制控件、放大缩小控件和二三维切换控件。如下图：

 

做好初步准备工作后开始我的轨迹回放界面书写。

1.创建后台json数据，并引入数据

利用ESMap地图平台的地图点击事件在地图上根据自己规划的路线进行采点收集，然后整理成自己需要的json数据，我的json文件命名为data.json。

//根据地图点击事件 规划路线 采点收集
map.on('mapClickNode', function (event) {
　　console.log(event.hitCoord); //点击地图 控制台显示坐标点
});

得到json数据后，引入到地图：

var coordsData = null;
$.getJSON("data.json", function (data) {
            coordsData = data.points; //获取json数据的数组对象
        });

2.封装文字图片标注函数

我创建的地图是三层商场，为了免去在每层都要做创建标注删除标注的重复性操作，我将文字图片标注封装到一个函数中，哪一层使用到文字图片标注就直接调用CreateMarker()函数：

        function CreateMarker(x, y, fnum) { //标注的坐标点， 所在楼层
            var layer = new esmap.ESLayer('textMarker'); //创建标注图层
            floorLayer = map.getFloor(fnum); // 所在楼层
            tm = new esmap.ESTextMarker({
                x: x,
                y: y,
                name: "小张",
                showLevel: 20,
                height: 0.5,
                image: "image/user.png",
                imageAlign: "bottom",
                imageSize: 50,
                seeThrough: true,
                fillcolor: "1,6,7", //填充色
                fontsize: "8.0", //字体大小
                strokecolor: "255,255,0" //边框色 
            });
            layer.addMarker(tm); //将标注添加到图层
            floorLayer.addLayer(layer); //将图层添加到楼层
        }

3.配置线标注样式，封装画轨迹线函数

        //配置线标注样式
        var lineStyle = {
            lineWidth: 3,
            alpha: 0.8,
            offsetHeight: 0,
            lineType: esmap.ESLineType.FULL //实线
        }

画轨迹线函数drawLine()；

        //画轨迹线函数
        function drawLine(points) {
            if (points.length && points.length <= 1) return; //两个点以上画线
            map.clearLineMarkById("routes");
            //创建线标注对象
            line = new esmap.ESLineMarker("routes", points, lineStyle);
            //调用地图的画线方法
            map.drawLineMark(line);
        }

4.实时刷新轨迹线  END！

     function updateCoord() { //实时刷新轨迹线
            var points = [];
     var lastfnum = 0;
     timer = setInterval(updated, 100);
     function updated() {
             if (coordIndex >= coordsData.length) {
                    clearInterval(timer);
                    timer = -1;
                    map.clearLineMarkById("routes");
          　　　　　　map.getFloor(lastfnum).removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);
                    return;
                }
      　　　　var coord = coordsData[coordIndex]; //取坐标点
               　　　   if (map.focusFloorNum != coord.fnum)
                  map.focusFloorNum = coord.fnum; //判断聚焦楼层 
                　　　  if (lastfnum != coord.fnum) {//如果切换楼层了
                    　　　　if (lastfnum > 0)                     
　　　　　　　　 　　　   map.getFloor(lastfnum).removeLayersByTypes(esmap.ESLayerType.TEXT_MARKER);//先移除上一个楼层的标注
               CreateMarker(coord.x, coord.y, coord.fnum);//再在新楼层添加一个标注
               lastfnum = coord.fnum;
                }
             tm.moveTo({
                 x: coord.x,
                 y: coord.y,
                 time: 0
             });
             //只保留16个点  画轨迹线
               　　　　 if (points.length < 16) {
                points.push(coord);
                drawLine(points); //调用画轨迹线函数
             } else {
                points.shift(); //先踢掉第一个
                points.push(coord); //在把新点加入进去
                drawLine(points);
             }
             coordIndex++;
          }
      }

到这里轨迹回放功能界面就完成啦！是不是很简单。

单层轨迹回放效果图：

 

多层轨迹回放效果图：

 

以上就是我用ESMap的地图制作平台制作的轨迹回放功能，感兴趣的小伙伴快试一下吧，也制作一个轨迹回放来看看！

以上内容体验链接：访问链接

Thank you for reading!