概述

若有帮助到你，麻烦点一波关注，博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
注意：高德地图必须使用2.0版本
实现功能点：

加载高德3D地图
实现轨迹回放功能
实现视野跟随功能

代码实现步骤

1.加载3D地图

let map = new AMap.Map("container", {resizeEnable: true,center: [116.479126, 39.998563],zoom: 20,pitch: 55.94919957310569,rotation: -0.7908261543741522,viewMode: '3D', //开启3D视图,默认为关闭buildingAnimation: true, //楼块出现是否带动画
});

2.添加小车

let marker = new AMap.Marker({map: map,position: [116.478935, 39.997761],icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",offset: new AMap.Pixel(-13, -26),
});

3.添加小车移动时的监听函数，此处为最重要的代码，在小车开始移动时就一直设置地图中心点和旋转角

marker.on('moving', function (e) {// 设置地图中心点map.setCenter(e.target.getPosition())// 设置旋转角map.setRotation(-e.target.getOrientation())
});

4.开启小车运动

window.startAnimation = function startAnimation() {marker.moveAlong(lineArr, {// 每一段的时长duration: 200,// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置autoRotation: true,});
};

完整代码（需要添加一个2.0的key）

<!doctype html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>轨迹回放</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><style>html,body,#container {height: 100%;width: 100%;}.input-card .btn {margin-right: 1.2rem;width: 9rem;}.input-card .btn:last-child {margin-right: 0;}</style>
</head><body><div id="container"></div><div class="input-card"><h4>轨迹回放控制</h4><div class="input-item"><input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()" /><input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()" /></div><div class="input-item"><input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()" /><input type="button" class="btn" value="停止动画" id="stop" onclick="stopAnimation()" /></div></div>// 添加一个2.0的key值即可以使用<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key="></script><script>// JSAPI2.0 使用覆盖物动画必须先加载动画插件AMap.plugin('AMap.MoveAnimation', function () {var marker, lineArr = [[116.478935, 39.997761],[116.478939, 39.997825],[116.478912, 39.998549],[116.478912, 39.998549],[116.478998, 39.998555],[116.478998, 39.998555],[116.479282, 39.99856],[116.479658, 39.998528],[116.480151, 39.998453],[116.480784, 39.998302],[116.480784, 39.998302],[116.481149, 39.998184],[116.481573, 39.997997],[116.481863, 39.997846],[116.482072, 39.997718],[116.482362, 39.997718],[116.483633, 39.998935],[116.48367, 39.998968],[116.484648, 39.999861]];var map = new AMap.Map("container", {resizeEnable: true,center: [116.479126, 39.998563],zoom: 20,pitch: 55.94919957310569,rotation: -0.7908261543741522,viewMode: '3D', //开启3D视图,默认为关闭buildingAnimation: true, //楼块出现是否带动画});window.map = mapmarker = new AMap.Marker({map: map,position: [116.478935, 39.997761],icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",offset: new AMap.Pixel(-13, -26),});// 绘制轨迹var polyline = new AMap.Polyline({map: map,path: lineArr,showDir: true,strokeColor: "#28F", //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6, //线宽// strokeStyle: "solid"  //线样式});var passedPolyline = new AMap.Polyline({map: map,strokeColor: "#AF5", //线颜色strokeWeight: 6, //线宽});marker.on('moving', function (e) {passedPolyline.setPath(e.passedPath);// 设置地图中心点map.setCenter(e.target.getPosition())// 设置旋转角map.setRotation(-e.target.getOrientation())});map.setFitView();window.startAnimation = function startAnimation() {marker.moveAlong(lineArr, {// 每一段的时长duration: 200,// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置autoRotation: true,});};window.pauseAnimation = function () {marker.pauseMove();};window.resumeAnimation = function () {marker.resumeMove();};window.stopAnimation = function () {marker.stopMove();};});</script>
</body></html>

高德地图3D轨迹回放 + 视野跟随功能相关推荐

android 基于高德地图的轨迹回放
android 基于高德地图的轨迹回放前段时间公司项目有一个需求,就是需要看到设备上传之后的轨迹路线,并且可以实现回放的整个过程,功能包括路线回放.地图位置插点.回放之后的轨迹标记颜色.回放加速等功 ...
H5移动端高德地图巡查轨迹回放 2.0版
注意是HTTPS还是HTTP index.html引入 <script type="text/javascript" src="http://webapi.amap ...
高德地图轨迹PHP,高德地图JSAPI轨迹重复绘制
介绍一个基于高德地图JSAPI轨迹展示案例: 说明: 1.定时接口取数据刷新轨迹: 2.轨迹坐标数量较大: 3.轨迹点位信息需要展示,如时间.速度.多少点位: 4.避免地图重新渲染,只刷新坐标: 使用 ...
华为30 岁以下员工占比 28%；SpaceX：欢迎“攻击”星链；高德地图宣布正式上线“红绿灯倒计时”功能 | EA周报...
EA周报 2022年8月19日每个星期7分钟,元宝带你喝一杯IT人的浓缩咖啡,了解天下事.掌握IT核心技术. 周报看点 1.华为研发费用占年收入 22.4%,30 岁以下员工占比 28% 2.腾讯二 ...
基于高德地图实现融云位置共享功能
基于高德地图实现融云位置共享功能(Android篇) 效果预览: 开发准备: 1: 登录融云开发者账号,提交 server 平台工单申请开通实时位置共享功能.工单回复开通成功后. 2 小时生效. ...
js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
vue 高德地图搜索功能_VUE中使用高德地图做轨迹添加功能,帮助轨迹展示
准备工作使用前准备 : 高德地图key 使用插件: vue-amap 1.npm安装vue-amap npm install vue-amap --save import AMap from 'vu ...
vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI
第一步注册高德开发者平台账号 (个人选择个人账户) 地址见 https://lbs.amap.com/api 第二步在控制台中申请Key(输入key,选择web端,提交即可) 第三步通过JSAp ...
高德地图引入Vue添加POI搜索功能、marker点标记、通过经纬度逆编码过程
安装高德地图 npm i @amap/amap-jsapi-loader --save 引入 import AMapLoader from '@amap/amap-jsapi-loader'; *在组 ...

高德地图3D轨迹回放 + 视野跟随功能

高德地图3D轨迹回放 + 视野跟随功能

概述

代码实现步骤

完整代码（需要添加一个2.0的key）

高德地图3D轨迹回放 + 视野跟随功能相关推荐

最新文章

热门文章

高德地图3D轨迹回放 + 视野跟随功能

高德地图3D轨迹回放 + 视野跟随功能

概述

代码实现步骤

完整代码 （需要添加一个2.0的key）

高德地图3D轨迹回放 + 视野跟随功能相关推荐

最新文章

热门文章

完整代码（需要添加一个2.0的key）