动态轨迹运动

Posted 2022-12-06 weixin_44543308

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： Code iClent

撰写日期：2020年05月17日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    我们在之前的学习或者项目需求当中如果想要展现点标志的一个移动效果，之前我们都是用Maker来标志点按照时间的设定来进行移动的，但是呢这样就会造成画面闪烁的一个问题，而且随着数据量的不断增加对地图数据进行移动或者是我们对进行一个放大缩小操作的时候也会造成浏览器的一个卡顿现象，那么基于这种问题我们借助Echarts来进行效果的实现，比如说我想实现一个像车辆一样行驶的轨迹展示在地图上或者是监控大屏幕上呈现过往车辆的进行状态，以一种更加直观清晰的效果呈现出来，那么用这个SuperMap iClent for Leaflet 动态轨迹效果图层Echarts来进行展示，下面我们来看下动态轨迹的效果的一个具体实现思路，实现这种功能的步骤：分别是地图数据的加载à特定属性图层的SQL查询à运动轨迹的展现à以及最后将轨迹的效果展示在地图上，下面我们来看下是如何实现运动轨迹的：

地图数据是我们用的示范数据当中的map-China400的地图数据à首先我们还要引进脚本库，同时还要将对应的第三方库Echarts引进来:include=”echarts”，如下所示：

<script type="text/javascript" include="leaflet.heat" src="dist/leaflet/include-leaflet.js"></script>

<script type="text/javascript" include="echarts" src="dist/leaflet/include-leaflet.js"></script>

引入完成后接着就是加载地图先创建一个地图对象设置它的中心点、比例尺等信息再用tiledMapLayer 接口将地图添加进来，这里的url就是与iServer进行一个服务对接发布的地图服务的地址，如下图：

地图加载好之后我们就要车运行的轨迹它是延线运动的路径，那么这里就可以通过查找这个路线来进行实现，在这里我们用属性查询中的SQL查询来查找轨迹图层，我们来看下SQL查询的相关接口，SOL查询接口可以在浏览器当中输入iclient.superMap.io这个网址里面查询进去之后点击 for leaflet 的API中的文档里面IServer à 地图 à地图查询 àL.supermap.queryService à queryService 中的参数（params（SQl 查询相关的参数类）、callback（回调函数）、resultFormat（要返回的结果类型）），SQl查询的参数类是需要设置 options 如下图：

   我们在这查询的是Arterial_Road_ln的图层那么它代表的就是这个主干线道路的一个图层，对于这个属性过滤条件我们这里查询选取的是北京地区的几条主干线道路，这里大家还是要注意下坐标不一致的问题，因为这里我们用的是3857的投影坐标系的数据，所以我们就需要转换成经纬度的坐标:如下图：

那么现在的运动轨迹路线就查询成功，我们想要的小车按照这个线路的节点来进行移动，下面我们就需要线转换成为节点à添加小车的图表，如下：

接下就是设置关于运动轨迹的效果，在进行小车移动延着轨迹的节点进行移动的效果设置的时候，我们就可以参考Echarts官网的示范例子来进行设置，在这里我们设置有（移动的速度à纬纪的长度à特效的大小等等）如下图：

那么整个小车运动轨迹就实现了，我们现在就来看下它的一个效果，如下：

最后就实现了小车按照我们的查找的这个制定的轨迹进行移动的效果。