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

深碍√TFBOYSˉ_ 2022-12-25 00:56 321阅读 0赞

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

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70][]

# 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>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
        
        <script src="https://cdn.jsdelivr.net/npm/echarts-extension-amap/dist/echarts-extension-amap.min.js"></script>

# 1.数据结构： #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70 1][]

# 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>

# 4.数据是通过axios请求的例子里面的数据： #

### [https://cdn.jsdelivr.net/gh/apache/incubator-echarts-website@asf-site/examples/data/asset/data/lines-bus.json][https_cdn.jsdelivr.net_gh_apache_incubator-echarts-website_asf-site_examples_data_asset_data_lines-bus.json] ###

遇到什么问题，可留言，看到会尽快回复。

[-_ LineLayer-_-_ JS API _ _API _amap.com]: https://lbs.amap.com/api/loca-api/demos/line/busline
[Examples - Apache ECharts _incubating]: https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-bus
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70]: /images/20221120/e46a4f5764e341f6a5ea0afd2a6b45f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201129210329949.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz,size_16,color_FFFFFF,t_70
[https_cdn.jsdelivr.net_gh_apache_incubator-echarts-website_asf-site_examples_data_asset_data_lines-bus.json]: https://cdn.jsdelivr.net/gh/apache/incubator-echarts-website@asf-site/examples/data/asset/data/lines-bus.json