百度地图轨迹开发,如何绘制带有箭头的折线

2020-02-24 18:38:12

参考地址 百度地图轨迹开发,如何绘制带有箭头的折线

最近在开发百度地图时,需要绘制行人行走的轨迹,并在轨迹内使用箭头表示方向,和我们平常使用百度地图导航时一样,能通过箭头表示人行走的方向。
       通过百度地图API,我们很容易能找到划线的方法Polyline() ,但我们该如何在绘制的线上,展示箭头方向呢?进一步查看百度地图API发现IconSequence类,此类用于设置polyline上的符号显示。

结合百度地图的API:

 

  因此,我们就可以实现绘制带箭头方向的折线。

复制代码

        //创建地图
            var map = new BMap.Map('map');                  var point = new BMap.Point(114.065537,22.553321);
                     map.centerAndZoom(point , 13);
                    map.enableScrollWheelZoom();             //坐标点
            Points=[
            {lng: 114.014, lat: 22.687},
            {lng: 114.0143, lat: 22.742},
            {lng: 114.09746, lat: 22.745}
            ]        //绘制箭头及其样式
        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.6,//图标缩放大小
                strokeColor:'#fff',//设置矢量图标的线填充颜色
                strokeWeight: 2,//设置线宽            });            var icons = new BMap.IconSequence(sy, '100%', '10%',false);//设置为true,可以对轨迹进行编辑
            //绘制折线以及样式
            var trackLine = new BMap.Polyline(potArr,{
                strokeColor:"#18a45b",//设置颜色
                strokeWeight:8 ,//宽度
                strokeOpacity:0.8,//折线的透明度,取值范围0 - 1
                enableEditing: false,//是否启用线编辑,默认为false
                enableClicking: false,//是否响应点击事件,默认为true                icons:[icons]
            });
            map.addOverlay(trackLine);

复制代码

效果如下图:



  • 2020-12-16 22:07:44

    Android视频点播-边播边缓存

    一些知名的视频app客户端(优酷,爱奇艺)播放视频的时候都有一些缓存进度(二级进度缓存),qq,微信有关的小视频,还有一些短视频app,都有边播边缓的处理。还有就是当文件缓存完毕了再次播放的话就不再请求网络了直接播放本地文件了。既节省了流程又提高了加载速度。 今天我们就是来研究讨论实现这个边播边缓存的框架,因为它不和任何的业务逻辑耦合。

  • 2020-12-16 22:46:44

    基于coturn项目的stun/turn服务器搭建

    webrtc是google推出的基于浏览器的实时语音-视频通讯架构。其典型的应用场景为:浏览器之间端到端(p2p)实时视频对话,但由于网络环境的复杂性(比如:路由器/交换机/防火墙等),浏览器与浏览器很多时候无法建立p2p连接,只能通过公网上的中继服务器(也就是所谓的turn服务器)中转。示例图如下:

  • 2020-12-16 23:06:05

    Rocket.Chat推送信息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket.Chat推送消息 以下示例可以转为别的语言的版本, 本示例使用Linux平台的curl测试, curl非常强大. 登陆 首先需要登陆Rocket.Chat服务器

  • 2020-12-17 09:01:23

    对BitTorrent Tracker源码分析

    tracker服务器是BT下载中必须的角色。一个BT client 在下载开始以及下载进行的过程中,要不停的与 tracker 服务器进行通信,以报告自己的信息,并获取其它下载client的信息。这种通信是通过 HTTP 协议进行的,又被称为 tracker HTTP 协议,它的过程是这样的: client 向 tracker 发一个HTTP 的GET请求,并把它自己的信息放在GET的参数中;这个请求的大致意思是:我是xxx(一个唯一的id),我想下载yyy文件,我的ip是aaa,我用的端口是bbb。。。

  • 2020-12-17 10:55:48

    html5 video p2p research

    节约带宽,减少缓冲时间,提升服务质量,处理峰值流量, 视频观看的人越多,播放越流畅。

  • 2020-12-17 10:57:34

    使用 MediaSource 搭建流式播放器

    Media Source Extensions(媒体源扩展)大大地扩展了浏览器的媒体播放功能,提供允许JavaScript 生成媒体流。这可以用于自适应流(adaptive streaming,也是我毕设的研究方向)及随时间变化的视频直播流(live streaming)等应用场景。