はてなブログトップ

Turf.js

このタグでブログを書く

言葉の解説

ネットで話題

関連ブログ

Turf.js

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

Hirosaji Tech Blog 🍙•4年前

MapboxのFreeCamera APIでScrollyTellingを作る

ルートに沿って、スクロールでカメラをぬるぬる移動させる3DのScrollyTellingを実装しました。実装では、タイトル通りMapbox GL JSのFreeCamera APIを利用しています。 FreeCamera API とは Mapbox GL JSがv1からv2にメジャーアップデートした際に追加された新機能です。このAPIを使って、3Dマップ上のカメラの位置や角度を自由に操作することができます。カメラの位置や角度は、FreeCameraOptionオブジェクト内の次のインスタンスで管理されています。 lookAtPoint setPitchBearing 今回は lookAtP…

#mapbox#Turf.js#ScrollyTelling#data visualization#データ可視化

関連ブログ

Hirosaji Tech Blog 🍙•5年前

MapboxとTurf.jsでポイントデータの3D地図を作る

ポイントデータの3D地図表現が、Mapboxにあるようで無かったので作りました。どんな時に使うの棒グラフに地理情報を付けたい時に使えます。例えば、「全国の展望台付きタワーの高さ」を比較する場合。 ↓ ↓ 比較する各地を、地図上に載せる時に使えます。 ↓ 実装例今回はシンプルに、１層の棒グラフを地図に載せる方法を紹介します。デモとソースコードデモとソースコードは、こちらのリンク先に掲載しています。 bl.ocks.org 要点の解説今回の要点は、ポイントデータから3Dポリゴンデータを作る点です。 Mapboxにはポイントを直接3Dで表現するメソッドは無いのですが、3Dポリゴンを描画…

#データ可視化#data visualization#mapbox#Turf.js