基于Leaflet的轨迹模拟回放

在gis场景中，轨迹回放是一个很常见的场景。比如在导航软件中，在行程结束后根据运动轨迹生成运动图，在keep软件中，会自动记录用户的锻炼轨迹，在结束后可以看到自己的运动轨迹等等。这些需求都是设备在运行中自动记录相应的点，在结合gis模拟即可。本文将采用Leaflet进行模拟轨迹回放。

环境：

1、leaflet.js

2、MovingMarker.js 插件

一、创建地图

// initialize the map on the "map" div with a given center and zoom
var map = new L.Map('map', {zoom: 6,minZoom: 3,
});// create a new tile layer
var tileUrl = 'http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png',
layer = new L.TileLayer(tileUrl,
{attribution: 'Maps © <a href=\"www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',maxZoom: 18
});// add the layer to the map
map.addLayer(layer);

二、设置行为轨迹

var parisKievLL = [[28.8567, 112.3508], [30.45, 130.523333]];
var londonParisRomeBerlinBucarest = [[31.507222, 110.1275], [28.8567, 112.3508],
[31.9, 112.5], [31.516667, 113.383333], [31.4166,126.1]];
var londonBrusselFrankfurtAmsterdamLondon = [[21.507222, 110.1275], [30.85, 114.35],
[30.116667, 118.683333], [22.366667, 114.9], [31.507222, 110.1275]];
var barcelonePerpignanPauBordeauxMarseilleMonaco = [[21.385064, 112.173403],[23.698611, 114.895556],[24.3017, 114.3686],[34.837912, 115.579541],[33.296346, 116.369889],[35.738418, 116.424616]
];
map.fitBounds(londonParisRomeBerlinBucarest);

三、设置运动的marker

var marker1 = L.Marker.movingMarker(parisKievLL, [10000]).addTo(map);
L.polyline(parisKievLL).addTo(map);
marker1.once('click', function () {marker1.start();marker1.closePopup();marker1.unbindPopup();marker1.on('click', function() {if (marker1.isRunning()) {marker1.pause();} else {marker1.start();}});setTimeout(function() {marker1.bindPopup('<b>点我暂停 !</b>').openPopup();}, 2000);
});marker1.bindPopup('<b>点我开始!</b>', {closeOnClick: false});
marker1.openPopup();

四、效果如下所示：

基于Leaflet的轨迹模拟回放相关推荐

端午屈夫子祭-基于LeafLet的夫子一生时空轨迹纵览
目录前言一.要素整理 1.屈夫子的相关资料 2.人物轨迹时间线 3.四维导图整理二.时空轨迹界面设计 1.界面设计 2.可视化采用组件三.时空轨迹展示实现 1.创建一个Html文件骨架文件 2 ...
基于Matlab的单基地雷达模拟检测和跟踪仿真（附源码）
目录一.介绍 1.1 统计雷达模型 1.2 场景管理 1.3 扫描控制二.场景-空中监视 2.1 雷达系统 2.2 参考目标和雷达环路增益 2.3 构建雷达 2.4 方案和目标 2.5 可检测性 ...
无人驾驶汽车系统入门——基于Frenet优化轨迹的无人车动作规划方法
作者简介:申泽邦(Adam Shan),兰州大学在读硕士研究生,主攻无人驾驶,深度学习: 动作规划动作在无人车规划模块的最底层,它负责根据当前配置和目标配置生成一序列的动作.本文介绍一种基于Frene ...
java实现模拟考试系统,基于jsp的驾照模拟考试系统a-JavaEE实现驾照模拟考试系统a - java项目源码...
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的驾照模拟考试系统a, 该项目可用各类java课程设计大作业中, 驾照模拟考试系统a的系统架构分为前后台两部分, 最 ...
java 天猫模拟登陆_基于servlet+filter+反射模拟实现天猫首页的后端
前言:为了深入web原理,本项目没有使用框架,主要描述了从请求到页面展现的思路,详情请见文末的具体项目一.为什么要用filter?直接servlet实现不就行了因为天猫这样的项目需要很多servl ...
Unreal Engine 4 基于网格的水面模拟实现
http://blog.csdn.net/shangguanwaner/article/details/51862644 Unreal Engine 4 水面模拟实现一般游戏里水面的模拟都是实用动态 ...
在Unity中实现基于粒子的水模拟(二：开始着色)
在Unity中实现基于粒子的水模拟(二:开始着色) 文章目录在Unity中实现基于粒子的水模拟(二:开始着色) 前言一.生成顶点二.偏移模拟 1.接收细分着色器输出的顶点 2.根据数据调用对应的 ...
在Unity中实现基于粒子的水模拟(三：混合屏幕)
在Unity中实现基于粒子的水模拟(三:混合屏幕) 文章目录在Unity中实现基于粒子的水模拟(三:混合屏幕) 前言一.着色算法介绍 1.折射 2.反射二.准备纹理 1.获取纹理 2.模糊纹理 ...
计算机模拟爆破过程,基于LSDYNA岩石爆破模拟建模分析
原标题:基于LSDYNA岩石爆破模拟建模分析 Ls Dyna岩石爆破模拟仿真作者:dyna_focus 擅长领域:dyna/abaqus/hypermesh 一. 数值模型的建立 1.1 单元及算法 ...

基于Leaflet的轨迹模拟回放

基于Leaflet的轨迹模拟回放相关推荐

最新文章

热门文章