Japan Buildings【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Japan%20Buildings.html&label=All

效果如下图所示：其他地点的截图省略。

该示例用到的数据集，个人的Cesium Ion中都有，它们来自 OpenStreetMap 的具有丰富元数据的全球 3D 建筑物。具体如下所示：

示例代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: true,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  infoBox: false,
  baseLayerPicker: false,
  //加载日本区域地形数据，个人的 Cesium Ion中有这个数据
  terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(2767062),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;
/**
 * depthTestAgainstTerrain: 
 * - 若为 true，则广告牌、折线、标签等图元将与地形表面进行深度测试；
 * - 若为 false，则除非位于地球背面，否则这些图元始终绘制在地形之上。
 * 对图元进行地形深度测试的缺点是，微小的数值噪声或地形细节层次切换有时会导致本应在地表显示的图元消失在地形之下。
 */
scene.globe.depthTestAgainstTerrain = true;//开启深度检测

try {
  // 加载日本 3D 建筑数据，个人的 Cesium Ion中有这个数据
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2602291);
  scene.primitives.add(tileset);
  await viewer.zoomTo(tileset);
} catch (error) {
  console.log(error);
}

// 定义兴趣点(poi)的相机位置

//广岛
const hiroshima = {
  destination: new Cesium.Cartesian3(
    -3558117.165209301,
    3887175.058311886,
    3582090.381367681,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.915045649098936,
      -0.16130516440787898,
      0.3696919041586574,
    ),
    up: new Cesium.Cartesian3(
      -0.20924973638933655,
      0.5937271886242537,
      0.7769829942214522,
    ),
  },
};

//东京塔
const tokyoTower = {
  destination: new Cesium.Cartesian3(
    -3959788.9678092706,
    3353283.9088315447,
    3697270.0292328526,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.1473261076519599,
      -0.9210400676146971,
      0.3605276852787276,
    ),
    up: new Cesium.Cartesian3(
      -0.6082716434343354,
      0.20305763470537083,
      0.7673155835649066,
    ),
  },
};

//京都二条城
const kyotoNijoCastle = {
  destination: new Cesium.Cartesian3(
    -3746418.0787567603,
    3649244.7209161296,
    3638967.47570257,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.9417381486076588,
      -0.026110036454204615,
      0.335331963065526,
    ),
    up: new Cesium.Cartesian3(
      -0.2518896785254185,
      0.6059364940549604,
      0.7545810460280222,
    ),
  },
};

//(日本北海道的)札幌市
const sapporo = {
  destination: new Cesium.Cartesian3(
    -3644464.457824361,
    2916376.559037763,
    4333280.277694175,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      -0.3679337542668949,
      -0.8827113216318188,
      -0.2923105799215557,
    ),
    up: new Cesium.Cartesian3(
      -0.7773373481004832,
      0.11948179734604299,
      0.6176331818734058,
    ),
  },
};

//加贺号航空母舰，这里用航空母舰来定义了一个地点
const kaga = {
  destination: new Cesium.Cartesian3(
    -3720805.8497414757,
    3554280.4145123693,
    3756470.8341226312,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      -0.29857010298659575,
      0.04749330012764362,
      -0.9532052664801844,
    ),
    up: new Cesium.Cartesian3(
      -0.7423221317622432,
      0.6161776077834791,
      0.2632166566959398,
    ),
  },
};

//箱根町(位于日本神奈川县西部的町)
const hakone = {
  destination: new Cesium.Cartesian3(
    -3938455.040928949,
    3417079.906560689,
    3662889.160230748,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.09245366141098484,
      0.5115481128951291,
      -0.854266263342487,
    ),
    up: new Cesium.Cartesian3(
      -0.6151172847807794,
      0.703996434356258,
      0.35499260045470854,
    ),
  },
};

//富士山御殿场
const mtFujiGotemba = {
  destination: new Cesium.Cartesian3(
    -3930814.3315207073,
    3422614.91809806,
    3665138.546010887,
  ),
  orientation: {
    direction: new Cesium.Cartesian3(
      0.8178889459747928,
      0.5717362258573416,
      0.06461702635254533,
    ),
    up: new Cesium.Cartesian3(
      -0.49123560987022913,
      0.6353948538216464,
      0.595785997932473,
    ),
  },
};

const options1 = [
  {
    text: "广岛",
    onselect: function () {
      scene.camera.flyTo(hiroshima);
    },
  },
  {
    text: "东京塔",
    onselect: function () {
      scene.camera.flyTo(tokyoTower);
    },
  },
  {
    text: "京都二条城",
    onselect: function () {
      scene.camera.flyTo(kyotoNijoCastle);
    },
  },
  {
    text: "箱根",
    onselect: function () {
      scene.camera.flyTo(hakone);
    },
  },
  {
    text: "富士山 - 御殿场",
    onselect: function () {
      scene.camera.flyTo(mtFujiGotemba);
    },
  },
  {
    text: "札幌市",
    onselect: function () {
      scene.camera.flyTo(sapporo);
    },
  },
  {
    text: "加贺",
    onselect: function () {
      scene.camera.flyTo(kaga);
    },
  },
];
Sandcastle.addToolbarMenu(options1);

// 设置一个光源，使其从相机方向照射，始终照亮建筑物
const cameraLight = new Cesium.DirectionalLight({
  direction: scene.camera.directionWC, // Updated every frame
  intensity: 2.0,
});
scene.globe.enableLighting = true;
scene.globe.dynamicAtmosphereLightingFromSun = false;
scene.globe.dynamicAtmosphereLighting = false;
scene.light = cameraLight;

scene.preRender.addEventListener(function (scene, time) {
  scene.light.direction = Cesium.Cartesian3.clone(
    scene.camera.directionWC,
    scene.light.direction,
  );
});

viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
  e.cancel = true;
  scene.camera.flyTo(hiroshima);
});