cesium 地形加载

流氓也是种气质 _Cookie

已于 2024-06-03 15:02:53 修改

阅读量1.2k

点赞数 2

分类专栏： Cesium 文章标签：前端 cesium

于 2024-05-29 09:42:03 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/139284807

版权

Cesium 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.效果图：

2.cesium 的基础配置

    //无token会导致球体无法显示
Cesium.Ion.defaultAccessToken ="your token"; // 官网网配置的token
      var viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false,//控制地图是否显示一个地理编码（geocoding）控件，允许用户搜索地点并定位到特定位置。
        homeButton: false, //控制是否显示一个回到初始视图的按钮，允许用户快速返回到地图的初始状态
        animation: false, //控制是否显示动画控件，允许用户播放、暂停或者改变时间。
        fullscreenButton: false, //控制是否显示全屏按钮，允许用户切换地图进入或退出全屏模式。
        sceneModePicker: false, //控制是否显示场景模式选择器，允许用户在 2D、3D 和 CV（Columbus View）模式之间切换
        timeline: true, //: 控制是否显示时间轴控件，允许用户在时间上浏览数据。
        navigationHelpButton: false, //控制是否显示导航帮助按钮，提供关于如何使用地图导航控件的帮助信息
        baseLayerPicker: false, // 控制是否显示基础图层选择器，允许用户选择不同的基础图层（如卫星影像、地图等）。
        infoBox: false, //控制是否显示信息框，当用户点击地图上的对象时，会显示与该对象相关的信息。
        scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        selectionIndicator: false,//控制是否显示选择指示器，用于指示当前选择的地图对象。
        baselLayerPicker: false, //控制是否显示基础图层选择器，允许用户选择不同的基础图层。
      });

3.地形加载及加载完成的监听事件

let terrainProvider = Cesium.createWorldTerrain({ //添加世界地形能看到山脉的高低起伏
        requestVertexNormals: true, //开启地形光照
        requestWaterMask: true, // 开启水面波纹
      });
      viewer.terrainProvider = terrainProvider;
      var lastCameraHeight = 0;
      var heightStableCount = 0;
      var threshold = 5; // 高度稳定的阈值
      var maxStableCount = 30; // 达到稳定的帧数

      function isTerrainProvider() {
        var cameraHeight =
          params.gisMapViewer.camera.positionCartographic.height;
        if (Math.abs(cameraHeight - lastCameraHeight) < threshold) {
          heightStableCount++;
        } else {
          heightStableCount = 0;
        }
        if (heightStableCount >= maxStableCount) {
          console.log("地形加载完成");
          // 在这里执行地形加载完成后的操作
          params.gisMapViewer.scene.preRender.removeEventListener(
            isTerrainProvider
          );
        }

        lastCameraHeight = cameraHeight;
      }

4.完整代码

<!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>Document</title>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.114/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    //无token会导致球体无法显示 
    const mapCreate = async () => {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZjZlMzAxNS1jY2ZmLTQ0MzctYTE1MS0zNzMxZjhkZjlhYTgiLCJpZCI6MTIyNTg4LCJpYXQiOjE2NzQ5NzMxNTB9.GKIVHIsKN-AWd4vjLOIPm9Fji8tIEvZd5AXf-rTvFk0";
      var viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false,//控制地图是否显示一个地理编码（geocoding）控件，允许用户搜索地点并定位到特定位置。
        homeButton: false, //控制是否显示一个回到初始视图的按钮，允许用户快速返回到地图的初始状态
        animation: false, //控制是否显示动画控件，允许用户播放、暂停或者改变时间。
        fullscreenButton: false, //控制是否显示全屏按钮，允许用户切换地图进入或退出全屏模式。
        sceneModePicker: false, //控制是否显示场景模式选择器，允许用户在 2D、3D 和 CV（Columbus View）模式之间切换
        timeline: true, //: 控制是否显示时间轴控件，允许用户在时间上浏览数据。
        navigationHelpButton: false, //控制是否显示导航帮助按钮，提供关于如何使用地图导航控件的帮助信息
        baseLayerPicker: false, // 控制是否显示基础图层选择器，允许用户选择不同的基础图层（如卫星影像、地图等）。
        infoBox: false, //控制是否显示信息框，当用户点击地图上的对象时，会显示与该对象相关的信息。
        scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
        selectionIndicator: false,//控制是否显示选择指示器，用于指示当前选择的地图对象。
        baselLayerPicker: false, //控制是否显示基础图层选择器，允许用户选择不同的基础图层。
      });
      let terrainProvider = Cesium.createWorldTerrain({ //添加世界地形能看到山脉的高低起伏
        requestVertexNormals: true, //开启地形光照
        requestWaterMask: true, // 开启水面波纹
      });
      viewer.terrainProvider = terrainProvider;
      var lastCameraHeight = 0;
      var heightStableCount = 0;
      var threshold = 5; // 高度稳定的阈值
      var maxStableCount = 30; // 达到稳定的帧数

      function isTerrainProvider() {
        var cameraHeight =
          params.gisMapViewer.camera.positionCartographic.height;
        if (Math.abs(cameraHeight - lastCameraHeight) < threshold) {
          heightStableCount++;
        } else {
          heightStableCount = 0;
        }
        if (heightStableCount >= maxStableCount) {
          console.log("地形加载完成");
          // 在这里执行地形加载完成后的操作
          params.gisMapViewer.scene.preRender.removeEventListener(
            isTerrainProvider
          );
        }

        lastCameraHeight = cameraHeight;
      }
      viewer.scene.preRender.addEventListener(isTerrainProvider);
      viewer.debugShowFramesPerSecond = true//显示当前的帧率信息，这样你就可以实时观察到地图的渲染性能
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1;// 设置了摄像机的最小缩放距离
      viewer.camera.setView({ // 相机视口
        destination: Cesium.Cartesian3.fromDegrees(109.306058, 30.86751, 8000),
        //奉节 坐标
      });

    }
    mapCreate()





  </script>

</body>

</html>