Tạo lớp deck.gl bằng REST API
Tạo một lớp deck.gl làm lớp phủ từ REST API.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create deck.gl layer using REST API</title>
<meta property="og:description" content="Create a deck.gl layer as an overlay from a REST API." />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
<script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
/* Deck.gl layer is added as an overlay, popup needs to be displayed over it */
.trackasiagl-popup {
z-index: 2;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new trackasiagl.Map({
container: "map",
style: "https://maps.track-asia.com/styles/v1/streets.json?key=public_key",
center: [106.7030501, 10.7731843],
zoom: 13,
});
map.addControl(new trackasiagl.NavigationControl(), "top-right");
// 5 colors for POIs in TPHCM
const colorPalette = [
[255, 102, 51],
[0, 179, 230],
[230, 179, 51],
[51, 102, 230],
[153, 255, 153],
];
// Sample data for TPHCM
const tphcmSights = [
{
name: "Nhà thờ Đức Bà Sài Gòn",
lon: 106.699,
lat: 10.779,
type: 0,
},
{ name: "Dinh Độc Lập", lon: 106.695, lat: 10.777, type: 1 },
{ name: "Chợ Bến Thành", lon: 106.698, lat: 10.772, type: 2 },
{ name: "Tòa nhà Bitexco", lon: 106.704, lat: 10.771, type: 3 },
{ name: "Landmark 81", lon: 106.722, lat: 10.795, type: 4 },
];
// Add the overlay as a control
map.on("load", () => {
const layer = new deck.ScatterplotLayer({
id: "scatterplot-layer",
data: tphcmSights,
pickable: true,
opacity: 0.8,
stroked: true,
filled: true,
radiusMinPixels: 14,
radiusMaxPixels: 100,
lineWidthMinPixels: 5,
getPosition: (d) => [d.lon, d.lat],
getFillColor: (d) => colorPalette[d.type],
getLineColor: [14, 16, 255],
onClick: (info) => {
const { coordinate, object } = info;
const description = `<p><b>${object.name}</b></p>`;
new trackasiagl.Popup()
.setLngLat(coordinate)
.setHTML(description)
.addTo(map);
},
});
// Create the overlay
const overlay = new deck.MapboxOverlay({
layers: [layer],
});
map.addControl(overlay);
});
</script>
</body>
</html>