尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
零基础WebGIS开发入门 | 智慧校园项目实战:路径模拟,实现动画
今天来实现轨迹动画让小车沿着路线动起来。动画实际可以理解为对轨迹的模拟当路径成功生成后激发对路径的模拟这里用判断语句来实现这个逻辑driving.search(start,end,opts,function(status, result){ if(statuscomplete){ // 实现轨迹的模拟 }else{ } })一、创建小车标记先做一个小车的标记var marker new AMap.Marker({ map: map, position: start, icon: https://webapi.amap.com/images/car.png, offset: new AMap.Pixel(-26, -13), autoRotation: true, angle: -180, })这个小车规定了自动旋转起始位置在起点显示在地图上。offset设置图标偏移量让图标中心对准路线。autoRotation: true让小车沿着路线方向自动旋转车头。angle: -180设置初始角度。二、创建行驶轨迹线创建一个折线对象用来显示车行驶走过的路var passedPolyline new AMap.Polyline({ map: map, strokeColor: #AF5, // 描边的绿色 strokeWeight: 6, // 线宽 })定义路径属性绿色描边线宽6像素。三、绑定移动事件给marker的移动事件赋予回调函数也就是给折线定义具体的路径marker.on(moving, function(e) { passedPolyline.setPath(e.passedPath) })当小车移动时e.passedPath会返回已经走过的路径实时更新到passedPolyline上显示。四、设置小车移动先调整地图的显示范围然后规定小车移动参数map.setFitView() marker.moveAlong(lineArr, { duration: 500, autoRotation: true, })setFitView()让地图自动缩放到能看到完整路线的范围。moveAlong让小沿着lineArr路径移动duration: 500表示每个点之间移动耗时0.5秒autoRotation: true开启自动旋转。五、计算路径点数组这里有一个量还需要预定一下就是lineArr。之前在规划路径时路其实是由很多的散点顺序连接组成的这个lineArr就是存储这些散点而这些散点都是在result中存储的。也就是说生成路径后result结果就会返回当前轨迹对象其中包含了导航信息。那么就需要在判断体中先根据result计算lineArrvar lineArr [] result.routes[0].steps.forEach(function(item) { lineArr.push(...item.path) })点击开始动画按钮后地图先画出蓝色规划路线然后一辆小车出现在起点沿着路线开始移动。小车车头始终朝向行驶方向已经走过的路变成绿色轨迹线。地图自动缩放到合适范围完整展示行驶过程。六、总结轨迹动画的核心逻辑路径规划成功后从result中提取所有轨迹点组成lineArr创建小车标记和轨迹线绑定moving事件实时更新已走路径最后调用moveAlong让小车间隔0.5秒沿路线移动。到这里零基础WebGIS开发入门系列全部讲完。从地图显示、控件使用、点标记交互、矢量图形、几何计算、GeoJSON持久化到智慧校园项目的需求分析、打卡功能、路径规划、轨迹动画完整走了一遍WebGIS开发流程。下一期我们更新二维webgis开发的地图框架openlayers感兴趣的同学可以跟着一起学习。本期内容大家可以先上手看看有不懂的留言
RELATED

相关推荐

非程序员24小时完成知识管理工具迁移:从OpenClaw到Hermes实战指南

非程序员24小时完成知识管理工具迁移:从OpenClaw到Hermes实战指南

1. 项目缘起:一个非技术背景用户的真实困境如果你和我一样,是一个重度依赖某个特定工具来完成日常工作的人,那么你一定能理解那种“工具依赖症”带来的安全感与焦虑感。安全感来自于它帮你处理了所有繁琐的流程,让你可以专注于内容…

📅 2026/11/7 10:04:52
构建万级QPS多模态AI审核系统:架构设计与工程实践

构建万级QPS多模态AI审核系统:架构设计与工程实践

1. 从“人眼审核”到“AI流水线”:为什么我们需要万级QPS的审核系统?几年前,我还在一个内容平台负责审核团队的技术支持。那时候,最让人头疼的就是深夜的流量高峰。一个热点事件爆发,用户上传的视频量瞬间激增&#xf…

📅 2026/10/6 9:50:47
Java泛型面试解析:从基础到实战应用

Java泛型面试解析:从基础到实战应用

1. Java泛型面试问题解析:从基础到实战泛型作为Java语言的核心特性之一,是面试中必问的技术点。我在技术面试中经常发现,即使是工作3-5年的开发者,对泛型的理解也往往停留在表面用法。本文将深入解析5个高频泛型面试问题&#xff…

📅 2026/10/8 18:52:59
MORE NEWS

更多资讯

📰

考电工证做多少题培训机构怎么选

电工证考试做多少题,真实经历告诉你怎么选 你学历不高怕报不上名?别急,我来跟你唠唠考电工证到底做多少题,还有怎么选培训机构,别让那些培训机构坑了你。…

📰

偃师高压电工证办理怕考不过白交培训费?内部消息告诉你怎么稳过

偃师高压电工证办理怕考不过白交培训费?内部消息告诉你怎么稳过 怕考不过白交培训费?偃师高压电工证办理正火,但很多人还在纠结要不要报班。其实你不是一个人,我之前也犯过同样的错,交了钱还白忙一场。今天这波 内部消息…

📰

蕉岭哪里考电工证好点千万别踩坑怎么选正规机构

蕉岭哪里考电工证好点千万别踩坑怎么选正规机构 你是不是也遇到过这种情况,找了个“中介”代办电工证,结果花了钱没拿到证,还被坑了? 千万别踩坑…

📰

威宁电工证在考怎么选培训机构?怕考不过白交培训费?

威宁电工证在考怎么选培训机构?怕考不过白交培训费? 怕考不过白交培训费?别急,威宁电工证在考这件事,你得先搞清楚 值不值得考…

📰

2026河南最新政策下岭东电工证怎么考?实操考试心里没底怕挂科?看完这篇就够了

2026河南最新政策下岭东电工证怎么考?实操考试心里没底怕挂科?看完这篇就够了 实操考试心里没底怕挂科?别慌,2026河南最新政策下,岭东电工证考试流程、材料准备、通过率、实操技巧全在这篇讲透。如果你在洛阳涧西区从事房建工程,考个岭东电工证…

📰

钢结构施工所需特种工千万别踩坑,别让培训费打水漂

钢结构施工所需特种工千万别踩坑,别让培训费打水漂 怕考不过白交培训费?钢结构施工所需特种工考试真的很难?别担心,今天我以许昌培训机构学员的身份,来跟你聊聊这些事儿。说实话,这证考过的人不少,但真正知道怎么考、怎么准备的不多,很多人就是踩坑了…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬