js室内地图开发_如何使用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= newesmap.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();
//画轨迹线函数
functiondrawLine(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);functionupdated() {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!
js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能相关推荐
- uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染(微信小程序)
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
- 室内定位算法_室外定位用卫星,室内定位用什么?
提起定位导航,大家首先想到的是北斗.GPS等定位系统. 但是,室内场景受到建筑物的遮挡,GNSS信号快速衰减,甚至完全拒止,卫星定位就无法使用. 近年来,位置服务的相关技术和产业正从室外向室内发展. ...
- 高德地图轨迹回放功能
一.介绍 在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
- db2v9/9.5高级应用开发_使用 Vue.js 2.0 开发单页应用
来源 | https://www.sitepoint.com/up-and-running-vue-js-2-0/ 早在去年9月份,流行的 JavaScript 框架 Vue.js 就发布了 V2 版 ...
- vue.js组件的练习_由Vue.js开发的电阻器颜色练习网站
vue.js组件的练习 ResisColor (ResisColor) ⚡ A resistor color practice website develop by Vue.js. ⚡电阻器颜色练习网 ...
- Node.js Web开发_设置Node.js(1)
电子书推荐 Multithreaded JavaScript: Concurrency Beyond the Event Loop Computers For Seniors For Dummies, ...
- js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量 浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
- 在vscode运行js 输出会合并_前端系列——JS的运行与输出
问题: JS如何被运行? JS运行后如何输出结果? 回答: 1--解答:JS的运行有两种方式,第一种是把代码放到浏览器中,让浏览器内核来渲染解析:第二种是基于NODE,NODE也是一种基于V8引擎的渲 ...
- 小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语 偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景 刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
最新文章
- 网站转化率做不好多半是这三大因素产生干扰
- ST17H26之编译链接选项
- 跑monkey需要安装什么_安装隔音吊顶需要注意什么 隔音吊顶材料推荐
- WindowsPhone-GameBoy模拟器开发四--Gameboy显示系统分析
- android传感器获取运动方向,Android开发者指南-运动传感器Motion Sensor[原创译文]...
- 快速理解网络通信协议
- 【牛客 - 317C】小a与星际探索(背包dp 或 线性基)
- Highcharts x轴为时间时,设置plotBands
- CentOS部署SpringBoot项目(二)
- 健身房,我用python给她写了个小米计时器助人为乐
- ubuntu 时间戳不对
- 高清成主流 十大最受用户关注摄像头
- 抓包工具Fiddler的安装与使用
- python构建带数字的古诗词数据集
- CPSR 和 SPSR
- 用R自动生成pdf文件
- 【身份鉴别-身份标识】Linux系统用户及用户组管理
- 如何在Visio里面添加“左”箭头
- Python集合—数据比较方式
- mybatis plus 事务管理器_最全MyBatis核心配置文件总结,可以作为工具先收藏了