簡介

在 Leaflet 中，多線段 (Polyline) 是用來表示多個連接點之間的路徑，通常用來描繪路徑、邊界或航線等。它由一組經緯度點連接而成，並且可以根據需求進行樣式自訂。

Polylines

多邊形是一個封閉的形狀，由一系列經緯度點所組成。使用 L.polygon 方法可以輕鬆繪製多邊形。以下是基本的多邊形繪製範例：

var map = L.map('map').setView([25.0330, 121.5654], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var latlngs = [
    [25.033, 121.565],
    [25.034, 121.566]
];定義線段的兩端
// 繪製多線段
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

自訂 Polyline 樣式

1.color

設置線條的顏色，可以使用十六進制、RGB 或內建顏色名稱。

L.polyline(latlngs, { color: 'blue' }).addTo(map);

2.weight

設定 Polyline 的線條寬度，單位為像素

L.polyline(latlngs, { weight: 5 }).addTo(map);

3.opacity

設置線條的不透明度，可以設定0~1，數值越低透明度越高\

L.polyline(latlngs, { opacity: 0.5 }).addTo(map);

4.dashArray

設置線為虛線,格式為 "dashLength, spaceLength"，表示線段的長度和間隔長度

L.polyline(latlngs, { dashArray: '5, 10' }).addTo(map);

5.dashOffset

設置虛線的起始位置，可以用來創建移動虛線的效果。配合動畫或事件可以模擬線條移動。

L.polyline(latlngs, { dashArray: '5, 10', dashOffset: '5' }).addTo(map);

多條Polyline

Leaflet 支援在同一個 Polyline 中繪製多段線路，你可以定義多組座標來表示不同的路徑段落，這在處理複雜路徑時非常有用。

var latlngs = [
    [
        [25.033, 121.565],
        [25.034, 121.566]
    ],
    [
        [25.036, 121.567],
        [25.037, 121.568]
    ]
];
// 繪製多段 Polyline
var multiPolyline = L.polyline(latlngs, {color: 'purple'}).addTo(map);

總結

leaflet的Polyline只能以座標來規畫線，如果是要以道路來設置的話，就要使用其他的外部工具
今天就先這樣，明天見。