Hướng dẫn Vẽ Đường Isoline Đa Dạng với Geoapify và MapLibre GL
Giới thiệu
Đường isoline (hay còn gọi là isochrone hoặc isodistance) là một dạng đa giác xác định khu vực có thể tiếp cận từ một điểm cụ thể trong một khoảng thời gian hoặc khoảng cách nhất định. Doanh nghiệp thường sử dụng isoline để lập bản đồ khu vực dịch vụ, vùng phủ sóng giao hàng hoặc phân tích đi lại.
API Isoline của Geoapify cho phép bạn truy vấn các isoline một cách lập trình và nhận kết quả dưới định dạng GeoJSON. Đặc biệt, API này hỗ trợ truy vấn đa dạng, nghĩa là bạn có thể gửi một yêu cầu duy nhất để lấy nhiều ngưỡng khác nhau (ví dụ: 5, 10, 15 phút) thông qua tham số range=300,600,900. Mỗi đối tượng trong phản hồi đều có thuộc tính range, giúp việc lọc và trực quan hóa dữ liệu trở nên đơn giản.
Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu cách gọi API với các tham số đa dạng, xử lý phản hồi GeoJSON, và hiển thị kết quả trong MapLibre GL bằng cách sử dụng một nguồn và các lớp được lọc.
👉 Bạn có thể xem mã sẵn có và bản demo trực tiếp trên CodePen — Đường Isoline Đa Dạng
Đường Isoline là gì?
Isoline là một đa giác cho thấy khoảng cách mà bạn có thể di chuyển từ một điểm cụ thể trong một giới hạn nhất định.
- Đường isoline dựa trên thời gian: khu vực có thể tiếp cận trong 5, 10, hoặc 15 phút.
- Đường isoline dựa trên khoảng cách: khu vực có thể tiếp cận trong 1, 3, hoặc 5 kilômet.
Chúng giúp trực quan hóa khả năng tiếp cận — ví dụ, bao nhiêu phần của thành phố được bao phủ bởi một dịch vụ giao hàng hoặc những khu vực nào nằm trong khoảng thời gian đi lại 20 phút.
Tuy nhiên, thường thì bạn cần so sánh nhiều ngưỡng cùng một lúc — chẳng hạn như 15, 20 và 30 phút. Đó là lúc đường isoline đa dạng trở nên hữu ích.
Lấy Isoline bằng API
API Isoline của Geoapify cho phép bạn truy vấn isoline một cách lập trình và trả về kết quả dưới dạng GeoJSON.
API hỗ trợ truy vấn đa dạng, vì vậy thay vì gửi các yêu cầu riêng biệt cho từng ngưỡng, bạn có thể truyền một danh sách các giá trị cách nhau bằng dấu phẩy trong tham số range (ví dụ: range=900,1200,1800). Điều này giúp bạn nhận được nhiều isoline trong một phản hồi duy nhất — đảm bảo tính nhất quán giữa các ngưỡng và giảm số lượng lần gọi API.
Dưới đây là một ví dụ về yêu cầu trả về các đường isoline 15 phút, 20 phút và 30 phút (tức là 900, 1200 và 1800 giây) quanh New Orleans:
https://api.geoapify.com/v1/isoline?
lat=29.967524849999997
&lon=-90.08681463178436
&type=time
&mode=drive
&range=900,1200,1800
&apiKey=YOUR_API_KEYThay thế YOUR_API_KEY bằng khóa của riêng bạn.
Mỗi đối tượng trong phản hồi đều có thuộc tính range (ví dụ: 900, 1200, 1800), giúp bạn dễ dàng lọc và định dạng các isoline khác nhau khi hiển thị chúng.
Phản hồi từ API
Một truy vấn đa dạng sẽ trả về một FeatureCollection GeoJSON tiêu chuẩn. Mỗi đối tượng tương ứng với một giá trị ngưỡng và bao gồm thuộc tính range mà bạn có thể sử dụng sau này để lọc và định dạng.
Dưới đây là một ví dụ đơn giản:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "range": 900, "mode": "drive", "type": "time" },
"geometry": {
"type": "Polygon",
"coordinates": [...]
}
},
{
"type": "Feature",
"properties": { "range": 1200, "mode": "drive", "type": "time" },
"geometry": {
"type": "Polygon",
"coordinates": [...]
}
},
{
"type": "Feature",
"properties": { "range": 1800, "mode": "drive", "type": "time" },
"geometry": {
"type": "Polygon",
"coordinates": [...]
}
}
]
}Phần quan trọng là thuộc tính range (tính bằng giây cho type=time hoặc mét cho type=distance). Điều này giúp bạn dễ dàng áp dụng các màu sắc hoặc phong cách khác nhau cho mỗi isoline khi vẽ trên bản đồ.
Trực quan hóa Isoline với MapLibre GL
Khi bạn đã có phản hồi GeoJSON, bạn có thể hiển thị nó trực tiếp trong MapLibre GL. Cách đơn giản nhất là:
- Thêm phản hồi từ API Isoline dưới dạng GeoJSON source.
- Đối với mỗi giá trị ngưỡng, tạo một fill layer và một line layer.
- Sử dụng bộ lọc trên thuộc tính
rangeđể mỗi lớp chỉ vẽ isoline cho giá trị của nó. - Áp dụng các màu khác nhau cho mỗi ngưỡng để dễ dàng so sánh.
Dưới đây là một ví dụ tối giản:
// Thêm GeoJSON source
map.addSource("isolines", {
type: "geojson",
data: data // phản hồi từ API
});
// Vẽ isoline [900, 1200, 1800] giây
ranges.forEach((range, i) => {
const hue = Math.round((i / Math.max(ranges.length, 1)) * 300);
const color = `hsl(${hue} 85% 60%)`;
map.addLayer({
id: `fill-${range}`,
type: "fill",
source: "isolines",
paint: {
"fill-color": color,
"fill-opacity": 0.3
},
filter: ["==", ["get", "range"], range]
});
map.addLayer({
id: `line-${range}`,
type: "line",
source: "isolines",
paint: {
"line-color": color,
"line-width": 2
},
filter: ["==", ["get", "range"], range]
});
});Bằng cách này, tất cả các isoline đều đến từ một nguồn duy nhất, và mỗi ngưỡng nhận được phong cách riêng. Các isoline lớn hơn được vẽ trước để cho các isoline nhỏ hơn nằm ở trên cùng.
Demo Hoạt Động Đầy Đủ
Bạn đã thấy cách yêu cầu các isoline đa dạng với API Isoline của Geoapify và vẽ chúng trong MapLibre GL. Để tiết kiệm thời gian, chúng tôi đã chuẩn bị một ví dụ sẵn có mà bạn có thể khám phá trực tiếp.
Mở nó lên, thay thế YOUR_API_KEY bằng khóa của riêng bạn từ Geoapify, và bạn sẽ có được các isoline đa dạng tương tác chỉ trong vài giây.
Kết luận
Đường isoline đa dạng là một cách đơn giản nhưng mạnh mẽ để so sánh khả năng tiếp cận ở các ngưỡng khác nhau — cho dù là cho vùng phủ sóng giao hàng, phân tích đi lại, hay lập kế hoạch khu vực dịch vụ. Với Geoapify Isoline API, bạn có thể yêu cầu nhiều ngưỡng trong một lần gọi và vẽ chúng hiệu quả trong MapLibre GL bằng cách sử dụng một nguồn và các lớp được lọc.
👉 Hãy thử ngay:
- Demo trực tiếp trên CodePen
- Playground API Isoline
- Trang sản phẩm API Isoline
- Tài liệu API Isoline
- Tài liệu MapLibre GL
Chỉ với một vài dòng mã, bạn có thể đưa phân tích khả năng tiếp cận đa dạng vào ứng dụng của mình.
