高德地图+echarts 大屏项目

高德地图+echarts 大屏项目

• 概述
• 初始化地图
• 创建马拉松路线

概述

开发了一个高德地图视角实时更新的项目demo，先看视频效果

高德地图+echarts 马拉松大屏项目

初始化地图

创建一个初始化地图的类ZMap, 写入initMap方法加载地图

initMap(option) {
    let config = {
      resizeEnable: true,
      center: [116.479126, 39.998563],
      zoom: 20,
      pitch: 65,
      rotation: 4.509173845626157,
      viewMode: '3D', //开启3D视图,默认为关闭
      buildingAnimation: true, //楼块出现是否带动画
    }

    this.map = new AMap.Map(this.id, Object.assign(config, option));

    window.map = this.map;
  }

在场景中调用即可此方法即可

创建马拉松路线

原理，根据起始点和终点获取中间经过的所有点，然后保存成数组，生成路线

setDriving(start, end) {
    if (!this.driving) {
      let drivingOption = {}
      this.driving = new AMap.Driving(drivingOption);
    }
    return new Promise(resolve => {
      this.driving.search(start, end, function (status, result) {
        if (status === 'complete') {
          console.log(result);
          if (result.routes && result.routes[0].steps.length) {
            
            let path = [];
            let roads = [];
            result.routes[0].steps.forEach(item => {
              roads.push({
                roadName: item.road,
                position: [item.end_location.lng, item.end_location.lat]
              })
              item.path.forEach(step => {
                path.push([step.lng, step.lat])
              })
            });
            resolve({
              path,
              roads
            })
          }
        }
      });
    })
  }

输入两个坐标即可获取所有点，根据点数组画线和路标文本

export function drawRoute(app, pathInfo) {
  app.loaderMarker({
    position: pathInfo.path[0]
  });

  app.loaderMarker({
    position: pathInfo.path[pathInfo.path.length - 1],
    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'
  });

  app.loaderPolyline({path: pathInfo.path});

  pathInfo.roads.forEach(item => {
    if (item.roadName) {
      let text = app.loaderText({text: item.roadName, position: item.position})
      text.setMap(app.map);
    }
  });
}

接下来在创建一条线表示马拉松当前进行到的位置

passedPolyline = app.loaderPolyline({
        strokeColor: "#AF5",
        strokeWeight: 8,
      });

marker = app.loaderMarker({
        icon: '',
        position: pathInfo.path[0],
      });

最后我们在给market绑定移动物体事件，在移动物体的时候更新marker的位置和设置线条即可，此处代码可以看博客中的高德地图3D轨迹回放 + 视野跟随功能此文章，有具体的代码写法
左右两侧的报表是基于datav和echarts做的，很简单，这里就不介绍了，最后的效果