arcgis飞行轨迹动画_ArcGIS轨迹回放

2017-8-20

前言

又到了周六，打完球，吃完饭，闲来无事，便把这周干的事情总结一下，顺便写个博客，分享给大家。

本来说好这周研究三维GIS的，但是看完官方文档发现只有最新的100版本推出了三维GIS，在加上小组长临时让我在2DGIS上研究一下轨迹回放，经过多次改动，最终在周四完成了这个功能，然后周五摸了一天的鱼(心里绞痛)。

整个功能通过你给的点的集合(小组长要求每个点相隔十分钟，当然，你们可以随便间隔)，在地图上一步一步通过动画绘制出路线，每次到达一个点时，会显示出在这个点的时间，如果前后2个点没有太大的变化(也就是原地不动)，每次会暂停一秒，然后继续绘制。

一些ARCGIS基础的开发，我就不说了，源码我也上传到GItHub上了，有兴趣的童鞋可以去看看。

好了，闲话就扯到这，开始吧。

效果实现

让我们先看看效果图

从动图中我们可以看到3个效果，下面我们依次分析下怎么实现。

首先轨迹回放的动画，是通过handler发送消息绘制Polyline来实现的，将所有的点分段绘制，正在走的为一种颜色，走完的为另一种颜色，没2个点为一段动画，通过你要求的所有的动画时间，计算每一段动画的绘制速度(100毫秒)，每当发送一个消息(每100毫秒发送一次)，便增加polyline.lineto()的坐标，以实现线移动的效果。

每一段动画中一共有2个polyline，第一个是正在走的polyline(临时线段)，没100毫秒画一次(根据计算出的速度)，当每一段动画结束时，移除第一个polyline,绘制第二个动画结束的polyline(最终线段)，这样就实现了我们轨迹回访时得绘制动画。还有一个就是移动的图标，我们通过PictureMarkerSymbol来构建自己的移动图标，同样通过handler发送消息，根据速度增加坐标，每发送一次，移除上一个图片，重新绘制，实现移动的效果。

显示这个点的时间，无非就是判断一下这个点的经纬度时候是否和增加后的经纬度一致，之后再弹出一个显示框就可以了。

以上就是我们实现的思路了，下面我们来看看代码和难点。

代码

在代码之前，要说几个MapView的绘制时的特性。

我们绘制时，无论是线路还是图标，我们都是通过底图的投影坐标绘制的，所以我们需要将经纬度坐标转换为底图的投影坐标，否则无论你的点在哪里，都只会绘制在一个地方。

要将WGS-84转换为投影坐标，我们可以通过

Point mapPoint = (Point) GeometryEngine.project(wgsPoint ,SpatialReference.create(4326),map.getSpatialReference());

但有时候(没错，我就是那个但是)，mapview是拿不到SpatialReference的，所以我们需要通过查阅自己的SpatialReference

arcgis飞行轨迹动画_ArcGIS轨迹回放相关推荐

arcgis飞行轨迹动画_高德地图，百度地图，arcgis地图利用canvas动画绘制圆形扩散、运动轨迹等动态效果...
本文转发自热爱前端知识的博客原博客地址介绍在ECharts中看到过这种圆形扩散效果,类似css3,刚好项目中想把它用上,but我又不想引入整个echart.js文件,更重要的是想弄明白它的原 ...
vue使用高德地图制作小车轨迹回放动画简单案例
首先在根目录public中的index.html引入高德地图 <script type="text/javascript" src="https://webapi. ...
android中高德地图轨迹回放,轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API...
轨迹回放 html, body, #container { height: 100%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; w ...
基于Leaflet实现路径轨迹回放功能
效果图: 说明: 1.该功能是在这篇博客基础上完成的:ArcGIS JS API 实现路径轨迹回放但是里面有点小问题:首先,小车并不是匀速运动的,而是每一段的运行时间固定,所以在该博客上进行了修改 ...
微信小程序实现活动轨迹回放
前言本文介绍使用组件map和API的MapContext+wx.getLocation来实现活动轨迹回放. 最终效果: 实现过程 1. 文件index.wxml代码如下,这一块比较简单,可自行查看, ...
uniapp地图轨迹回放
uniapp地图轨迹回放欢迎使用ay-contrail插件最近有需求为:在地图上展示一些点的轨迹,按时间先后顺序回放.已实现任意多点的轨迹回放,整理插件代码如下: 1.ay-contrail插件 ...
uni-app map路线轨迹回放功能及turf.js实现缓冲区渲染（微信小程序）
使用uni-app中 map组件实现路线轨迹回放功能. 1.通过接口获取返回的轨迹点. 2.地图的坐标系与轨迹点的坐标系要保持一致,否则轨迹有偏差.点经纬度转换,wgs84togcj02 =>j ...
高德地图实现多天路线规划(途经点显示自定义内容)+轨迹回放（显示车牌）
联系作者Q/V:783021975 Tips: 1.高德地图最多支持16个途径点,如果超过可以进行数据优化,或进行数据再次拆分进行规划先看下效果 HTML代码记得修改自己的KEY ...
高德地图3D轨迹回放 + 视野跟随功能
高德地图3D轨迹回放 + 视野跟随功能概述代码实现步骤完整代码 (需要添加一个2.0的key) 概述若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面 ...

arcgis飞行轨迹动画_ArcGIS轨迹回放

arcgis飞行轨迹动画_ArcGIS轨迹回放相关推荐

最新文章

热门文章