pathNavigator | Vue-Amap

# 介绍

pathNavigator巡航器组件一般配合轨迹组件同时使用，一条轨迹数据对应一个巡航器组件，具体使用方式参照示例

# 参数配置

pathNavigator组件支持高德地图pathNavigator类所有属性及事件。在此基础上，对以下属性变动在组件内部监听，并会主动触发对应对set方法

属性名	类型	默认值
speed	number	-
range	number[]	-

# 示例

<template>
  <el-amap 
    style="height: 400px;"
    :zoom="zoom"
    :center="center"
  >
    <el-amap-mark
      v-for="marker in markers"
      :key="`${marker.position[0]}_${marker.position[1]}`"
      v-bind="marker"
    />
    <el-amap-pathsimplifier 
      :data='data'
      :renderOptions='renderOptions'
    >
      <el-amap-pathnavigator :getOptions='getOptions'/>
    </el-amap-pathsimplifier>
  </el-amap>
</template>

<script>
export default {
  data () {
    return {
      zoom: 6,
      center: [116.3, 39.1],
      markers: [
        {
          position: [120.15, 30.28],
          label: { content: '杭州' },
          icon: {
            imageSize: [20, 40],
            size: [20, 40],
            image: '/car.png'
          },
        },
        {
          position: [116.15, 39.28],
          label: { content: '北京' },
          icon: {
            imageSize: [20, 40],
            size: [20, 40],
            image: '/car.png'
          },
        }
      ],
      data: [
        {
          name: '轨迹0',
          path: [
            [116.340417, 39.1],
            [120.15, 30.28]
          ]
        }
      ],
      renderOptions: {
        pathLineStyle: {
          strokeStyle: 'red',
          lineWidth: 6,
          dirArrowStyle: true
        }
      }
    }
  },
  methods: {
    getOptions(PathSimplifier) {
      return {
        loop: true,
        speed: 1000000,
        pathNavigatorStyle: {
          width: 20,
          height: 40,
          content: PathSimplifier.Render.Canvas.getImageContent('/car.png', onload, onerror),
          strokeStyle: null,
          fillStyle: null,
          pathLinePassedStyle: {
            lineWidth: 6,
            strokeStyle: '#f34135',
            dirArrowStyle: {
              stepSpace: 15,
              strokeStyle: '#fff'
            }
          }
        }
      }
    }
  }
}
</script>

← pathSimplifier