body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
#time {
position: absolute;
left: 0;
right: 0;
bottom: 80px;
margin-left: auto;
margin-right: auto;
width: 90%;
}
#hour {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
left: 0px;
right: 0px;
bottom: 40px;
margin-left: auto;
margin-right: auto;
max-width: 30%;
padding: 5px;
font-size: 18px;
line-height: 22px;
border-radius: 3px;
text-align: center;
}
mapboxgl.accessToken =
"pk.eyJ1IjoiYnJhbnpoYW5nIiwiYSI6ImNqM3FycmVldjAxZTUzM2xqMmllNnBjMHkifQ.Wv3ekbtia0BuUHGWVUGoFg";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
antialias: true,
center: [121.495, 31.24],
zoom: 16.1,
pitch: 30
});
const tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
realSunlight: true
});
const hour = document.getElementById("hour");
const date = new Date(Date.UTC(2022, 8, 7, 1, 3));
const timeInput = document.getElementById("time");
timeInput.value =
date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
hour.innerHTML = "time: " + date.toLocaleString();
timeInput.oninput = () => {
date.setHours(Math.floor(timeInput.value / 3600));
date.setMinutes(Math.floor(timeInput.value / 60) % 60);
date.setSeconds(timeInput.value % 60);
hour.innerHTML = "time: " + date.toLocaleString();
map.triggerRepaint();
};
map.on("style.load", () => {
map.addLayer(
{
id: "3d-buildings",
source: "composite",
"source-layer": "building",
filter: ["==", "extrude", "true"],
type: "fill-extrusion",
minzoom: 15,
paint: {
"fill-extrusion-color": "#ddd",
"fill-extrusion-height": ["get", "height"],
"fill-extrusion-base": ["get", "min_height"],
"fill-extrusion-opacity": 1
}
},
"poi-label"
);
tb.setBuildingShadows({
layerId: "building-shadows",
buildingsLayerId: "3d-buildings",
minAltitude: 0.1
});
});
map.on("load", () => {
map.tb.setSunlight();
map.repaint = true;
});
map.on("render", () => {
tb.setSunlight(date);
});