[OpenLayers] 線可以有幾種類型

The different styles of LineString

前言

了解 OL 地圖繪製的第一步，從學習畫線開始！原本查找官方 API 文件，如 ol/style/Stroke~Stroke 或 Draw and Modify Features 的範例實作，其實很難從中得知如何畫出實線以外的樣式。幸好在向 Google 大神求解的過程中，有看到前人們留下的足跡，讓我能一步步實作出虛線、橫線、圓點線、雙虛等樣式。

The different styles of LineString

一些工具

IDE ： Visual Studio Code

CDN：

• openlayers v6.5.0
• jquery v3.5.1
• popper.js v1.16.1
• bootstrap v4.5.2
• math.js v5.4.1

動手實作

Stroke

仔細看實作程式碼，可以發現虛線、橫線及點折線的差異，其實僅在於改變Stroke 物件中 lineDash、lineCap 及 lineJoin 的屬性值。

Stroke Options

lineDash 實際上會影響一條線上片段的間隔距離。

lineDash: [100, 5, 20, 50]

如果要了解 lineCap 及 lineJoin 屬性，可以參考 MSDN 文件上的解釋及 Demo:

• CanvasRenderingContext2D.lineJoin
• CanvasRenderingContext2D.lineCap

Style

在雙虛線及一實一虛線的實作，是透過 Style Array ，設定 Style 中 Geometry、Stoke 屬性而完成的。簡言之，畫出的雙虛線，實際上是由三種 Stroke 組成。

就醬，感謝各位(・∀・)つ

參考

• OpenLayers
• Canvas 教學文件
• OpenLayers 3: Offset stroke style
• ol-ext: Extensions for OpenLayers (ol)