vue百度地图结合echarts飞线图进行打点及标注

项目只需要给起点和终点进行打点和标注

1.飞线图和起始点的数据不是同一组数据，需要分别处理一下，所以在echarts的series中分别处理和配置

2.标注是使用echarts中series里面的label项

label: {
  formatter: '{b}', //展示的数据及格式在这里设置
  position: 'right', // 展示的位置
  show: true
},复制

3.打点的图标，可以使用默认的图标，也可以使用自定义的图标，在symbol项里，常用的默认项有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  ，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

symbol: 'image://'+require('@/assets/map/img1.png'),或者symbol:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',

以下为部分代码

<template>
  <div id="test">
    //地图
    <div id="map2" style="height: 1000px;width: 100%;">
      <baidu-map class="bm-view" @ready="initMap">
      </baidu-map>
    </div>
  </div>
 
</template>
<script>
require('echarts/extension/bmap/bmap');
import * as echarts from "echarts";
export default {
  data() {
    return {
      map: "", // 地图
      maps: [],// 站点信息数组
      //rgb(245,189,65)
      myChart: null,
    };
  },
  methods: {
//数据转换方法
    convertData(data) {
      let res = [];
      for (let i = 0; i < data.length-1; i++) {
          res.push({
            // name:data[i].sfbm,
            coords: [[Number(data[i].jd), Number(data[i].wd)],            [Number(data[i+1].jd),Number(data[i+1].wd)]],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
          });
      }
      return res;
    },
    //过滤出起点数据
    startData(data){
      let res = [];
      for (let i = 0; i < data.length; i++) {
        res.push({
          name:data[0].sfbm,
          value:[Number(data[0].jd), Number(data[0].wd)]
        })
      }
      return res;
    },
    //过滤出终点数据
    endData(data){
      let res = [];
      for (let i = 0; i < data.length; i++) {
        res.push({
          name:data[data.length-1].sfbm,
          value:[Number(data[data.length-1].jd), Number(data[data.length-1].wd)]
        })
      }
      return res;
    },
    //更新地图
    updateMaps(){
      let formdata = new FormData()
      formdata.append('DWBM', this.deptNameId)
      formdata.append('JDDM', this.jddmId)
       //地图接口
      getPubJddmGisGjList(formdata).then((res)=>{
        console.log("updateMaps", res)
        this.maps = res.rows;
        // 更新 this.myChart 的option 里面的数据data，哪个参数需要更新就在这里设置哪个参数
        this.myChart.setOption(
          {
            series: [
              {
                data: this.convertData(res.rows),
              },
              {
                data:  this.startData(res.rows),
              },
              {
                data:  this.endData(res.rows),
              }
            ]
          }
        )
      })
    },
 
    
 
    //飞线图初始化
    initMap() {
      deptTreeSelect().then(res=>{
        this.deptNameId = res.dwbm;
        this.deptOptions = res.deptList;
        let formdata = new FormData();
        formdata.append('DWBM', this.deptNameId)
        formdata.append('JDDM', '0131')
        //地图接口
        getPubJddmGisGjList(formdata).then((res)=>{
          this.maps = res.rows
          this.myChart = echarts.init(document.getElementById('map2'));
          // 飞线图标
          // const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
          let option = {
            // tooltip: {
            //   trigger: 'item'
            // },
            bmap: {
              center: [106.549238, 29.57553],
              zoom: 5,
              roam: true,
 
            },
            series: [
              //飞线数据
              {
                // name: 'wha Top2',
                //用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                type: 'lines',
                // polyline:true,
                coordinateSystem: 'bmap',
                zlevel: 2,
                // symbol: 'image://'+require('@/assets/map/img_1.png'),
                //打点图形
                symbol:'circle',
                symbolSize: 10,
                //标注
                label:{
                  formatter:'{b}',
                  position:'right',
                  show:false,
                  normal: {
                    // padding:'0 -10 0 0',
                    show:true,
                    // 标注字体
                    textStyle:{
                      color:'red',
                      fontsize:16,
                      opacity: 1
                    }
                  },
                },
                emphasis: {
                  label: {
                    show: true
                  },
                },
                // symbolSize: function(val) {
                //   return 5+ val[2] * 5; //圆环大小
                // },
                //线特效的配置
                effect: {
                  show: true,
                  //特效动画的时间
                  period: 8,
                  //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                  trailLength: 0,
                  //线上的标注特效图，箭头或者自定义为上面的飞机图形
                  symbol: 'arrow',
                  //特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
                  symbolSize: 10
                },
                //线条的样式
                lineStyle: {
                  normal: {
                    color: 'rgb(41,98,197)',
                    width: 3,
                    opacity: 0.5,
                    //边的曲度，支持从 0 到 1 的值，值越大曲度越大
                    curveness: 0.2
                  }
                },
                //线数据集,需要转换数据
                data: this.convertData(res.rows)
                //   [{
                //   coords: [[116.4551, 40.2539], [121.4648, 31.2891]]
                // },
                //   {
                //     coords: [[121.4648, 31.2891], [110.229321, 25.227083]]
                //   }]
              },
              //起点数据
              {
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data:  this.startData(res.rows),
 
                // ECharts 提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
                // symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
                symbol: 'image://'+require('@/assets/map/img1.png'),
                // symbol: 'pin',
 
                symbolSize: function (val) {
                  return 15;
                },
 
                label: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                },
              },
              //终点数据
              {
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data:  this.endData(res.rows),
 
                // ECharts 提供的标记类型包括: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'  可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
                // symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
                symbol: 'image://'+require('@/assets/map/img2.png'),
                // symbol: 'pin',
 
                symbolSize: function (val) {
                  return 15;
                },
                label: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                },
              }
 
            ],
          };
          this.myChart.setOption(option);
 
          // let startPoint = new BMap.Point(maps[0].jd,maps[0].wd)
          // var marker = new BMap.Marker(startPoint);
          // map.addOverlay(marker);
 
        })
      });
 
 
 
    }
  }
};
</script>
 
<style>
#test {
  position: relative;
}
.el-form-item__label{
  color: #000;
  font-size: 16px;
  font-weight: bold;
}
/*.blueBtn{*/
/*  background: rgb(41,98,197);*/
/*  border-color: rgb(41,98,197);*/
/*  color: #eee !important;*/
/*}*/
.el-button:hover, .el-button:focus{
  background: rgb(41,98,197);
  border-color: rgb(41,98,197);
  color: #eee !important;
}
.yellBtn{
  background: rgb(245,189,65);
  border-color: rgb(245,189,65);
  color: #000 !important;
}
.el-button{
  margin-right: 40px !important;
  color: #eee;
  font-weight: bold;
  font-size: 12px;
}
.map-input {
  display: flex;
  z-index: 999;
  position: absolute;
  top: 30px;
  left: 50px;
}
 
.bm-view {
  width: 100%;
  height: 100vh;
}
 
</style>复制