您现在的位置是：网站首页>CesiumCesium

Cesium初始化

左鹏08-17 10:47:05【Cesium】1,279人已围观

简介1、初始化效果图如下，初始化代码在下面，有详细的注释 2、初始化代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

1、初始化效果图如下，初始化代码在下面，有详细的注释

2、初始化代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cesium</title>
  <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
</head>

<body>
  <div id="cesiumViewer"></div>
  <script src="./Cesium/Cesium.js"></script>
  <script>
    let defaultAccessToken = "";
    Cesium.Ion.defaultAccessToken = defaultAccessToken;
    var viewer = new Cesium.Viewer("cesiumViewer", {
      imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            minimumLevel: 3,
            maximumLevel: 18
        }),
      //baseLayerPicker: false, //关闭图层选择器
      //放大镜图标，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
      //geocoder: false,
      //房子图标，视角返回初始位置
      // homeButton: false,
      //经纬网图标，选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)
      //sceneModePicker: false,
      //地图图标，图层选择器，选择要显示的地图服务和地形服务,默认会用到cesium.ion
      baseLayerPicker: false,
      //问号图标，导航帮助按钮，显示默认的地图控制帮助
      navigationHelpButton: false,
      animation: false, //动画器件，显示当前时间，允许跳转特定时间
      timeline: false, //时间轴
      //全屏图标，全屏按钮
      fullscreenButton: false,
      //虚拟现实
      //vrButton: true,
      //阴影
      shadows: true,
      //点击后显示详细信息
      //infoBox: true,
      //展示数据版权属性
      CreditsDisplay: false,
      //terrainExaggeration: 3.0, //地形夸大
      shouldAnimate: true
    });
    (function () {
      viewer._cesiumWidget._creditContainer.style.display = "none"; //隐藏版本信息
      //viewer.scene.debugShowFramesPerSecond = true; //显示帧率,帧率与显示流畅度有关，或说与显卡有关
      viewer.scene.skyBox.show = true; //是否显示星空
      //viewer.scene.backgroundColor = Cesium.Color.BLUE;//地球背景颜色
      viewer.scene.sun.show = true; //是否显示太阳
      viewer.scene.moon.show = true; //是否显示有月亮
      viewer.scene.skyAtmosphere.show = true; //是否隐藏大气圈
      viewer.scene.globe.show = true; //是否显示地球
      //Rectangle(west, south, east, north)
      var lon = 100.48;
      var lat = 30;
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(lon, lat, lon + 1, lat + 1);
      Cesium.Camera.DEFAULT_VIEW_FACTOR = 2.8;
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(lon, lat, 19000000.0),
        orientation: { //此视角为观察者/相机
          heading: 0, //Cesium.Math.toRadians(0),//偏航
          pitch: Cesium.Math.toRadians(-90.0), //俯仰，人如果在赤道上空，俯仰角为0可见地球。如果在北纬，俯仰角为负才能见地球
          roll: 0.0 //翻滚
        }
      });
    })();

  </script>
</body>

</html>

标签

Cesium

Cesium初始化

上一篇：vue-pdf的使用说明

下一篇：Cesium切换为高德地图包，使用高德地图数据（卫星地图、矢量地图、地图标注）图层的使用