はじめに
この記事は#30DayMapChallenge2022 19日目の記事です。
テーマはGlobeです。
Cesiumを使って地球義から東京駅までジャンプしてみます。
CesiumJSとは
世界クラスの3D地球儀と地図を作成するためのオープンソースのJavaScriptライブラリ
アクセストークンの取得と地球儀表示についてはこちらに記載しています。
OSMの建物を追加する
公式のサンプルコードを参考に、OSMの建物を表示してみます。
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(),
});
// OpenStreetMapの建物を追加
viewer.scene.primitives.add(Cesium.createOsmBuildings());
// 初期表示時のカメラ位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(139.765, 35.66, 1000.0),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-20),
},
});
OSMの建物を表示できました！
たった1行で追加できるのすごいですね。。
建物をクリックすると属性情報を確認することができます。
flyToを追加する
地球儀を表示した状態で、「東京駅にジャンプ！」ボタンをクリックしたら、東京駅にジャンプする動作を追加してみます。
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>
<button id="fly">東京駅にジャンプ！</button>
<script src="main.js"></script>
</body>
</html>
style.css
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
#cesiumContainer {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#fly {
display: block;
position: relative;
margin: 30px auto;
width: 15%;
height: 50px;
padding: 10px;
border: none;
border-radius: 50px;
font-size: 20px;
text-align: center;
color: #fff;
background: #0067c0;
cursor: pointer;
}
#fly:hover {
transform: scale(1.1, 1.1);
}
main.js
// Cesium ionのアクセストークン
Cesium.Ion.defaultAccessToken = 'your_access_token';
// Cesium ViewerをcesiumContainerというIDのHTML要素に初期化
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain(),
});
// OpenStreetMapの建物を追加
viewer.scene.primitives.add(Cesium.createOsmBuildings());
// 初期表示時のカメラ位置
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(138, 29, 25000000),
});
document.getElementById('fly').addEventListener('click', function () {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(139.765, 35.66, 1000.0),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-20),
},
});
});
初期表示は地球義です。
「東京駅にジャンプ」ボタンを押すと・・
東京駅にジャンプしました！
参考文献