CesiumJS のデフォルトの見た目を整える

Kenta Watashima 2021/04/20

デフォルトの Viewer は見た目がいまいちなので、いろいろ弄ってみる

Kenta Watashima 2021/04/20

ベースマップに MapBox の style を適用する

import * as Cesium from 'cesium';

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
});

const streetsLayer = new Cesium.MapboxStyleImageryProvider({
  styleId: 'dark-v10',
  accessToken: '<mapbox_token>',
});

viewer.imageryLayers.addImageryProvider(streetsLayer);

MapBox のアクセストークンは MapBox のアカウントを作成すると自動で生成される
https://www.mapbox.com/

Kenta Watashima 2021/04/20

Cesium のビューアはデフォルトで fog や atmosphere（大気のシミュレーション）が有効になっている。必要ない場合は disabled にできる

viewer.scene.skyAtmosphere.show = false;
viewer.scene.fog.enabled = false;
viewer.scene.globe.showGroundAtmosphere = false;
viewer.scene.skyBox = null;

Kenta Watashima 2021/04/20

画面下部のタイムラインは Viewer のコンストラクタでパラメタを渡せば消える

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: Cesium.createWorldTerrain(),
  timeline: false,
  animation: false,
});

このスクラップは2021/08/02にクローズされました