2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 百度地图JavaScript API GL1.0给折线添加箭头

百度地图JavaScript API GL1.0给折线添加箭头

时间:2020-10-26 22:09:39

相关推荐

百度地图JavaScript API GL1.0给折线添加箭头

使用百度地图的 JS API 实现轨迹回放功能时,遇到给折线添加方向箭头的问题,在JS API 2.0及3.0中可以使用 IconSequence 类给折线添加箭头图标,有兴趣可以看看这篇文章:折线添加箭头

但是,在 GL 版本中移除了 IconSequence,那是不是就没办法实现呢?

答案是肯定有的,在 添加覆盖物-开发指南 中有介绍到给折线添加图片纹理,使用了一个 JavaScript 类参考中没有写出来的属性strokeTexture,通过这个属性就可以给折线添加箭头了,在 Vue 项目中使用如下:

var polyline = new BMapGL.Polyline( require("@/assets/json/mapRoute.json").map(p=>new BMapGL.Point(p.lng, p.lat)), {sequence: true,strokeTexture: {// width/height 需要是2的n次方url: require('@/assets/image/marker-road-green.png'),width: 16,// 图片的宽度height: 64// 图片的高度},strokeWeight: 8,strokeOpacity: 1});map.addOverlay(polyline);

至于,纹理图片可以使用 Photoshop 自己画一个,需要注意的是箭头方向,例如:轨迹由 A 运动至 B,箭头向下,则实际效果由 A 指向 B;反之,则由 B 指向 A。这里给出几个我自己做的箭头图片:

Photoshop 工程图层可以使用上面的配置,GL 版本的箭头显示相较于 2.0、3.0 来说要更加丝滑,使用也更加方便。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。