Bootstrap

三维地图之cesium轨迹回放(有代码)

一、cesium加载三维地图和三维模型

Cesium的官方教程写得是非常详尽的,用chrome打开官方学习文档https://cesium.com/docs/,一键翻译,照着学习是最好的方案。

最简单的加载三维地图的方法:https://cesium.com/docs/tutorials/quick-start/

 

代码非常简短,如果你注册了cesium,网站会自动识别你的ak,填充入代码中。(下面这段代码,把Cesium.Ion.defaultAccessToken = 你的ak中,你的ak替换成cesium平台分配ak,或者干脆把这段删掉,就可以在浏览器中浏览三维地图了)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    Cesium.Ion.defaultAccessToken = 你的ak;
    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRad
;