Vue+Echarts+百度地图 实现 路径规划 (附关键代码)

实现功能

通过选择 相关调拨单，系统自动进行规划路径，并且以地图的形式呈现最佳路径

技术难点

    1. vue  结合使用 echarts

     2.echarts 在 vue嵌入百度地图，并且做出路径 曲线

最终结果

关键过程与代码

首先获取 引入百度地图的api，可以在开发者后台获取  控制台 | 百度地图开放平台

然后在 项目的根文件 index.html 中引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=TKXgsmuGMj80F3zGlvvrWcKTZrC4VQe9"></script>

通过按钮的形式 弹出对话框

    <el-dialog
      title="地图预览"
      :visible.sync="mapVisible"
      width="80%"
      class="dialog-wrap"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleClose"
    >
      <div
        ref="chart"
        class="body-box"
        style=""
        v-loading="loading"
        element-loading-text="loadingText"
      ></div>
    </el-dialog>

script 标签百度地图插件引入，echarts 引入

说到这需要先安装一下 echarts ， 我所使用的是  5.5.0

import * as echarts from "echarts";
import { bmap } from "echarts/extension/bmap/bmap";

定义图表渲染与作 迁徙线的方法

    initChart() {
      // 初始化 ECharts 实例
      const myChart = echarts.init(this.$refs.chart);

      // 设置图表的配置项
      const option = {
        backgroundColor: "transparent",
        title: {
          text: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.seriesType === "lines") {
              return (
                params.data.fromName +
                " → " +
                params.data.toName +
                "<br />距离: " +
                params.data.value
              );
            } else {
              return params.name;
            }
          },
        },
        bmap: {
          center: [108.114129, 29.550339],
          zoom: 6,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#75abf3",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd",
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#3c3838",
                },
              },
            ],
          },
        },
        series: [
          {
            name: "路径",
            type: "lines",
            coordinateSystem: "bmap",
            zlevel: 1,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.5,
              color: "#fff",
              symbol: "arrow",
              symbolSize: 8,
            },
            lineStyle: {
              normal: {
                color: "#ffa022",
                width: 2,
                curveness: 0.2,
              },
            },
            data: this.map_data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    },

组件挂载之前还是需要获取一遍数据

  async mounted() {
    await previewData({
      dest_warehouse: xxx,
      supplier_addresses: xxx,
    }).then((res) => {
      this.map_data = res.data.coords_list;
    });
    this.loading = false;
    this.$nextTick(() => {
      this.initChart();
    });
  },

后端 路径规划 以及获取详细地址的经纬度 数据可以使用 高德的api

路径规划 2.0-基础 API 文档-开发指南-Web服务 API | 高德地图API