百度地图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 来说要更加丝滑，使用也更加方便。

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

百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图介绍示例 4.具体使用控件个性地图带高度的点(标记地点.覆盖物) 点击事件参考资料: 入门百度地图 JavaScript API | 8月 ...
百度地图JavaScript API GL—简易行政区划图层
map开发百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日简易行政区划图层更新时间:2022年3月12日简介 DistrictLay ...
百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
百度地图JavaScript API GL
介绍百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...
百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面欢迎访问我的博客如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...
百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度...
前言: 前段时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

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

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

最新文章

热门文章