项目只需要给起点和终点进行打点和标注
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>
