vue高德多条轨迹导航+带途径节点标注+各路线颜色区别

一、引用准备高德后台应用申请-web端index.html 调用版本 v=1.4.2<body><div id="app"></div><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=xxx你的ke...

rain丶子厚

4829人浏览 · 2019-12-18 15:03:08

rain丶子厚 · 2019-12-18 15:03:08 发布

一、

引用准备

高德后台应用申请-web端

index.html 调用版本 v=1.4.2

  <body>
    <div id="app"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=xxx你的keyxxx&plugin=AMap.Driving"></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0"></script>
  </body>

build-webpack.base.conf.js 配置

  externals: {
    'AMap': 'window.AMap',
    'AMapUI': 'AMapUI'
  }

二、

页面引用，我这用的是 vue

  import AMap from 'AMap'
  import AMapUI from 'AMapUI'

模拟数据

mockData: [
          { name: '城配线路1',
            path: [
              [100.340417, 27.376994],
              [101.226354, 33.827452],
              [101.392174, 34.208439],
              [102.905846, 35.232876]
            ],
            pathNodeName: [
              '城配a',
              '城配b',
              '城配c',
              '城配d'
            ]
          },
          { name: '城配线路2',
            path: [
              [100.340417, 27.376994],
              [107.424376, 27.222793],
              [113.753046, 30.046619],
              [118.058013, 34.970313]
            ],
            pathNodeName: [
              '城配a',
              '城配e',
              '城配f',
              '城配g'
            ]
          }
        ]

页面

<div id="mapAmap2"></div>

核心使用 initMap()

initMap(lineData) {
        // const _this = this
        // 创建地图
        const map = new AMap.Map('mapAmap2', {
          zoom: 1
        })
        // 加载PathSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！')
            return
          }
          // 启动页面
          initPage(PathSimplifier)
        })
        function initPage(PathSimplifier) {
          // 创建组件实例
          var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            map: map, // 所属的地图实例
            getPath: function(pathData, pathIndex) {
              console.log('pathData', pathData)
              // 返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
              return pathData.path
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
              // 返回鼠标悬停时显示的信息
              if (pointIndex >= 0) {
                // 鼠标悬停在某个轨迹节点上
                return pathData.name + '，' + pathData.pathNodeName[pointIndex] + '，' + pointIndex + '/' + pathData.path.length
              }
              // 鼠标悬停在节点之间的连线上
              return pathData.name + '，点数量' + pathData.path.length
            },
            renderOptions: {
              keyPointTolerance: 0,
              renderAllPointsIfNumberBelow: 15,
              keyPointStyle: {
                radius: 6, // 点的半径
                fillStyle: '#FF8C00', // 填充色，比如 red, rgb(255,0,0), rgba(0,0,0,1)等
                strokeStyle: '#eeeeee', // 描边色
                lineWidth: 1 // 描边宽度
              },
              // 轨迹线的样式
              pathLineStyle: {
                strokeStyle: 'green',
                lineWidth: 2,
                dirArrowStyle: true
              }
            }
          })
          pathSimplifierIns.setData(lineData)
          // initRoutesContainer(d)
          // function onload() {
          //   pathSimplifierIns.renderLater()
          // }
          // function onerror(e) {
          //   alert('图片加载失败！')
          // }
          // console.log('lineData', lineData)
          let c = {}
          for (let f = 0; f < lineData.length; f++) {
            c = pathSimplifierIns.createPathNavigator(f, // 关联第1条轨迹
              {
                loop: false, // 循环播放
                // speed: 1000000,
                pathNavigatorStyle: {
                  autoRotate: false, // 禁止调整方向
                  pathLinePassedStyle: null,
                  width: 24,
                  height: 24,
                  // content: PathSimplifier.Render.Canvas.getImageContent(_this.imgUrl_car, onload, onerror),
                  strokeStyle: null,
                  fillStyle: null
                }
              })
            c.start()
          }
        }
      }

效果图

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^