【vue】echarts+百度地图api画网管图

       因项目需要在echarts+百度地图在背景图上画水管图，根据一个接水点和它的东南西北四个接水点点实时的连接情况连接成网管图。刚开始想的比较复杂，找的是关系图，后来参考了大神的代码选择了比较简单的线图。

获取所有管道点的代码:

var geoCoordMap = new Map();//点数据集合
for(var i in pointData ) {
   geoCoordMap.set(pointData[i].id.toString(), [parseFloat(pointData[i].vcLongitude), parseFloat(pointData[i].vcDimension)])
}
for(let i=0 ;i<pointData.length;i++){
    var fromL =pointData[i].id.toString() ;
    if (pointData[i].itopID !='0'){
        var toTop=pointData[i].itopID.toString();
        this.jieShuiDian.push({
            coords:[geoCoordMap.get(fromL), geoCoordMap.get(toTop)]
        })
    };
    if(pointData[i].ileftID!='0'){
        var toLeft=pointData[i].ileftID.toString();
        this.jieShuiDian.push({
            coords:[geoCoordMap.get(fromL), geoCoordMap.get(toLeft)]
        })
    };
    if(pointData[i].irightid!=0){
        var toRight=pointData[i].irightid.toString();
        this.jieShuiDian.push({
            coords:[geoCoordMap.get(fromL), geoCoordMap.get(toRight)]
        })
    };
    if(pointData[i].ibottomid!=0){
        var toBottom=pointData[i].ibottomid.toString();
        this.jieShuiDian.push({
            coords:[geoCoordMap.get(fromL), geoCoordMap.get(toBottom)]
        })
    }

效果图：

总结：多思考多总结。