Echart 基于高德地图实现路径显示

最新推荐文章于 2026-07-01 11:42:38 发布

转载最新推荐文章于 2026-07-01 11:42:38 发布 · 1.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/qq_40953393/article/details/110353420

该博客介绍了如何结合ECharts扩展库echarts-extension-amap，在网页中利用ECharts和高德地图API绘制单色路径线。通过npm安装所需库，设置数据结构和ECharts配置项，实现在地图上展示多条线路。示例代码展示了从JSON数据加载线路坐标，初始化ECharts实例并绘制线条的过程。

高德官方例子：单色路径-线 LineLayer-示例中心-数据可视化 JS API | 高德地图API (amap.com)

Echart官方例子：Examples - Apache ECharts (incubating)

效果图：

npm安装：

npm install echarts-extension-amap –save
npm install echarts

引入方式：

import echarts from "echarts"
import "echarts-extension-amap"

或者 index.html里面

    <!--高德地图 引入 -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key></script>
    <!--echarts js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- ecStat 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <!-- dataTool 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <!-- echarts-extension-amap 的 js 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js"></script>

1.数据结构：

{
  //一条直线一个coords
  coords: [[经度，纬度],[经度，纬度],.....,[经度，纬度]],
  coords: [[经度，纬度],[经度，纬度],.....,[经度，纬度]],
  ....
  coords: [[经度，纬度],[经度，纬度],.....,[经度，纬度]]
}

2. option配置

    //绘制路径
    drawLines(lines) {
      //引入Echart
      const myChart = echarts.init(this.$refs.map)
      let option = {
        // 加载 amap 组件
        amap: {
          // 高德地图中心经纬度
          center: [106.267691, 33.83307],
          // 高德地图缩放
          zoom: 5,
          // 启用resize
          resizeEnable: true,
          // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
          renderOnMoving: true,
          // 自定义地图样式主题
          mapStyle: 'amap://styles/644e497a1175a2273764e37dac775820'
        },
        series: [{
          type: 'lines',
          coordinateSystem: 'amap',
          polyline: true,
          data: lines,
          silent: true,
          lineStyle: {
            color: '#07E8E4',
            opacity: 0.2,
            width: 1
          },
          progressiveThreshold: 500,
          progressive: 200
        }]
      }
      myChart.setOption(option)
    },

3.源码：

<template>
  <div>
    <!--高德地图-->
    <div ref="map" class="map"></div>
  </div>
</template>
 
<script>
import echarts from "echarts"
import "echarts-extension-amap"
export default {
  data() {
    return {
    }
  },
  mounted() {
     this.getDriver2()
  },
  methods: {
    //获取路径数据数据
    async getDriver2() {
      const {data: ref} = await this.$http.get('https://cdn.jsdelivr.net/gh/apache/incubator-echarts-website@asf-site/examples/data/asset/data/lines-bus.json')
      let lines = [].concat.apply([], ref.map(function (busLine, idx) {
        let prevPt;
        let points = [];
        for (let i = 0; i < busLine.length; i += 2) {
          let pt = [busLine[i], busLine[i + 1]];
          if (i > 0) {
            pt = [
              prevPt[0] + pt[0],
              prevPt[1] + pt[1]
            ];
          }
          prevPt = pt;
          points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
          coords: points
        };
      }));
      this.drawLines(lines)
    },
    //绘制路径
    drawLines(lines) {
      //引入Echart
      const myChart = echarts.init(this.$refs.map)
      let option = {
        // 加载 amap 组件
        amap: {
          // 高德地图中心经纬度
          center: [106.267691, 33.83307],
          // 高德地图缩放
          zoom: 5,
          // 启用resize
          resizeEnable: true,
          // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
          renderOnMoving: true,
          // 自定义地图样式主题
          mapStyle: 'amap://styles/644e497a1175a2273764e37dac775820'
        },
        series: [{
          type: 'lines',
          coordinateSystem: 'amap',
          polyline: true,
          data: lines,
          silent: true,
          lineStyle: {
            color: '#07E8E4',
            opacity: 0.2,
            width: 1
          },
          progressiveThreshold: 500,
          progressive: 200
        }]
      }
      this.myChart.setOption(option)
    },
  }
}
</script>
 
<style lang="less" scoped>
/*地图CSS类*/
.map{
  width: 1920px;
  height: 1080px;
}
</style>

标签

#echarts