Published
Edited
May 12, 2021
1 fork
md`# mapbox カメラとGPSデータ`
md `が持っている`
{
let container = html`<div style='height:500px;' />`;
yield container;
mapboxgl.accessToken = 'pk.eyJ1IjoiYmlza3dpa21hbiIsImEiOiJjaWxidzVlcGQxcmtxdWJrbjQ2Zng3bWN5In0.KcfLaovMGcEZkl6cyU6_Hw';
let map = new mapboxgl.Map({
container,
style: 'mapbox://styles/biskwikman/ckmn5bcqn0v1i17mra2n1b7r9/draft',
center: [138.7189, 35.1691],
zoom: 11.53, // starting zoom
pitch: 76,
bearing: -177.2
});
let rotateCamera = (timestamp) => {
// clamp the rotation between 0 -360 degrees
// Divide timestamp by 100 to slow rotation to ~10 degrees / sec
map.rotateTo((timestamp / 100) % 360, { duration: 0 });
// Request the next frame of the animation.
requestAnimationFrame(rotateCamera);
}
let updateCameraPosition = (position, altitude, target) => {
var camera = map.getFreeCameraOptions();
camera.position = mapboxgl.MercatorCoordinate.fromLngLat(
position,
altitude
);
camera.lookAtPoint(target);
map.setFreeCameraOptions(camera);
}
var animationIndex = 0;
var animationTime = 0.0;
map.on('idle', () => {
// rotateCamera(0);
// linearly interpolate between two altitudes/positions based on time
var lerp = function (a, b, t) {
if (Array.isArray(a) && Array.isArray(b)) {
var result = [];
for (var i = 0; i < Math.min(a.length, b.length); i++)
result[i] = a[i] * (1.0 - t) + b[i] * t;
return result;
} else {
return a * (1.0 - t) + b * t;
}
};
var animations = [
{
duration: 1000.0,
animate: function (phase) {
var start = [138.73375, 35.41914];
var end = [138.72649, 35.33974];
var alt = [7000.0, 6000.0];
// interpolate camera position while keeping focus on a target lat/lng
var position = lerp(start, end, phase);
var altitude = lerp(alt[0], alt[1], phase);
var target = [138.73036, 35.36197];
updateCameraPosition(position, altitude, target);
}
}
];
var lastTime = 0.0;
function frame(time) {
animationIndex %= animations.length;
var current = animations[animationIndex];
if (animationTime < current.duration) {
current.animate(animationTime / current.duration);
}
// allow requestAnimationFrame to control the speed of the animation
animationTime += 1 / (time - lastTime);
lastTime = time;
if (animationTime > current.duration) {
animationIndex++;
animationTime = 0.0;
}
window.requestAnimationFrame(frame);
}
window.requestAnimationFrame(frame);
});
map.on('load', function () {
map.addSource('shizuoka-data', {
type: 'vector',
url: 'mapbox://biskwikman.c1z1zjhw'
});
map.addLayer({
'id': 'shizuoka-point-data',
'type': 'circle',
'source': 'shizuoka-data',
'source-layer': '20210506_GPS_raw_静岡県_20190101_20191231',
'minzoom': 11,
'paint': {
'circle-color': 'purple',
'circle-radius': 3,
'circle-opacity': 0.4
}
});
map.addLayer({
'id': 'sky',
'type': 'sky',
'paint': {
// set up the sky layer to use a color gradient
'sky-type': 'gradient',
// the sky will be lightest in the center and get darker moving radially outward
// this simulates the look of the sun just below the horizon
'sky-gradient': [
'interpolate',
['linear'],
['sky-radial-progress'],
0.8,
'rgba(135, 206, 235, 1.0)',
1,
'rgba(0,0,0,0.1)'
],
'sky-gradient-center': [0, 0],
'sky-gradient-radius': 90,
'sky-opacity': [
'interpolate',
['exponential', 0.1],
['zoom'],
5,
0,
22,
1
]
}
});
});
invalidation.then(() => map.remove());
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
