WebGIS第十一课：智慧校园项目（3）

推荐游览路线和动画效果

本课先实现导航功能，就是路劲规划功能。

首先，在地图上添加一个div框，实现导航按钮。

代码：

    <div class="input-card" style="width:10rem;"><h4>推荐游览路线</h4><div class="input-item"><button class="btn" onclick="startAnimation()">开始动画</button></div></div>

和添加按钮类似，只要使用高德的CSS就可获得相应的UI

这里实现了，一个可以点击导航的按钮：

按这个按钮的时候，用户希望获取路线。这里就需要写一个回调函数。

在上一节课的基础上，在最后面（不包含在地图监听地图点击事件的括号里独立出来）写代码：

        function startAnimation(){AMap.plugin('AMap.Driving',function(){var driving = new AMap.Driving({map:map,policy: AMap.DrivingPolicy.LEAST_TIME,//驾车策略})//设置起点和终点var start = new AMap.LngLat(114.400984, 30.518653)var end = new AMap.LngLat(114.404755, 30.523851)driving.search(start,end,function(status, result){if(status=='complete'){}else{}})})}

首先，实现了对按钮单击的回调，先创建一个驾驶对象，这个对象规定了显示在地图上，同时采取最短时间的驾车策略。

随后，定义两个对象，这两个对象赋予经纬度，作为起点和终点

之后，开始使用search方法，并代入起点和终点，这时候就能生成驾车路径了。注意，这里还多谢了个驾车搜索的回调函数，这个函数目前是空的。

这样就实现了图中的效果。

下面来看一下怎么增加途经点。

这里可以设置一个可选项，这就是search函数的第三个参数，我们上面省略了的

function startAnimation(){AMap.plugin('AMap.Driving',function(){var driving = new AMap.Driving({map:map,policy: AMap.DrivingPolicy.LEAST_TIME,//驾车策略})//设置起点和终点var start = new AMap.LngLat(114.400984, 30.518653)var end = new AMap.LngLat(114.404755, 30.523851)// 创建途经点var opts = {waypoints: [],}geojson.eachOverlay(function(item){//拿到每一个点opts.waypoints.push(item.getPosition())})driving.search(start,end,opts,function(status, result){if(status=='complete'){}else{}})})}

添加途经点后，搜索路径就会考虑每一个点，当然，这里的点是有顺序的，必须一个一个的来，而不是看谁和谁近。

最终的效果如下：

WebGIS第十一课：智慧校园项目（3）相关推荐

WebGIS第十二课：智慧校园项目（4）
最后我们来谈一下动画的实现动画实际可以理解为对轨迹的模拟,当路径成功生成后,激发对路径的模拟,这里用判断语句来实现这个逻辑: driving.search(start,end,opts,functi ...
WebGIS第九课：智慧校园项目（1）
数据持久化,我们之前做的都是临时数据,为了很好的存储地理数据,我们使用GeoJSON格式. # 1 引入资源创建地图代码: <!DOCTYPE html> <html lang= ...
【新鲜出炉】腾讯云拿下新一代智慧校园项目，中台是建设重点
2022年9月5日,中山大学新一代智慧校园建设项目(一期)(中大招(服)[2022]119号/CLF0122GZ08ZC90)发布中标结果公告. 一.项目编号:中大招(服)[2022]119号/CLF ...
java做智慧校园项目_智慧校园项目解决方案.ppt
基于云服务平台的智慧校园解决方案目录第一部分第二部分智慧校园整体解决方案讲解 (概念.优劣对比.涵盖范围.云计算优势) 智慧校园产品优势劣势分析解决方案讲解--智慧校园什么是智慧校园?? ...
WebGIS第十课：智慧校园项目（2）
这就是这一课的成品,实现了打卡功能,能在标记点显示打卡次数.标记点不会消失,就算重启浏览器也能保存. 书接上回,我们用geojson实现了标记点的保存,那么怎么来实现打卡功能呢,这就需要监听标记点的点 ...
Axure高保真智慧校园管理系统/校园管理/人事管理/学籍管理/教学管理/流程审批/备课管理/考务管理/成绩管理/排课管理/选课管理/选课系统/调课申请/教师考评管理/web端管理系统
Axure高保真智慧校园管理系统/校园管理/人事管理/学籍管理/教学管理/流程审批/备课管理/考务管理/成绩管理/排课管理/选课管理/选课系统/调课申请/教师考评管理/web端管理系统 Axure原型 ...
智慧校园管理系统、智慧学工、办公自动化、校园管理、人事管理、学籍管理、教学管理、流程审批、备课管理、考务管理、成绩管理、排课管理、选课系统、调课申请、教师考评、学期配置、综合测评、绩效管理
智慧校园管理系统.智慧学工.办公自动化.校园管理.人事管理.学籍管理.教学管理.流程审批.备课管理.考务管理.成绩管理.排课管理.选课系统.调课申请.教师考评.学期配置.综合测评.绩效管理.web端管 ...
广西理工职业技术学校计算机,广西理工职业技术学校：智慧校园建设腾飞之路...
广西理工职业技术学校是国家公办中专学校,是国家重点中专学校,也是国家第一批教育信息化试点单位.学校现有中职在校生23142人,教职工总数1334人,专任教师1193人.学校建有校内实训基地19个,实验 ...
案例 | 蓝天智通：智办事助力“智慧校园”数智化管理，提升人效
01.客户介绍北京蓝天智通科技有限公司以物联网.虚拟化技术为基础,开发数智校园一体化管理系统,助力中国教学管理,实现数字化.可视化.智能化,打造数字孪生智慧校园,赋能教育行业,提高教育信息化和现代化 ...

WebGIS第十一课：智慧校园项目（3）

WebGIS第十一课：智慧校园项目（3）相关推荐

最新文章

热门文章