Problems encountered in the interface packaging of Gaode map and Baidu map (2): drawing a polyline with a direction arrow

   Temporarily received a small task, to encapsulate a functional interface for drawing polylines with direction arrows, in the following style:

The example given by Baidu Maps is as follows:

var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    scale: 0.6,//图标缩放大小
    strokeColor:'#fff',//设置矢量图标的线填充颜色
    strokeWeight: '2',//设置线宽
});
var icons = new BMap.IconSequence(sy, '10', '30');
// 创建polyline对象
var pois = [
	new BMap.Point(116.350658,39.938285),
	new BMap.Point(116.386446,39.939281),
	new BMap.Point(116.389034,39.913828),
	new BMap.Point(116.442501,39.914603)
];
var polyline =new BMap.Polyline(pois, {
   enableEditing: false,//是否启用线编辑，默认为false
   enableClicking: true,//是否响应点击事件，默认为true
   icons:[icons],
   strokeWeight:'8',//折线的宽度，以像素为单位
   strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
   strokeColor:"#18a45b" //折线颜色
});

The arrow is actually a series of icons, but before adding the icons parameter, you must first create a Symbol, and then create icons according to the BMap.IconSequence() method, and you can also set the symbol style.

An example of Gaode map is this:

 var lineArr = [
        [116.368904, 39.913423],
        [116.382122, 39.901176],
        [116.387271, 39.912501],
        [116.398258, 39.904600]
    ];
    var polyline = new AMap.Polyline({
        path: lineArr,          //设置线覆盖物路径
        strokeColor: "#3366FF", //线颜色
        strokeOpacity: 1,       //线透明度
        strokeWeight: 10,        //线宽
        strokeStyle: "solid",   //线样式
        showDir:true,
        strokeDasharray: [10, 5] //补充线样式
    });
    polyline.setMap(map);

In fact, a showDir parameter is added, but the style of the arrow here is fixed.

What needs to be solved now is to encapsulate Baidu's and Gaode's interfaces into a unified interface, so that the unified interface can be called under different maps according to requirements. There are two ideas:

1. Follow Baidu's:

     

newSymbol(options){
    return new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW,options);
}

newIconSequence(symbol){
    return new BMap.IconSequence(symbol, '10', '30');
}

newPolyline(pointArr,polylineOptions,icons){
    polylineOptions["icons"]=[icons];
    return new BMap.Polyline(pointArr,polylineOptions);
}

polylineOptions["icons"]=[icons]; Here is a little method I just learned

polylineOptions={strokeOpacity: 1, strokeWeight: 8} is very similar to the json array. It turns out that icons can be inserted directly through the above line of code:[icons]

Since there is no Symbol in the Gaode map, the method of IconSequence is just a "showDir" parameter. If you want to encapsulate it into a unified interface, you can only write an empty method instead:

newSymbol(options){
    return null;
}

newIconSequence(symbol){
    return null; 
}

newPolyline(pointArr,polylineOptions,icons){
    polylineOptions["path"]=pointArr;
    polylineOptions["showDir"]=true;
    return new AMap.Polyline(polylineOptions);
}

The problem with writing this way is that if you call the interface under Baidu Maps, the icon style can be defined by the user; but under the Gaode map, although the method for defining the icon style is exposed, the method body is empty, so it does not work. The effect seems to be a bit confusing.

2. Follow Gaode's

Directly set the icon style to death

Part of the encapsulated js code:

Baidu (BMap):

newPolyline(pointArr,polylineOptions){
    let sy= new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
    scale: 0.6,//图标缩放大小
    strokeColor:'#fff',//设置矢量图标的线填充颜色
    strokeWeight: '2',//设置线宽
    });
    let icons=new BMap.IconSequence(sy, '10', '30');
    polylineOptions["icons"]=[icons];
    return new BMap.Polyline(pointArr,polylineOptions);
}

AutoNavi (AMap):

newPolyline(pointArr,polylineOptions){
    polylineOptions["path"]=pointArr;
    polylineOptions["showDir"]=true;
    return new AMap.Polyline(polylineOptions);
}

In this way, the interface can also be unified.