supermap leaflet （二）运动点及轨迹

本篇文章用setInterval方法实现运动点及轨迹。

获取点位坐标组。

 var cord = [];for(var i = 0; i < 200; i++){cord[i] = [Math.random() * 10, Math.random() * 100 - 20];}

动态显示坐标点

 //用setInterval动态显示var count = 0;var marker;var interval = window.setInterval(showPoint,1000); //每一秒刷新一次//动态显示标记点function showPoint(){if(count >= cord.length){ //显示完全部点位后不再进行循环window.clearInterval(interval);count = 0;return;}if(marker != null){marker.remove(); //移除上一个点}marker = L.marker(cord[count]); //本次要显示的标记点，若要自定义标记点的样式等属性，请参考leaflet官方文档marker.addTo(map); //将标记点添加到地图count++;}

4.运动轨迹

 //用setInterval动态显示var count = 0;var tractory;var interval = window.setInterval(showTractory,1000); //每一秒刷新一次//运功轨迹function showTractory(){if(count >= cord.length){ //显示完全部点位后不再进行循环window.clearInterval(interval);count = 0;return;}if(tractory != null){tractory.remove(); //移除上一次刷新时的轨迹，若不移除，本次刷新时也可只添加最后两个点之间的连线}var tractoryData = [];for(var i = 0; i <= count; i++){ //获取轨迹坐标组tractoryData[i] = cord[i];}tractory = L.polyline(tractoryData, {color: 'red'}); //本次要显示的轨迹，并设置颜色，其他属性可以参考leaflet的官方文档tractory.addTo(map); //将轨迹添加到地图count++;}

5.运动点及轨迹同时显示完整代码（代码引用supermap官方实例《4326底图》）


<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<!-- 引用leaflet.js -->
<script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";var map, url = host + "/iserver/services/map-world/rest/maps/World";map = L.map('map', {crs: L.CRS.EPSG4326,center: [0, 0],maxZoom: 18,zoom: 1});L.supermap.tiledMapLayer(url).addTo(map);//获取随机点位坐标var cord = [];for(var i = 0; i < 200; i++){cord[i] = [Math.random() * 10, Math.random() * 100 - 20];}//用setInterval动态显示var count = 0;var marker, tractory;var interval = window.setInterval(function(){showPoint();showTractory();count++;},1000); //每一秒刷新一次//动态显示标记点function showPoint(){if(count >= cord.length){ //显示完全部点位后不再进行循环window.clearInterval(interval);count = 0;return;}if(marker != null){marker.remove(); //移除上一个点}marker = L.marker(cord[count]); //本次要显示的标记点，若要自定义标记点的样式等属性，请参考leaflet官方文档marker.addTo(map); //将标记点添加到地图}//运功轨迹function showTractory(){if(count >= cord.length){ //显示完全部点位后不再进行循环window.clearInterval(interval);count = 0;return;}if(tractory != null){tractory.remove(); //移除上一次刷新时的轨迹}var tractoryData = [];for(var i = 0; i <= count; i++){ //获取轨迹坐标组tractoryData[i] = cord[i];}tractory = L.polyline(tractoryData, {color: 'red'}); //本次要显示的轨迹，并设置颜色，其他属性可以参考leaflet的官方文档tractory.addTo(map); //将轨迹添加到地图}
</script>
</body>
</html>

supermap leaflet （二）运动点及轨迹相关推荐

走好每一步，基于C实现机器人运动学建模与标定、运动规划、轨迹规划算法
走好每一步,基于C实现机器人运动学建模与标定.运动规划.轨迹规划算法废话综述一:C部分初始C语言 Chapter2-4:基本数据类型 Chapter5-7:运算符.表达式.循环.分支与跳转 C ...
预测控制（二）：NMPC轨迹跟踪
预测控制(二):NMPC轨迹跟踪本文先讲解NMPC如何应用于差速机器人,然后给出python实现的主要代码. MPC缺陷 MPC的缺陷主要在于线性化和路径上:线性化会使预测出现误差:同时对路 ...
《SuperMap GIS二次开发MVC实战训练---江海区慢性病防治院系统》项目研发阶段性总结
<SuperMap GIS二次开发MVC实战训练-江海区慢性病防治院系统>项目研发阶段性总结作者:爱怡同学本次任务完成时间:2019年1月1日-2019年1月10日开发工具与关键技术 ...
Supermap GIS二次开发之查询面内数据是否有点数据
Supermap GIS二次开发之查询面内数据是否有点数据作者:谢景,撰写时间:2019-1-18 在我们进行GIS二次开发的时候,经常会需要查询某个面区域里是否有点数据,或者是面区域里面的点数据是 ...
SuperMap GIS二次开发MVC实战训练-佛山顺德慢性病GIS项目总结
SuperMap GIS二次开发MVC实战训练-佛山顺德慢性病GIS项目总结作者:谢景任务完成时间:2018年12月24日-2019年1月15日完成模块功能:区域定位.查询搜索.路径分析.周边分 ...
css3运动后留下轨迹尾巴_机器人轨迹规划简介
轨迹规划,往往称为机器人轨迹规划,属于低层规划,基本上不涉及工人智能问题,而是在机械手运动学和动力学的基础上,讨论在关节空间和笛卡儿空间中机器人运动的轨迹规划和轨迹生成方法.所谓轨迹,是指机械手在运动 ...
平安大视野解读主动健康：以运动改变生命轨迹，以名医权益为健康保驾护航
"每个人都会老,这不可避免,但是能不能老的迟一点?让我们能够活到一百岁还能够运动,不需要别人照顾,这是最大的成功:而科学运动是最关键的方式."5月6日,在平安私人银行联合平安健康举 ...
css3运动后留下轨迹尾巴_球磨机的工作原理及机内运动轨迹分析
球磨机被广泛用于矿山.建筑材料.耐火材料.玻璃陶瓷等行业作为磨粉作业的主要设备.那么球磨机的工作原理及运动轨迹你都了解么?下面小编带你深入了解其原理及运动轨迹. 一.球磨机工作原理球磨机的主要部分& ...
python画运动物体的轨迹_使用python进行运动轨迹合并：多次骑行跑步轨迹叠加显示...
现有各种各样的运动app.运动手表手环以及gps码表等可以用于记录日常骑行或跑步等运动轨迹;但轨迹显示多数只限于显示一天的轨迹,经过搜索只发现一篇文章介绍跑步轨迹叠加方法(查看),根据教程尝试了下还因 ...

supermap leaflet （二）运动点及轨迹

supermap leaflet （二）运动点及轨迹相关推荐

最新文章

热门文章

supermap leaflet （二） 运动点及轨迹

supermap leaflet （二） 运动点及轨迹相关推荐

最新文章

热门文章

supermap leaflet （二）运动点及轨迹

supermap leaflet （二）运动点及轨迹相关推荐