跳至主要內容
canvas

视角

// setView瞬间到达指定位置,视角 flyTo动态飞往
// 天安门position
var position = Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100)
viewer.camera.flyTo({
  // 指定相机位置
  destination: position,
  // 设置相机视角
  orientation: {
    // 相机朝向
    heading: Cesium.Math.toRadians(0),
    // 相机俯仰角 -90向下
    path: Cesium.Math.toRadians(-90),
    // 相机翻滚角度
    roll: 0,
  },
})

Emilia Zhen小于 1 分钟canvascesium.js
canvas

三维模型

// 飞机3D模型
const plane = viewer.entities.add({
  name: 'plane',
  position: Cesium.Cartesian3.fromDegrees(101.397428, 39.90923, 100000),
  model: {
    uri: '/models/CesiumAir/Cesium_Air.gltf',
    // 模型最小像素
    minimumPixelSize: 128,
    // 最大的模型像素
    maximumScale: 20000,
    //是否显示动画
    runAnimations: true,
    //是否保持最后一针的动画
    clampAnimations: true,
    // 轮廓
    silhouetteSize: 1,
    // 轮廓颜色
    silhouetteColor: Cesium.Color.WHITE,
    // 相机距离模型多远显示
    // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
  },
})
viewer.trackedEntity = plane

Emilia Zhen大约 1 分钟canvascesium.js
canvas

开始

登录 cesium 官网注册,并拿到 token

// Token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOixxxxxxx'
// 设置默认看到中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西经
  89.5,
  // 南维
  20.4,
  // 东经
  110.4,
  // 南维
  61.2
)
var viewer = new Cesium.Viewer('cesiumContainer', {
  // 地形
  // terrainProvider: Cesium.createWorldTerrain({
  //   // 地形法相
  //   requestVertexNormals: true,
  //   // 水纹
  //   requestWaterMask: true,
  // }),
  // 播放动画
  animation: false,
  // Home按钮
  homeButton: false,
  // 查询按钮
  geocoder: false,
  // 时间轴
  timeline: false,
  // 全屏
  fullscreenButton: false,
  // 场景2D/3D选择
  sceneModePicker: false,
  // 图层选择器
  baseLayerPicker: false,
  // 帮助按钮
  navigationHelpButton: false,
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: '/maps/terrain/{z}/{x}/{y}.jpg',
    fileExtension: 'jpg',
  }),
  infoBox: false,
  // 天空盒
  skyBox: new Cesium.SkyBox({
    sources: {
      positiveX: '/texture/px.png',
      positiveY: '/texture/ny.png',
      positiveZ: '/texture/pz.png',
      negativeX: '/texture/nx.png',
      negativeY: '/texture/py.png',
      negativeZ: '/texture/nz.png',
    },
  }),
})
// 地图叠加
var roadImageLayers = viewer.imageryLayers
var roadLayer = roadImageLayers.addImageryProvider(
  new Cesium.UrlTemplateImageryProvider({
    url: '/maps/road/{z}/{x}/{y}.jpg',
    fileExtension: 'jpg',
  })
)
roadLayer.alpha = 0.3
// 隐藏LOGO
viewer._cesiumWidget._creditContainer.style.display = 'none'
viewer.scene.debugShowFramesPerSecond = true

Emilia Zhen大约 4 分钟canvascesium.js