import 'leaflet-polylinedecorator' // 箭头线(引入第三方插件)
onMounted(() => {
window.customMap = mapInit.initMap({
target: 'map-container',
coordinate: [36.09, 120.35]
})
const drawnItems = new L.FeatureGroup()
window.customMap.addLayer(drawnItems)
// 绘制箭头
const arrow = L.polyline(
[
[36.09, 120.35],
[36.1, 120.38]
],
{
// 颜色
color: 'rgba(0,156,106,1)',
weight: 10
}
).addTo(drawnItems)
L.polylineDecorator(arrow, {
patterns: [
{
// 模式符号的偏移位置
offset: 10,
// 模式符号的重复间隔
repeat: 30,
// 符号实例
symbol: L.Symbol.arrowHead({
// 符号大小
pixelSize: 7,
polygon: false,
// 符号样式
pathOptions: {
// 是否显示边线
stroke: true,
weight: 2,
color: '#fff'
}
})
}
]
}).addTo(drawnItems)
})
标签:leaflet,drawnItems,weight,符号,color,---,箭头,120.35,vue3
From: https://blog.csdn.net/QDxin_xyz/article/details/145310468