Appearance
Thêm Heatmap
Ví dụ này vẽ RouteHeatmap trên bản đồ từ dữ liệu GeoJSON
html
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>VGM SDK Route Heatmap</title>
<script src="https://maps.vgm.ai/vgm-sdk/vgmmap-sdk.js?v=${new Date().getTime()}"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background: #f8f9fa;
}
#map-container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map-container"></div>
<script>
const sdk = new window.VGMMap({
container: document.getElementById('map-container'),
apiBase: "https://maps.vgm.ai/vgm-sdk"
});
function renderRouteHeatmap(floorVal, attempt = 1) {
const current = floorVal !== null ? parseInt(floorVal) : null;
if (current !== 2) {
try { sdk.removeLayer("routeheatmap-layer"); } catch (e) { }
return;
}
try {
try { sdk.removeLayer("routeheatmap-layer"); } catch (e) { }
sdk.addLayer({
id: "routeheatmap-layer",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77797234328985, 21.056404931800174] }, properties: { weight: 8 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7779601, 21.0564034] }, properties: { weight: 7 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77794803128499, 21.056401914642418] }, properties: { weight: 9 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7779404, 21.0564009] }, properties: { weight: 6 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77793283897691, 21.056399878333355] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7779269, 21.0563991] }, properties: { weight: 8 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77792097582527, 21.056398469096813] }, properties: { weight: 7 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7779120, 21.0563974] }, properties: { weight: 9 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7779050, 21.0563966] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77789831941548, 21.05639581158348] }, properties: { weight: 9 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778961, 21.0564052] }, properties: { weight: 8 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778950, 21.0564145] }, properties: { weight: 7 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77789398324761, 21.05642396864741] }, properties: { weight: 6 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77789238783964, 21.056435867094866] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778800, 21.0564343] }, properties: { weight: 8 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778681575815, 21.05643284826107] }, properties: { weight: 9 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778600, 21.0564317] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778440, 21.0564295] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778280, 21.0564273] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7778120, 21.0564251] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7777960, 21.0564229] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77778502748511, 21.056421700120648] }, properties: { weight: 9 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77777049184549, 21.0564197509984] }, properties: { weight: 6 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7777722, 21.0564081] }, properties: { weight: 9 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7777739, 21.0563963] }, properties: { weight: 10 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77777565087018, 21.05638454858875] }, properties: { weight: 8 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.7777872, 21.0563860] }, properties: { weight: 7 } },
{ type: "Feature", geometry: { type: "Point", coordinates: [105.77779892621918, 21.056387554010197] }, properties: { weight: 5 } }
]
}
},
layer: {
type: "heatmap",
paint: {
"heatmap-weight": ["interpolate", ["linear"], ["get", "weight"], 0, 0, 14, 1],
"heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 15, 1, 20, 5],
"heatmap-color": [
'interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(0,0,255,0)',
0.2, 'rgb(0,0,255)',
0.4, 'rgb(0,255,255)',
0.6, 'rgb(0,255,0)',
0.8, 'rgb(255,255,0)',
1, 'rgb(255,0,0)'
],
"heatmap-radius": [
"interpolate",
["linear"],
["zoom"],
0, 2,
10, 5,
15, 15,
18, 20
],
'heatmap-opacity': [
'interpolate', ['linear'], ['zoom'],
16, 1,
22, 0.6
],
}
},
floor: 2
});
} catch (error) {
if (attempt <= 15) {
setTimeout(() => renderRouteHeatmap(floorVal, attempt + 1), 300);
}
}
}
sdk.on("FLOOR_CHANGED", ({ floor }) => {
try { sdk.removeLayer("routeheatmap-layer"); } catch (e) { }
setTimeout(() => renderRouteHeatmap(floor), 200);
});
sdk.on("APP_READY", () => {
// replace 5 by your site_id
sdk.setSite(5);
setTimeout(() => {
sdk.setView({
lng: 105.77789,
lat: 21.05641,
zoom: 20,
floor: 2
});
}, 1500);
});
sdk.init();
window.sdk = sdk;
</script>
</body>
</html>