Bản đồ nhiệt biến đám mây các điểm tọa độ thành một bề mặt mật độ dễ đọc ngay lập tức. Các màu nóng đánh dấu nơi các sự kiện tập trung, các màu lạnh đánh dấu nơi chúng thưa ra. Người dùng nắm bắt mô hình trước khi đọc một nhãn duy nhất. Đó là lý do tại sao bản đồ nhiệt là lựa chọn mặc định để phân tích lưu lượng chân bộ, dự báo nhu cầu giao hàng, công cụ báo cáo tội phạm và nghiên cứu giá bất động sản.
Hướng dẫn này xây dựng bản đồ nhiệt tương tác từ đầu bằng SDK MapAtlas. Bạn sẽ cấu trúc dữ liệu điểm dưới dạng GeoJSON có trọng số, hiển thị lớp mật độ với gradient màu tùy chỉnh, kết nối thanh trượt cường độ và kết thúc bằng ví dụ nhu cầu giao hàng thực tế. Khi kết thúc, bạn sẽ có một mô hình có thể tái sử dụng mà bạn có thể đưa vào bất kỳ dự án JavaScript hoặc React nào.
Nếu bạn là người mới với SDK MapAtlas, vui lòng đọc How to Add Interactive Maps to Your Website trước. Nó bao gồm cài đặt, khởi tạo bản đồ và các điểm đánh dấu. Hướng dẫn này tiếp tục từ nơi đó.
Khi Nào Sử Dụng Bản Đồ Nhiệt
Bản đồ nhiệt là công cụ phù hợp khi bạn có một tập hợp lớn các vị trí điểm riêng lẻ và muốn truyền đạt mật độ, không phải danh tính. Các điểm đánh dấu riêng lẻ mất ý nghĩa sau vài trăm điểm, bản đồ nhiệt tiết lộ cấu trúc mà không có lượng ghim nào có thể.
Các trường hợp sử dụng phổ biến:
- Phân tích lưu lượng chân bộ: lựa chọn vị trí bán lẻ, quy hoạch đô thị, mô hình đông đúc sự kiện. Thả một ping GPS cho mỗi khách hàng đi qua cửa và bản đồ nhiệt hiển thị những khu vực nào của thành phố, trung tâm mua sắm hoặc địa điểm thu hút nhiều người nhất.
- Nhu cầu giao hàng: tổng hợp nguồn gốc đơn hàng theo mã bưu điện hoặc tọa độ thô để hiển thị cho những người điều phối nơi nhu cầu tập trung. Điều này truyền trực tiếp vào kế hoạch lãnh thổ và phân bổ tài xế.
- Dữ liệu tội phạm và sự cố: bảng điều khiển phân tích cảnh sát, bản đồ rủi ro bảo hiểm và công cụ báo cáo an toàn công cộng đều sử dụng bản đồ nhiệt mật độ để truyền đạt rủi ro không gian mà không làm choáng ngợp người dùng bằng các điểm đánh dấu riêng lẻ.
- Gradient giá bất động sản: khi kết hợp với các giá trị có trọng số, bản đồ nhiệt có thể hiển thị nơi giá cao nhất trên toàn thành phố. Xem Real Estate Property Map tutorial để biết thêm về xây dựng công cụ bản đồ tập trung vào bất động sản.
Nếu câu hỏi của bạn là "nơi nào những điều xảy ra nhiều nhất?" một bản đồ nhiệt là câu trả lời của bạn.
Định Dạng Dữ Liệu: Các Điểm GeoJSON Có Trọng Số
Lớp bản đồ nhiệt MapAtlas đọc một FeatureCollection GeoJSON tiêu chuẩn của các tính năng Point. Mỗi tính năng có thể mang một thuộc tính weight để điều chỉnh đóng góp của nó vào bề mặt mật độ. Một đơn hàng giao hàng trị giá 10 mặt hàng đóng góp nhiều nhiệt hơn một đơn hàng một mặt hàng, một trung tâm vận chuyển lớn tạo ra nhiều lưu lượng chân bộ hơn một con phố bên lề.
const demandData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.8952, 52.3702] },
properties: { weight: 8, zone: "centrum" }
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.9123, 52.3601] },
properties: { weight: 3, zone: "oost" }
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.8801, 52.3780] },
properties: { weight: 12, zone: "west" }
},
{
type: "Feature",
geometry: { type: "Point", coordinates: [4.9041, 52.3540] },
properties: { weight: 1, zone: "south" }
}
]
};
Giá trị weight là không có kích thước. Bạn chuẩn hóa nó liên quan đến phạm vi của tập dữ liệu của bạn. Nếu khu vực nhu cầu cao nhất của bạn tạo ra 500 đơn hàng và khu vực yên tĩnh nhất tạo ra 10, hãy ánh xạ chúng vào thang điểm 1 đến 10 trước khi chuyển chúng vào. Điều này giữ cho bản đồ nhiệt có ý nghĩa trực quan trên các tập dữ liệu có số lượng tuyệt đối rất khác nhau.
Không có thuộc tính weight, mỗi điểm đóng góp như nhau và bản đồ nhiệt phản ánh mật độ số lượng thuần túy.
Điều Kiện Tiên Quyết
Trước khi bạn bắt đầu:
- Một khóa API MapAtlas (đăng ký miễn phí, không cần thẻ tín dụng)
- Node.js 18+ cho các dự án dựa trên npm, hoặc một trang HTML đơn giản nếu bạn thích CDN
Bước 1: Cài Đặt và Khởi Tạo Bản Đồ
Cài đặt SDK:
npm install @mapmetrics/mapmetrics-gl
Hoặc tải nó qua CDN trong một tệp HTML đơn giản:
<link
rel="stylesheet"
href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css"
/>
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>
Thêm một container có chiều cao xác định:
<div id="map" style="width: 100%; height: 600px;"></div>
Khởi tạo bản đồ. Kiểu Tối làm cho gradient màu bản đồ nhiệt nổi bật với nền, đó là lý do tại sao nó là cơ sở ưa thích cho các hình dung mật độ:
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';
const map = new mapmetricsgl.Map({
container: 'map',
style: 'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY',
center: [4.9041, 52.3676], // Amsterdam
zoom: 12,
});
Bước 2: Thêm Lớp Bản Đồ Nhiệt
Đăng ký GeoJSON của bạn làm nguồn, sau đó thêm một lớp bản đồ nhiệt đọc từ nó. Lệnh gọi map.on('load', ...) đảm bảo phong cách đã hoàn thành tải trước khi bạn sửa đổi nó.
map.on('load', () => {
map.addSource('demand', {
type: 'geojson',
data: demandData,
});
map.addLayer({
id: 'demand-heatmap',
type: 'heatmap',
source: 'demand',
paint: {
// Weight each point by its 'weight' property (defaults to 1 if absent)
'heatmap-weight': [
'interpolate', ['linear'],
['get', 'weight'],
0, 0,
12, 1
],
// Radius in pixels; larger = smoother but less precise
'heatmap-radius': 30,
// Overall opacity of the heatmap layer
'heatmap-opacity': 0.85,
},
});
});
Tại thời điểm này, bạn có một bản đồ nhiệt hoạt động. Các khu vực xanh lục có mật độ thấp, gradient mặc định chuyển sang vàng và đỏ ở mật độ cao. Bước tiếp theo thay thế bảng màu mặc định bằng một lược đồ màu cố ý.
Bước 3: Tùy Chỉnh Gradient Màu
Thuộc tính heatmap-color ánh xạ các giá trị mật độ (0 đến 1) vào các màu bằng cách sử dụng cùng biểu thức interpolate được sử dụng trên toàn bộ hệ thống sơn MapAtlas. Mật độ 0 trong suốt để lớp cơ sở bản đồ hiển thị qua ở các khu vực trống.
map.addLayer({
id: 'demand-heatmap',
type: 'heatmap',
source: 'demand',
paint: {
'heatmap-weight': [
'interpolate', ['linear'],
['get', 'weight'],
0, 0,
12, 1
],
'heatmap-radius': 30,
'heatmap-opacity': 0.85,
'heatmap-color': [
'interpolate', ['linear'],
['heatmap-density'],
0, 'rgba(0, 0, 255, 0)', // transparent at zero density
0.2, 'rgba(0, 128, 255, 0.6)',
0.4, 'rgba(0, 230, 200, 0.7)',
0.6, 'rgba(100, 230, 0, 0.8)',
0.8, 'rgba(255, 200, 0, 0.9)',
1.0, 'rgba(255, 50, 0, 1)' // bright red at peak density
],
},
});
Gradient này chạy từ xanh (thưa) qua xanh lục và vàng thành đỏ (dày đặc), phù hợp với mô hình tinh thần hầu hết người dùng mang từ bản đồ radar thời tiết và hình ảnh nhiệt. Nếu ứng dụng của bạn có bảng màu được xếp hạng, hãy thay thế các giá trị RGB bằng các điểm dừng của riêng bạn, phép nội suy xử lý các quá trình chuyển tiếp mịn tự động.
Mẹo thiết kế: Đối với bảng điều khiển chuyên nghiệp và công cụ phân tích, hãy giữ đầu mật độ thấp gần như trong suốt. Nó bảo tồn khả năng đọc của bản đồ cơ sở trong các khu vực yên tĩnh và thu hút mắt tự nhiên vào các vùng nóng.
Bước 4: Thêm Thanh Trượt Bán Kính để Kiểm Soát Tương Tác
Bán kính bản đồ nhiệt kiểm soát mức độ mỗi điểm "bức xạ" ảnh hưởng. Bán kính nhỏ (10 đến 15 pixel) hiển thị các cụm chi tiết, bán kính lớn (50 đến 80 pixel) tạo ra bề mặt rộng hơn, mịn hơn. Các trường hợp sử dụng khác nhau gọi cho các giá trị mặc định khác nhau: lưu lượng chân bộ ở trung tâm thành phố dày đặc cần bán kính nhỏ, nhu cầu giao hàng quốc gia trên toàn bộ quốc gia cần bán kính lớn.
Cung cấp cho người dùng một thanh trượt để họ có thể điều chỉnh bay:
<div id="controls" style="position: absolute; top: 16px; left: 16px; z-index: 1;
background: white; padding: 12px 16px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
<label style="font-size: 14px; font-weight: 600;">
Radius: <span id="radius-value">30</span>px
</label>
<br />
<input id="radius-slider" type="range" min="5" max="80" value="30" style="width: 180px; margin-top: 6px;" />
</div>
Kết nối thanh trượt với setPaintProperty, cập nhật lớp mà không cần thêm lại:
const slider = document.getElementById('radius-slider');
const radiusLabel = document.getElementById('radius-value');
slider.addEventListener('input', () => {
const radius = Number(slider.value);
radiusLabel.textContent = radius;
map.setPaintProperty('demand-heatmap', 'heatmap-radius', radius);
});
setPaintProperty là một bản cập nhật trực tiếp không có nhấp nháy. Bản đồ nhiệt được hiển thị lại trên GPU trong cùng một khung hình. Mô hình này hoạt động cho bất kỳ thuộc tính sơn nào: độ mờ, cường độ, màu sắc dừng.
Bước 5: Cân Chỉnh Cường Độ Theo Mức Phóng To
Ở mức phóng to thấp (chế độ xem toàn thành phố), các điểm gần nhau chồng chéo nặng nề và bản đồ nhiệt có thể trông được bão hòa đồng đều. Ở phóng to cao (cấp độ đường phố), các điểm tương tự lan rộng ra và bề mặt mật độ trông thưa thớt. Bù cường độ được liên kết phóng to giữ cho hình dung có thể đọc được ở mọi mức phóng to.
paint: {
// ...other paint properties...
'heatmap-intensity': [
'interpolate', ['linear'],
['zoom'],
8, 1, // low zoom: normal intensity
14, 3 // high zoom: boost intensity to compensate for point spread
],
'heatmap-radius': [
'interpolate', ['linear'],
['zoom'],
8, 20, // small radius at city scale
14, 50 // larger radius at street scale
],
},
Cả hai thuộc tính sử dụng cùng biểu thức interpolate trên zoom. Các giá trị giữa các điểm dừng được nội suy tuyến tính, vì vậy quá trình chuyển tiếp mịn khi người dùng phóng to.
Ví Dụ Thực Tế: Bản Đồ Nhiệt Nhu Cầu Giao Hàng
Đây là một triển khai hoàn chỉnh, độc lập để lấy bảng điều khiển giao hàng theo yêu cầu. Các đơn hàng đến từ API dưới dạng FeatureCollection GeoJSON. Bản đồ nhiệt cập nhật bất cứ khi nào người dùng thay đổi bộ lọc thời gian.
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';
const API_KEY = 'YOUR_API_KEY';
const map = new mapmetricsgl.Map({
container: 'map',
style: `https://tiles.mapatlas.eu/styles/dark/style.json?key=${API_KEY}`,
center: [4.9041, 52.3676],
zoom: 11,
});
async function loadOrders(hourFrom, hourTo) {
const res = await fetch(
`/api/orders/geojson?hour_from=${hourFrom}&hour_to=${hourTo}`
);
return res.json(); // returns a GeoJSON FeatureCollection
}
map.on('load', async () => {
const orders = await loadOrders(8, 12); // morning peak
map.addSource('orders', { type: 'geojson', data: orders });
map.addLayer({
id: 'order-heatmap',
type: 'heatmap',
source: 'orders',
paint: {
'heatmap-weight': [
'interpolate', ['linear'], ['get', 'items'],
0, 0, 20, 1
],
'heatmap-color': [
'interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0, 0, 255, 0)',
0.2, 'rgba(0, 128, 255, 0.5)',
0.5, 'rgba(0, 230, 150, 0.8)',
0.8, 'rgba(255, 200, 0, 0.9)',
1.0, 'rgba(255, 50, 0, 1)'
],
'heatmap-radius': [
'interpolate', ['linear'], ['zoom'],
8, 20, 14, 50
],
'heatmap-intensity': [
'interpolate', ['linear'], ['zoom'],
8, 1, 14, 3
],
'heatmap-opacity': 0.9,
},
});
// Time-of-day filter buttons
document.querySelectorAll('[data-hour-range]').forEach((btn) => {
btn.addEventListener('click', async () => {
const [from, to] = btn.dataset.hourRange.split('-').map(Number);
const newOrders = await loadOrders(from, to);
map.getSource('orders').setData(newOrders);
});
});
});
Cuộc gọi setData trên một nguồn hiện có sẽ thay thế GeoJSON mà không cần thêm lại lớp. Bản đồ nhiệt được hiển thị lại tự động. Mô hình này mở rộng thành bất kỳ bộ lọc nào dựa trên thời gian: giờ trong ngày, ngày trong tuần, điều kiện thời tiết.
Để tìm lớp lập kế hoạch tuyến đường thường kèm theo bản đồ nhiệt nhu cầu giao hàng, hãy xem Route Optimization API tutorial. Xếp chồng một tuyến đường giao hàng được tối ưu hóa trên đầu bản đồ nhiệt nhu cầu cung cấp cho những người điều phối một bức tranh hoạt động hoàn chỉnh trong một chế độ xem duy nhất.
Mẹo Hiệu Suất Cho Tập Dữ Liệu Lớn
Lớp bản đồ nhiệt MapAtlas sử dụng WebGL và hiển thị nhanh, nhưng đường dẫn dữ liệu cung cấp cho nó có thể trở thành nút cổ chai ở quy mô lớn.
Tổng hợp trước trên máy chủ cho các tập dữ liệu rất lớn. Nếu bạn có hàng triệu ping GPS, đừng gửi tất cả chúng đến trình duyệt. Chạy một tổng hợp không gian phía máy chủ (lưới lục giác H3, quadtree hoặc làm tròn lưới đơn giản) giảm 1 triệu điểm thô của bạn xuống 10.000 ô lưới có trường count và weight. Bản đồ nhiệt sẽ trông giống hệt với người dùng và sẽ tải trong một phần thời gian.
Luồng cập nhật từng bước. Đối với dữ liệu trực tiếp (lưu lượng chân bộ theo thời gian thực, đặt hàng trực tiếp), sử dụng setData với cửa sổ lăn các điểm gần đây thay vì tích lũy một đối tượng GeoJSON luôn tăng. Giữ nguồn ở số lượng điểm tối đa cố định và xóa các bản ghi cũ.
Sử dụng maxzoom trên nguồn. Thêm maxzoom: 14 vào lệnh gọi addSource của bạn để SDK dừng yêu cầu dữ liệu ô giữ ở trên mức phóng to 14. Đối với bản đồ nhiệt, điều này hiếm khi quan trọng vì các lớp bản đồ nhiệt đọc từ một nguồn GeoJSON phẳng duy nhất thay vì dữ liệu xếp lớp, nhưng nó ngăn chặn việc xử lý lại không cần thiết ở mức phóng to cao.
Giảm độ phức tạp của thuộc tính sơn. Mỗi điểm dừng interpolate bổ sung trong biểu thức sơn sẽ thêm chi phí đánh giá GPU trên mỗi khung hình. Đối với các ứng dụng nhắm mục tiêu di động, đơn giản hóa gradient màu thành ba hoặc bốn dừng và loại bỏ tỷ lệ bán kính/cường độ được liên kết phóng to trên các chế độ xem ưu tiên thấp hơn.
Khởi tạo bản đồ một cách lười biếng. Bọc toàn bộ khởi tạo bản đồ trong lệnh gọi IntersectionObserver để nó chỉ chạy khi container bản đồ cuộn vào chế độ xem. Điều này hoãn gói SDK từ tải trang ban đầu và đặc biệt có giá trị trên các trang tiếp thị nơi bản đồ nằm dưới dòng.
Để tìm hiểu sâu hơn về các mô hình hiệu suất bản đồ, bao gồm tải lười biếng và tụ cụm, danh sách kiểm tra sản xuất trong How to Add Interactive Maps to Your Website bao gồm danh sách đầy đủ.
Tích Hợp React
Bọc bản đồ nhiệt trong một thành phần React theo cùng mô hình như bất kỳ bản đồ MapAtlas nào: khởi tạo trong useEffect, phơi bày trạng thái cho thanh trượt và bộ lọc qua useState, và dọn dẹp khi không gắn kết.
import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';
export function DeliveryHeatmap({ geojson, apiKey }) {
const containerRef = useRef(null);
const mapRef = useRef(null);
const [radius, setRadius] = useState(30);
useEffect(() => {
const map = new mapmetricsgl.Map({
container: containerRef.current,
style: `https://tiles.mapatlas.eu/styles/dark/style.json?key=${apiKey}`,
center: [4.9041, 52.3676],
zoom: 11,
});
mapRef.current = map;
map.on('load', () => {
map.addSource('orders', { type: 'geojson', data: geojson });
map.addLayer({
id: 'order-heatmap',
type: 'heatmap',
source: 'orders',
paint: {
'heatmap-radius': radius,
'heatmap-opacity': 0.9,
},
});
});
return () => map.remove();
}, [apiKey]);
// Update radius without remounting the map
useEffect(() => {
const map = mapRef.current;
if (!map || !map.getLayer('order-heatmap')) return;
map.setPaintProperty('order-heatmap', 'heatmap-radius', radius);
}, [radius]);
return (
<div>
<div style={{ padding: '8px 0' }}>
<label>
Radius: {radius}px
<input
type="range" min={5} max={80} value={radius}
onChange={e => setRadius(Number(e.target.value))}
style={{ marginLeft: 8, width: 160 }}
/>
</label>
</div>
<div ref={containerRef} style={{ width: '100%', height: '600px' }} />
</div>
);
}
Trong Next.js, nhập thành phần này với dynamic(() => import('./DeliveryHeatmap'), { ssr: false }) để tránh lỗi hiển thị phía máy chủ từ SDK chỉ dành cho trình duyệt.
Tiếp Theo Xây Dựng Gì
Bây giờ bạn có một bản đồ nhiệt tương tác hoạt động với dữ liệu có trọng số, gradient màu tùy chỉnh, thanh trượt bán kính và cường độ được liên kết phóng to. Đây là nơi để đưa nó:
- Xếp chồng lớp định tuyến trên đầu bản đồ nhiệt để hiển thị các tuyến đường giao hàng được lập kế hoạch so với bề mặt nhu cầu. Route Optimization API tutorial đi qua toàn bộ triển khai.
- Thêm hoạt hình theo thời gian: quay vòng qua các bức chụp nhanh hàng giờ với vòng lặp
setIntervalgọisetDatatrên nguồn. Điều này biến bản đồ mật độ tĩnh thành một bức tranh chuyên động về cách nhu cầu di chuyển trong suốt ngày. - Kết hợp với dữ liệu giá bất động sản để hiển thị gradient giá theo khu phố. Real Estate Property Map tutorial bao gồm các mô hình dữ liệu có trọng số cho các nền tảng tài sản.
- Kiểm tra MapAtlas pricing page để tìm gói phù hợp cho lưu lượng sản xuất của bạn.
Tham chiếu SDK đầy đủ và các ví dụ bổ sung có sẵn tại docs.mapatlas.xyz.
Các Câu Hỏi Thường Gặp
Sự khác biệt giữa bản đồ nhiệt và bản đồ choropleth là gì?
Bản đồ nhiệt hình dung mật độ điểm bằng cách trộn các điểm gần nhau thành gradient màu liên tục, lý tưởng cho dữ liệu tọa độ thô như ping GPS hoặc vị trí sự kiện. Bản đồ choropleth tô màu các khu vực địa lý được xác định trước (quốc gia, mã bưu điện, khu vực tính toán) theo một giá trị thống kê. Sử dụng bản đồ nhiệt khi bạn có nhiều điểm riêng lẻ, sử dụng choropleth khi dữ liệu của bạn đã được tổng hợp theo khu vực.
Bản đồ nhiệt JavaScript có thể xử lý bao nhiêu điểm dữ liệu?
Lớp bản đồ nhiệt MapAtlas hiển thị trên GPU thông qua WebGL, vì vậy nó xử lý hàng chục nghìn điểm mà không có sự rơi khung hình ở mức phóng to bình thường. Trên khoảng 500.000 điểm, tổng hợp trước dữ liệu của bạn phía máy chủ thành lưới độ phân giải thấp hơn và chuyển sang lớp tô đầy GeoJSON hoặc vòng tròn cung cấp hiệu suất tốt hơn trên các thiết bị di động cấp thấp.
Tôi có thể sử dụng bản đồ nhiệt MapAtlas miễn phí không?
Có. MapAtlas có một tầng miễn phí bao gồm hiển thị ô chia, hỗ trợ lớp GeoJSON và lớp bản đồ nhiệt. Kế hoạch miễn phí bao gồm việc phát triển và sử dụng sản xuất lượng thấp. Xem mapatlas.eu/pricing để biết chi tiết kế hoạch đầy đủ.
Bản đồ nhiệt có hoạt động trên trình duyệt di động không?
Có. SDK MapAtlas sử dụng WebGL để hiển thị, được hỗ trợ trong tất cả các trình duyệt di động hiện đại bao gồm Safari trên iOS và Chrome trên Android. Đối với các tập dữ liệu rất lớn trên phần cứng di động cấp thấp, giảm số lượng điểm hoặc tăng bán kính bản đồ nhiệt sẽ giữ cho tốc độ khung hình mịn.
Related reading:
