高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线

临时接到一个小任务，要封装一个绘制带有方向箭头的折线的功能接口，就下面这种样式：

百度地图给的示例是这样的：

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" //折线颜色
});

那个箭头其实就是一连串的icons,不过要加入icons参数前得先创建Symbol,然后再根据BMap.IconSequence()方法创建出icons，同时也可对symbol样式进行设定。

高德地图的示例是这样的：

 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);

其实就是加了一个showDir参数，不过这里箭头的样式就是固定的。

现在要解决的是把百度的和高德的接口封装成一个统一的接口，以便根据需求，在不同的地图下调用统一的接口。有两种思路：

1.沿用百度的：

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];这里是我刚学到的小方法

polylineOptions={strokeOpacity: 1, strokeWeight: 8}跟json数组很像，原来还可以直接通过上面这行代码插入icons:[icons]

由于高德地图中并没有Symbol，IconSequence这种方法，只是一个"showDir"参数。如果要封装成统一接口的话，就只能写空方法代替：

newSymbol(options){
    return null;
}

newIconSequence(symbol){
    return null; 
}

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

这样写的话有个问题就是百度地图下调用接口的话，icon样式是可以由用户定义的；但是在高德地图下，虽然是暴露出定义icon样式的方法，但是方法体是空的，因此不起作用，好像有点糊弄人。

2.沿用高德的

直接把icon样式定死

封装后的部分js代码：

百度（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);
}

高德（AMap）：

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

这样也能做到接口的统一。

高德地图和百度地图接口封装遇到的问题（二）：绘制带有方向箭头的折线

猜你喜欢