Source: https://maps.vietmap.vn/docs/sdk-web-gl/line/example-line/gradient-line/ # Show a gradient line using an expression Gradient lines are lines that change color along their length. You can create a gradient line using the `line-gradient` paint property and an expression that uses the special `line-progress` property. The `line-progress` property represents the distance along the line, from 0 to 1. You can use the `line-progress` property in an expression to create a gradient line that changes color along its length. ##Example ```html Create a gradient line using an expression
``` To use your own colors and icons, create a map in [Map Editor](https://tools.vietmap.vn/map-editor/) and replace the style URL above with its style link. ##Parameters | Prop | Type | Default| Description | Example | | ---- | :--: | :--: | :-----: | :-------:| | `line-color` | `string` | `#000000` | Màu của line. Có thể là giá trị mã màu, tên màu, hoặc gradient. | `#FF5733` | | `line-width` | `number` | `1` | Độ dày của line được tính bằng pixel. | `5` | | `line-opacity` | `number` | `1` | Độ trong suốt của line (0 là hoàn toàn trong suốt, 1 là không trong suốt). | `0.7` | | `line-dasharray` | `array` | `N/A` | Định nghĩa kiểu nét đứt của đường, với mảng gồm độ dài đoạn gạch và khoảng cách giữa các đoạn. | `[2, 2]` (đường nét gạch 2 pixel, khoảng cách 2 pixel) | | `line-translate` | `array` | `[0, 0]` | Dịch chuyển line theo tọa độ `[x, y]` tính bằng pixel. | `[10, 20]` | | `line-translate-anchor` | `string` | map | Xác định tham chiếu cho dịch chuyển đường. Có thể là `map` (dịch chuyển theo bản đồ) hoặc `viewport` (dịch chuyển theo khung nhìn). | `viewport` | | `line-blur` | `number` | `0` | Độ mờ của đường. Giá trị càng cao thì đường càng mờ. | `0.5` | | `line-gradient` | `string` | `N/A` | Gradient màu dọc theo chiều dài của line. | `["interpolate", ["linear"], ["line-progress"], 0, "blue", 1, "red"] `| | `line-cap` | `string` | `butt` | Kiểu đầu đường. Có thể là `butt` (không có), `round` (tròn), `square` (vuông). | `round`| | `line-join` | `string` | `miter` | Kiểu nối giữa các đoạn đường. Có thể là `bevel` (vát), `round` (tròn), `miter` (mối nối thẳng). | `round` |