vue项目记录-高德地图2.0-绘制路径

Z时代
2024-01-10
分类：综合

vue

绘制物体行进路线或历史轨迹，实际上是通过大量的坐标点绘制的线，通过后端返回的坐标数组绘制polyline

1.定义模型数据

startMarker: null, // 规划路径的起点 endMarker: null, // 规划路径的终点 planPath: null, // 规划路径

pathLine: null, // 实际路线

2.初始化

先随便给数据，反正都要隐藏的，根据官方文档设置好属性

// 初始化点线
    initPathAndMarker () {
      this.startMarker = new AMap.Marker({
        map: this.map,
        offset: new AMap.Pixel(-12, -36),
        icon: icons.startP.icon,
        position: [116.397428, 39.90923]
      })
      this.endMarker = new AMap.Marker({
        map: this.map,
        offset: new AMap.Pixel(-12, -36),
        icon: icons.endP.icon,
        position: [116.397428, 39.90923]
      })
      this.startMarker.hide()
      this.endMarker.hide()
      // 规划路径
      this.planPath = new AMap.Polyline({
        map: this.map,
        path: [
          [0, 0],
          [0, 1]
        ],
        borderWeight: 3,
        strokeColor: \'#B8C3CF\',
        strokeOpacity: 1,
        strokeWeight: 1,
        strokeStyle: \'solid\',
        lineJoin: \'round\',
        lineCap: \'round\',
        zIndex: 49
      })
      // 实际路线
      this.pathLine = new AMap.Polyline({
        map: this.map,
        path: [
          [0, 0],
          [0, 1]
        ],
        borderWeight: 3,
        strokeColor: \'#00E4FF\',
        strokeOpacity: 1,
        strokeWeight: 1,
        strokeStyle: \'solid\',
        lineJoin: \'round\',
        lineCap: \'round\',
        zIndex: 50
      })
      this.planPath.hide()
      this.pathLine.hide()    },

3.满足条件后放入数据并显示

	this.planPath.setPath(
          // this.activeDetail.routePoints.map(item => [item.lng, item.lat])
          this.activeDetail.routePoints.map(item =>
            MapUtil.gcj02towgs84(item.lng, item.lat)
          )
        )
        let startPoint = this.activeDetail.routePoints[0]
        // eslint-disable-next-line standard/computed-property-even-spacing
        let endPoint = this.activeDetail.routePoints[
          this.activeDetail.routePoints.length - 1
        ]
        // this.startMarker.setPosition([startPoint.lng, startPoint.lat])
        this.startMarker.setPosition(
          MapUtil.gcj02towgs84(startPoint.lng, startPoint.lat)
        )
        // this.endMarker.setPosition([endPoint.lng, endPoint.lat])
        this.endMarker.setPosition(
          MapUtil.gcj02towgs84(endPoint.lng, endPoint.lat)
        )
        this.planPath.show()
        this.startMarker.show()
        this.endMarker.show()
	this.pathLine.setPath(
          // this.activeDetail.mRoutes.map(item => [item.lng, item.lat])
          this.activeDetail.mRoutes.map(item =>
            MapUtil.gcj02towgs84(item.lng, item.lat)
          )
        )        this.pathLine.show()