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¶
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a gradient line using an expression</title>
<meta
property="og:description"
content="Use the line-gradient paint property and an expression to visualize distance from the starting point of a line."
/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.js"></script>
<link
rel="stylesheet" href="https://unpkg.com/@vietmap/vietmap-gl-js@4.2.0/vietmap-gl.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = (window.map = new maplibregl.Map({
container: "map",
style:
"https://maps.vietmap.vn/mt/tm/style.json?apikey=YOUR_API_KEY_HERE",
center: [-77.035, 38.875],
zoom: 12,
}));
const geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
coordinates: [
[106.71568, 10.80255],
[106.71565000000001, 10.80244],
[106.71538000000001, 10.80156],
[106.71521000000001, 10.801070000000001],
[106.71516000000001, 10.800960000000002],
[106.71462000000001, 10.80114],
[106.71385000000001, 10.80136],
[106.71350000000001, 10.801430000000002],
[106.71298, 10.80161],
[106.71246000000001, 10.80164],
[106.71237, 10.801590000000001],
[106.71226000000001, 10.801580000000001],
[106.71201, 10.801590000000001],
[106.71195, 10.801590000000001],
[106.71189000000001, 10.80156],
[106.71183, 10.8015],
[106.71181000000001, 10.80146],
[106.71180000000001, 10.80141],
[106.71181000000001, 10.801210000000001],
[106.71252000000001, 10.801210000000001],
[106.71273000000001, 10.80122],
[106.71281, 10.801250000000001],
[106.71324000000001, 10.801260000000001],
[106.71335, 10.80128],
[106.71379, 10.80122],
[106.71455, 10.801],
[106.71567, 10.80061],
[106.71599, 10.800500000000001],
[106.71643, 10.8003],
[106.71653, 10.80014],
[106.71660000000001, 10.800070000000002],
[106.71682000000001, 10.79995],
[106.71733, 10.79968],
[106.71794000000001, 10.799380000000001],
[106.71792, 10.79906],
[106.71776000000001, 10.79812],
[106.71774, 10.797930000000001],
[106.71772000000001, 10.79781],
[106.71774, 10.79767],
[106.718, 10.79723],
[106.71738, 10.79673],
],
type: "LineString",
},
},
],
};
map.on("load", () => {
// 'line-gradient' can only be used with GeoJSON sources
// and the source must have the 'lineMetrics' option set to true
map.addSource("line", {
type: "geojson",
lineMetrics: true,
data: geojson,
});
// the layer must be of type 'line'
map.addLayer({
type: "line",
source: "line",
id: "line",
paint: {
"line-color": "red",
"line-width": 14,
// 'line-gradient' must be specified using an expression
// with the special 'line-progress' property
"line-gradient": [
"interpolate",
["linear"],
["line-progress"],
0,
"blue",
0.1,
"royalblue",
0.3,
"cyan",
0.5,
"lime",
0.7,
"yellow",
1,
"red",
],
},
layout: {
"line-cap": "round",
"line-join": "round",
},
});
});
</script>
</body>
</html>
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 |
