leaflet 绘制带箭头的线条(路径)

最近接到项目需求,需要在网页上实时展示APP用户巡检的轨迹,这个需求很简单,直接用leaflet画polyline就可以满足;很快便出了一版效果很项目经理,但是项目经理一看,说:这个和百度地址的路径展示差距太大,要求实现的效果和百度地图一样。OK,经过请教百度老师,发现leaflet的polylineDecorator可以满足此需求。经过实践,效果还不错,故分享出来,供参考和指导。

1、引入 leaflet.min.js 和 leaflet.polylineDecorator.js

访问polylineDecorator的github地址:https://github.com/bbecquet/Leaflet.PolylineDecorator,并下载到本地,解压,在dist目录下,便有leaflet.polylineDecorator.js文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="../dist/leaflet.polylineDecorator.js"></script>

2、绘制带箭头的线条

// 经纬度数组
let pointList = [
  {lttd : '32.7302595',lgtd : '111.4355275'},
  {lttd : '32.7301595',lgtd : '111.4345275'},
  {lttd : '32.7300595',lgtd : '111.4335275'},
  {lttd : '32.7299595',lgtd : '111.4325275'}
  ....
  ....
  ....
];

// 需要先初始化leaflet地图,再调用drawPolyLine方法
drawPolyLine(pointList);

// 绘制带箭头的线条(路径)
drawPolyLine(list){
     for(let [index,item] of list.entries()){
         console.log(index);
         let polyline = null;
         let dataArr = [];
         dataArr.push([item.lttd,item.lgtd]);
         polyline = L.polyline(dataArr, {color: '#ff0000',weight:10}).addTo(this.map);
         L.polylineDecorator(polyline, {
             patterns: [
                 {
                     offset: 30,   // 箭头起始位置距离线条两端的距离
                     repeat: 60,  // 箭头重复的间隔
                     symbol: L.Symbol.arrowHead({
                         pixelSize: 5,  // 箭头大小
                         headAngle : 75,  // 角度
                         polygon: false,
                         pathOptions: {stroke: true, weight: 4, color: '#fff'}
                     })
                 }
             ]
         }).addTo(this.map);
         this.polylineGroup.push(polyline);
     }
     
 }

效果

在这里插入图片描述

demo地址:https://download.csdn.net/download/zcylyzhi4/86728716

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
要使用Leaflet绘制航迹,您可以使用Polyline实例。Polyline是一种形状类,用于绘制连续的线段。以下是一个简单的示例: ```javascript var polyline = L.polyline([ [51.505, -0.09], [51.5, -0.1], [51.495, -0.06] ]).addTo(map); ``` 在这个例子中,我们定义了一个具有三个坐标点的Polyline对象,并将其添加到了地图上。您可以通过添加更多的坐标点来创建更复杂的航迹。 如果您想要更多的控制,您可以使用PathOptions参数来设置线段的颜色、宽度和其他样式: ```javascript var polyline = L.polyline([ [51.505, -0.09], [51.5, -0.1], [51.495, -0.06] ], { color: 'red', weight: 3, opacity: 0.5 }).addTo(map); ``` 在这个例子中,我们设置了线段的颜色为红色,线宽为3像素,不透明度为0.5。您可以根据需要进行调整。 另外,如果您想要在航迹上添加标记点,您可以使用Marker实例: ```javascript var marker1 = L.marker([51.505, -0.09]).addTo(map); var marker2 = L.marker([51.5, -0.1]).addTo(map); var marker3 = L.marker([51.495, -0.06]).addTo(map); var polyline = L.polyline([ [51.505, -0.09], [51.5, -0.1], [51.495, -0.06] ]).addTo(map); ``` 在这个例子中,我们创建了三个标记点,并将它们添加到地图上。然后,我们创建了一个Polyline对象,并将它添加到地图上。这将在航迹上绘制一条线段,并在每个标记点处添加一个标记。 希望这可以帮助您开始使用Leaflet绘制航迹。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值