高德3d轨迹展示

最新推荐文章于 2024-04-20 09:58:09 发布
最新推荐文章于 2024-04-20 09:58:09 发布
阅读量1k 收藏
点赞数 1
分类专栏： 高德地图 轨迹展示 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangzhou728/article/details/111666119
版权

3d视图不支持轨迹展示！！！

在这里插入图片描述

但是我还是试了一下，添加俯视角度之后轨迹展示不出来，将下面代码直接复制到高德的示例里面点击开始巡航可以直接看效果

传送门
在这里插入图片描述

<!-- 重点参数：renderOptions -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/navigators.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨迹巡航控制</title>
    <style>
    #container,
    body,
    html {
        height: 100%;
        width: 100%
    }
    #loadingTip,
    #panel {
        position: absolute;
        top: 0
    }
    
    body,
    html {
        margin: 0;
        font-size: 12px
    }
    
    #outer-box {
        height: 100%;
        padding-right: 300px;
    }
    
    #panel {
        right: 0;
        width: 300px;
        z-index: 999;
        height: calc(100% - 5px);
        overflow: hidden;
        overflow-y: auto
    }
    
    #routes-container {
        height: 1200px;
        margin-left: 10px
    }
    
    #loadingTip {
        z-index: 9999;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 13px
    }
    
    .route-item {
        margin-bottom: 10px
    }
    
    .route-item pre {
        margin: 0
    }
    
    .route-item h3 {
        margin: 5px 0;
        font-size: 14px;
        cursor: pointer
    }
    
    .hide {
        display: none
    }
    
    .speedBox {
        padding: 5px 0
    }
    
    .speedRange {
        vertical-align: middle;
        margin: 0;
        padding: 0;
        width: 100px
    }
    
    .markerInfo {
        background: rgba(255, 255, 255, 0.7);
        padding: 2px 5px;
        border: 1px solid #ccc;
        white-space: nowrap;
    }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="container">
        </div>
        <div id="panel">
            <div id="routes-container">
            </div>
        </div>
    </div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    //添加移动动画
      AMap.plugin('AMap.MoveAnimation', function () {
      	  //创建地图
          var map = new AMap.Map('container', {
              resizeEnable: true,
              center: [103.81025,25.45394],
              zoom: 20,
              viewMode: '3D', //开启3D视图,默认为关闭
              pitch: 55.94919957310569,		//俯视角度，添加这个参数轨迹展示不出来
              rotation: -0.7908261543741522,	
              buildingAnimation: true, //楼块出现是否带动画
          });

          AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

              if (!PathSimplifier.supportCanvas) {
                  alert('当前环境不支持 Canvas！');
                  return;
              }

              //just some colors
              var colors = [
                  "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
                  "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
                  "#651067", "#329262", "#5574a6", "#3b3eac"
              ];

              var pathSimplifierIns = new PathSimplifier({
                  zIndex: 100,
                  //autoSetFitView:false,
                  map: map, //所属的地图实例

                  getPath: function(pathData, pathIndex) {

                      return pathData.path;
                  },
                  getHoverTitle: function(pathData, pathIndex, pointIndex) {

                      if (pointIndex >= 0) {
                          //point 
                          return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
                      }

                      return pathData.name + '，点数量' + pathData.path.length;
                  },
                  renderOptions: {
                      pathLineStyle: {
                          dirArrowStyle: true
                      },
                      getPathStyle: function(pathItem, zoom) {

                          var color = colors[pathItem.pathIndex],
                              lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));

                          return {
                              pathLineStyle: {
                                  strokeStyle: color,
                                  lineWidth: lineWidth
                              },
                              pathLineSelectedStyle: {
                                  lineWidth: lineWidth + 2
                              },
                              pathNavigatorStyle: {
                                  fillStyle: color
                              }
                          }
                      }
                  }
              });

              var pathNavigs = [];

              function getNavg(pathIndex) {

                  if (!pathNavigs[pathIndex]) {

                      //创建一个轨迹巡航器
                      var navgtr = pathSimplifierIns.createPathNavigator(pathIndex, {
                          loop: true,
                          speed: parseInt($('#speedInp_' + pathIndex).val()),
                          pathNavigatorStyle: {
                              autoRotate: true,
                        }
                      });

                      var $markerContent = $('<div class="markerInfo"></div>');

                      $markerContent.html(pathSimplifierIns.getPathData(pathIndex).name);

                      navgtr.marker = new AMap.Marker({
                          offset: new AMap.Pixel(12, -10),
                          content: $markerContent.get(0),
                          map: map
                      });

                      var $msg = $('#routes-container').find('div.route-item[data-idx="' +
                          pathIndex + '"]').find('.msg');

                      navgtr.on('move', function() {
                          navgtr.marker.setPosition(navgtr.getPosition());
                          //设置地图中心点跟随
                          map.setCenter(navgtr.marker.getPosition())
                          //设置视图角度
                          map.setRotation(-navgtr.marker.getOrientation())
                      });

                      navgtr.onDestroy(function() {
                          pathNavigs[pathIndex] = null;
                          navgtr.marker.setMap(null);
                          $msg.html('');
                      });

                      navgtr.on('start resume', function() {
                          navgtr._startTime = Date.now();
                          navgtr._startDist = this.getMovedDistance();
                      });

                      navgtr.on('stop pause', function() {

                          navgtr._movedTime = Date.now() - navgtr._startTime;
                          navgtr._movedDist = this.getMovedDistance() - navgtr._startDist;

                          navgtr._realSpeed = (navgtr._movedDist / navgtr._movedTime * 3600);

                          var msgInfo = {
                              '状态': this.getNaviStatus(),
                              '设定速度': this.getSpeed() + ' km/h',
                              '总行进距离': Math.round(this.getMovedDistance() / 1000) + ' km',
                              '本段行进距离': Math.round(navgtr._movedDist / 1000) + ' km',
                              '本段耗时': (navgtr._movedTime / 1000) + ' s',
                              '本段实际速度': Math.round(navgtr._realSpeed) + ' km/h'
                          };

                          $msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');

                          refreshNavgButtons();
                      });

                      navgtr.on('move', function() {

                          var msgInfo = {
                              '状态': this.getNaviStatus(),
                              '设定速度': this.getSpeed() + ' km/h',
                              '总行进距离': Math.round(this.getMovedDistance() / 1000) + ' km'
                          };

                          $msg.html('<pre>' + JSON.stringify(msgInfo, null, 2) + '</pre>');
                      });

                      pathNavigs[pathIndex] = navgtr;
                  }

                  return pathNavigs[pathIndex];
              }

              var navigBtnsConf = [{
                  name: '开始巡航',
                  action: 'start',
                  enableExp: 'navgStatus === "stop" || navgStatus === "pause"'
              }, {
                  name: '暂停',
                  action: 'pause',
                  enableExp: 'navgStatus === "moving"'
              }, {
                  name: '恢复',
                  action: 'resume',
                  enableExp: 'navgStatus === "pause"'
              }, {
                  name: '停止',
                  action: 'stop',
                  enableExp: 'navgStatus === "moving"'
              }, {
                  name: '销毁',
                  action: 'destroy',
                  enableExp: 'navgExists'
              }];

              function refreshNavgButtons() {

                  $('#routes-container').find('div.route-item').each(function() {

                      var pathIndex = parseInt($(this).attr('data-idx'), 0);

                      if (pathIndex < 0) {
                          return;
                      }

                      var navgStatus = 'stop',
                          navgExists = !!pathNavigs[pathIndex];

                      if (navgExists) {
                          navgStatus = pathNavigs[pathIndex].getNaviStatus();
                      }

                      $(this).find('.navigBtn').each(function() {

                          var btnIdx = parseInt($(this).attr('data-btnIdx'));

                          $(this).prop('disabled', !eval(navigBtnsConf[btnIdx].enableExp));

                      });

                  });
              }

              function initRoutesContainer(data) {

                  $('#routes-container').on('click', '.navigBtn', function() {

                      var pathIndex = parseInt($(this).closest('.route-item').attr('data-idx'), 0);

                      var navg = getNavg(pathIndex);

                      navg[$(this).attr('data-act')]();

                      refreshNavgButtons();
                  });

                  for (var i = 0, len = data.length; i < len; i++) {
                      initRouteItem(data[i], i);
                  }

                  refreshNavgButtons();
              }

              function initRouteItem(pathData, idx) {

                  var $routeItem = $('<div class="route-item"></div>');

                  $routeItem.attr('data-idx', idx);

                  $('<h3/>').css({
                      color: colors[idx]
                  }).html(pathData.name + '(点数： ' + pathData.path.length + ')').appendTo($routeItem).on('click', function() {
                      pathSimplifierIns.setSelectedPathIndex(idx);
                  });


                  for (var i = 0, len = navigBtnsConf.length; i < len; i++) {
                      $('<button class="navigBtn" data-btnIdx="' + i + '" data-act="' + navigBtnsConf[i].action + '"></button>').html(navigBtnsConf[i].name).appendTo($routeItem);
                  }

                  $speedBox = $('<div class="speedBox"></div>').appendTo($routeItem);

                  var speedTxt = $('<span><span>').appendTo($speedBox);

                  var speedRangeInput = $('<input id="speedInp_' + idx +
                      '" class="speedRange" type="range" min="1000" max="1000000" step="1000" value="100000" />').appendTo($speedBox);

                  function updateSpeedTxt() {
                      var speed = parseInt(speedRangeInput.val(), 10);

                      speedTxt.html('时速：' + speed + ' km/h');

                      if (pathNavigs[idx]) {
                          pathNavigs[idx].setSpeed(speed);
                      }
                  }
                  speedRangeInput.on('change', updateSpeedTxt);

                  updateSpeedTxt();

                  $speedBox.appendTo($routeItem);

                  $('<div class="msg"></div>').appendTo($routeItem);

                  $routeItem.appendTo('#routes-container');
              }

              window.pathSimplifierIns = pathSimplifierIns;

              $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);

              $.getJSON('https://a.amap.com/amap-ui/static/data/big-routes.json', function(d) {

                  $('#loadingTip').remove();

                  var flyRoutes = [];

                  for (var i = 0, len = d.length; i < len; i++) {

                      if (d[i].name.indexOf('乌鲁木齐') >= 0) {

                          d.splice(i, 0, {
                              name: '飞行 - ' + d[i].name,
                              path: PathSimplifier.getGeodesicPath(
                                  d[i].path[0], d[i].path[d[i].path.length - 1], 100)
                          });

                          i++;
                          len++;
                      }
                  }

                  d.push.apply(d, flyRoutes);

                  pathSimplifierIns.setData(d);

                  initRoutesContainer(d);

                  // for (var i = 0, len = d.length; i < 2; i++) {

                  //     (function(i) {

                  //         setTimeout(function() {

                  //             getNavg(i).start();

                  //             refreshNavgButtons();

                  //         }, 1000 * (i + 1));

                  //     })(i);
                  // }
              });

              pathSimplifierIns.on('selectedPathIndexChanged', function(e, info) {

              });

              pathSimplifierIns.on('pointClick pointMouseover pointMouseout', function(e, record) {
                  //console.log(e.type, record);
              });

              pathSimplifierIns.on('pathClick pathMouseover pathMouseout', function(e, record) {
                  //console.log(e.type, record);
              });
          });
        });
    </script>
</body>

</html>

各位客官要是感觉有用的话能留个小心心嘛,谢谢啦！！！^ v ^
管理员--0728
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
python3维图形_python 画3维轨迹图并进行比较的实例
weixin_32014283的博客
01-29 629
一. 数据的格式首先我们需要x,y,z三个数据进行画图。从本实验用到的数据集KITTI 00.txt中举例：1.000000e+00 9.043680e-12 2.326809e-11 5.551115e-17 9.043683e-12 1.000000e+00 2.392370e-10 3.330669e-16 2.326810e-11 2.392370e-10 9.999999e-01 -4....
高德地图同时显示多个弹窗及根据经纬度画线
no_one_but_you的博客
08-10 935
高德地图同时显示多个弹窗。高德地图使用经纬度画线。隐藏高德地图logo。
高德地图轨迹回放（以及点位信息数据处理和展示）
最新发布
weixin_52048170的博客
04-20 846
绘制行驶路径，点击事件获取到之后可以进行自定义的处理（可以写弹窗点击事件可获取当前点位数据信息 进行展示等操作）我这里的是一秒随机生成一个点位经纬度然后去更新 也是写在 manyPersonWays里面。记得先申请你的高德地图的key（申请对应平台的key）
高德地图-实时导航，路径轨迹显示
04-01
选择起点和终点后点击直接路径导航就会将导航路径及语音播报在地图上显示，由于是实时导航，过在未移动的情况下，移动车辆标记的为显示；代码中对网络及GPS是否连接都做了判断，起点是定位点的位置，终点则自己点击输入框后跳转到选择界面；偏离导航路径将重新计算路径。要想自己做测试请先到高德开发平台注册一个key替换掉AndroidManifest.xml中我用的key，项目是用Android studio开发的。当然，由于没有对定位点坐标进行保存，故小车移动显示的时候是跳动的。
JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（下）
wo_1021的博客
07-29 2141
上篇文章提到了车辆的轨迹回放主要有两个方案：一种是通过标记点moveAlong()的方法，另一种是PathSimplifier是一个轨迹展示组件；上篇使用了标记点的方法，这篇就来使用PathSimplifier的轨迹展示的方法，同样的效果图： ...
使用PathSimplifier 动态轨迹绘制报 map null
yimiguan的博客
03-06 3077
//设置数据 pathSimplifierIns.setData([{ name: '路线0', path:[ [34.277651,108.961763,], [34.259432,108.94702], ] }]); 经度最大180 最小0；纬度最大90 最小0， path中的数据要维度，经度。如上经纬错位，就会报map...
高德地图轨迹回放+进度条，倍速调整
07-13
高德地图历史轨迹回放+进度条，倍速调整
高德运动轨迹
07-13
简单的实现高德地图的定位，运动轨迹的记录，查看运动轨迹
高德3D建筑前端源码vue文件
04-21
前端 element-ui 后端java 需要申请高德api开发账号 得到一个key，使用见文档 https://segmentfault.com/a/1190000041744099 3d建筑 代码讲解： https://blog.csdn.net/hainiugen/article/details/119952588
高德地图轨迹回放
12-17
地图轨迹回放包含下面功能 1.轨迹回放播放 2.轨迹回放暂停 3.轨迹回放速度增大 4.轨迹回放速度减小 5.轨迹回放中文地址显示 6.支持进度条控制轨迹回放 注：使用时替换相应地图key即可，提供Json模拟数据，保证运行
高德地图轨迹平滑移动改进demo
11-24
对高德地图轨迹平滑移动的官方demo做了一点改进，易于大家理解。
高德地图实现对应车辆的轨迹回放与轨迹的清除重绘制(浏览器支持： PathSimplifier目前依赖Canvas进行绘制，因此不支持IE9及以下浏览器)
ProgramarQin的博客
03-10 1万+
最近项目实践中接触高德地图比较多，也发现高德地图新增了一系列的UI组件库，因此遇到一些新问题也只能自己琢磨。 页面需求：查询输入框实现车辆的对应轨迹，在地图上显示相应的轨迹（此处，上一辆车的轨迹必须清除才能绘制下一辆车的运动轨迹） 自己写了个类似功能的demo效果如下： 项目中一般是通过输入车牌号并通过查询按钮请求接口得到数据并进行渲染（效果图如下） 此处直接用静态数据+两个车辆按...
web技术分享| 【高德地图】实现自定义的轨迹回放
anyRTC的博客
06-22 2801
以上两种实现方式我们可以根据两个因素 来决定哪一种更加适合自己：节点数量 的多少、排布的密集度 。前者适合节点数量较少，排布比较稀松，例如，出租车轨迹回放，出租车行驶速度快，周期上报的时间也会相对较长。后者更加针对节点数量巨大、排布密集的路径，按秒记录位置的飞机行进轨迹，精细的地理边界等等。无论选择两种方式，我们都需要先收集到客户端上报的信息，这些信息可以自定义，通常我们会包含：经纬度、速度、逆编码之后的地理位置、方向、海拔 等基本地理信息，同时我们也可以加入一些自定义 的信息，例如：人员信息（头像昵称等）
高德地图 动态绘制多个路线轨迹
热门推荐
若水弹丸之地
02-01 4万+
最近在用高德地图的API，顺便记录下。 平时我们只是通过如下代码，给path一串经纬度数组， 静态绘制修改路径，但怎么才能通过接收数据（例如Json数据）来动态绘制 多个路径呢？ 这里有两种方法。 //设置数据 pathSimplifierIns.setData([{ name: '路线0', path: [ [116.405289, 39.9049
vue使用高德地图aMap实现轨迹动画查询显示
总结前端开发中遇到的问题，分享前端知识
04-12 4524
vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果： 需求：根据返回的经纬度 实现轨迹动画，以下示例可以直接复制使用，记得添加自己的key、秘钥。 JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI： 1. 使用官网提供的 JSAPI Loader 进行加载； 2. 以常规 JavaScript 脚本...
调用高德地图展示车辆行驶轨迹
trabecula_hj的博客
04-04 3998
利用高德地图api实现车辆历史轨迹
计算机视觉基础---画出三维空间运动轨迹以及位姿
joel的博客
09-10 8357
最近项目遇到路径规划的工作，每次出来路径苦于没有直观的表示方法，于是重新温习了matlab自己编写了这么一个函数，来实现 对物体三维运动过程中的展示。 已有：物体在轨迹一些点的 三维坐标和姿态（这里用欧拉角表示的）； 效果：在matlab三维绘图中 画出三维点的位置和 物体处于该位置处的姿态； pathPoints.m pick=[285.601624 273.480804 216.15...
高德地图轨迹展示&巡航，巡航结束事件
07-17
要在高德地图上展示轨迹并实现巡航效果，可以使用 Vue.js 结合高德地图 JavaScript API。下面是一个简单的示例代码： ```html <template> <div> <div id="map" style="width: 800px; height: 600px;"></div> </div> </template> <script> export default { mounted() { // 创建地图 const map = new AMap.Map('map', { zoom: 15, center: [116.39, 39.9] }); // 定义轨迹路径 const path = [ [116.39, 39.9], [116.4, 39.91], [116.41, 39.92], // ... ]; // 创建轨迹线 const polyline = new AMap.Polyline({ map: map, path: path, strokeColor: '#3366FF', strokeOpacity: 1, strokeWeight: 3 }); // 创建小车标记 const marker = new AMap.Marker({ map: map, icon: new AMap.Icon({ size: new AMap.Size(50, 50), image: 'https://webapi.amap.com/images/car.png', imageSize: new AMap.Size(50, 50) }) }); // 设置小车标记的位置和角度 function setMarkerPosition(position) { marker.setPosition(position); marker.setAngle(getAngle(position)); } // 获取小车标记的角度 function getAngle(position) { // 根据当前位置和下一个位置计算角度 // ... } // 小车巡航的动画 function cruise() { let index = 0; const timer = setInterval(() => { setMarkerPosition(path[index]); index++; if (index >= path.length) { clearInterval(timer); // 触发巡航结束事件 this.$emit('cruiseFinish'); } }, 1000); } // 开始小车巡航 cruise(); } } </script> ``` 在上述代码中，使用 AMap.Polyline 创建轨迹线，并使用 AMap.Marker 创建小车标记。通过设置小车标记的位置和角度实现小车在轨迹上的移动效果。当巡航结束时，通过 `$emit` 方法触发 `cruiseFinish` 事件。 在父组件中，可以监听 `cruiseFinish` 事件并执行相应的操作。例如： ```html <template> <div> <my-map @cruiseFinish="handleCruiseFinish"></my-map> </div> </template> <script> import MyMap from './MyMap.vue'; export default { components: { MyMap }, methods: { handleCruiseFinish() { console.log('巡航结束'); // 执行巡航结束后的操作 } } } </script> ``` 在父组件中，通过监听 `cruiseFinish` 事件可以捕获巡航结束的时机，并执行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值