临时接到一个小任务,要封装一个绘制带有方向箭头的折线的功能接口,就下面这种样式:
百度地图给的示例是这样的:
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);
}
这样也能做到接口的统一。