高德地图巡航器

最新推荐文章于 2024-09-11 09:29:08 发布

七喜铲屎官

最新推荐文章于 2024-09-11 09:29:08 发布

阅读量1.1k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/hh994/article/details/120987007

版权

参照高德官网api，首先我们要先创建一个地图才能创建地图巡航器。

    //地图
    loadMap() {
      const V = this;
      V.map = new AMap.Map('map', {
        resizeEnable: true,
      });
    },

再根据官网，我们需要先进行判断

AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
          }
});

然后可以设置路线的样式、起点和终点的样式

          let defaultRenderOptions = {
            pathLineStyle: { //路线样式设置
              lineWidth: 5,
              strokeStyle: '#CDCDB4',
              dirArrowStyle: false
            },
            startPointStyle: { //起点
              radius: 5,
              fillStyle: '#109618',
              lineWidth: 1,
              strokeStyle: '#eeeeee'
            },
            endPointStyle: { //终点
              radius: 5,
              fillStyle: '#dc3912',
              lineWidth: 1,
              strokeStyle: '#eeeeee'
            },
          };

接下来就是绘制路线

pathSimplifierIns = new PathSimplifier({
         map: V.map,
         name: name,
         zIndex: 100,
         autoSetFitView: false,
         data: pathlist,
         // 获取巡航路径中的路径坐标数组
         getPath: (pathData, pathIndex) => {
           return pathData.path;
         },
         getHoverTitle: function (pathData, pathIndex, pointIndex) {
           return pathData.name;
         },
});

最后是创建巡航器

pathNavigator = pathSimplifierIns.createPathNavigator(0, {
       loop: false, // 是否循环
       speed: 50, // 速度(km/h)
       pathNavigatorStyle: {
           //经过路径的样式
           pathLinePassedStyle: {
           lineWidth: 5, 
           strokeStyle: red,
         },
       }
});
// 启动巡航器
pathNavigator.start();