はじめに
この記事は#30DayMapChallenge2022 12日目の記事です。
テーマはScaleです。
Cesiumを使って地球儀を表示してみます。
CesiumJSとは
世界クラスの3D地球儀と地図を作成するためのオープンソースのJavaScriptライブラリ
Cesium ionトークン取得
全球の衛星画像と実世界の3Dコンテンツを使うために、Cesium ionのアカウントを作成して、トークンを取得します。
アカウント作成はこちらから
非商用の個人プロジェクト、研究、非営利の教育活動目的であれば無料です。
Access Tokensのタブをクリックすると、デフォルトのトークンを確認できます。
CesiumJSの設定方法として以下の2つがあります。今回はCDNを使います。
- CDNからインポートする
- npmでインストールする
地球儀を表示
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サンプル</title>
<link href="style.css" rel="stylesheet" />
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
</head>
<body>
<div id="cesiumContainer"></div>
<script src="main.js"></script>
</body>
</html>
style.css
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
#cesiumContainer {
display: flex;
width: 100%;
height: 100%;
}
main.js
// Cesium ionのアクセストークン
Cesium.Ion.defaultAccessToken = 'your_access_token';
// Cesium ViewerをcesiumContainerというIDのHTML要素に初期化
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
});
// 初期表示時のカメラ位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(138, 29, 25000000),
});
defaultAccessTokenに取得したアクセストークンをセットします。
カメラの初期位置は日本が上に来るようにしてみました
地球儀を表示できました！
マウスを使うとぐりぐりズームできます。
参考文献