Cesium加载3DTileset

作者: zhuyx0304 | 来源:发表于2024-04-07 10:30 被阅读0次

从3DTileset 对象获取Cesium3DTileFeatu
cesium加载gif图片
cesium加载geoserver的服务
Cesium加载天地图
cesium 切换瓦片地图的加载方式
supermap cesium 加载倾斜摄影
Cesium加载网格影像服务
Cesium加载三维地形及WMS地图，并实现动态控制显示
Cesium加载瓦片坐标影像服务
Cesium 1.50重量级新功能测评

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cesium加载3DTileset</title>
    <link rel="stylesheet" href="../Cesium/Widgets/widgets.css" />
    <script src="../Cesium/Cesium.js"></script>  
    <style>
      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
      }
      #cesiumContainer {
        width: 100%;
        height: 100%;
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ZmI2Njk5Zi00NjdmLTRiMzctODZiYS1hYTQ0MGFhMjQxMGIiLCJpZCI6MzE2ODksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTU4MzQzNzV9.ee2r1thnG3Ajot3BYpFXfNKUP8SUtWpYDx2na02mT0A";
      var viewer = new Cesium.Viewer("cesiumContainer");
      var tileSet = new Cesium.Cesium3DTileset({
        url: "https://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json",
      });

      var tx = 200;
      var ty = 0;
      var tz = -430;
      var rx = 0;
      var ry = 0;
      var rz = 0;
      var scale = 1;
      tileSet.readyPromise.then(function (argument) {
        viewer.scene.primitives.add(tileSet);
        var cartographic = Cesium.Cartographic.fromCartesian(
          tileSet.boundingSphere.center
        );
        var surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          cartographic.height
        );
        var m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);

        //平移
        var _tx = tx ? tx : 0;
        var _ty = ty ? ty : 0;
        var _tz = tz ? tz : 0;
        var tempTranslation = new Cesium.Cartesian3(_tx, _ty, _tz);
        var offset = Cesium.Matrix4.multiplyByPoint(
          m,
          tempTranslation,
          new Cesium.Cartesian3(0, 0, 0)
        );
        var translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );
        tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

        //旋转及缩放
        if (rx) {
          var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rx));
          var rotate = Cesium.Matrix4.fromRotationTranslation(mx);
          Cesium.Matrix4.multiply(m, rotate, m);
        }

        if (ry) {
          var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(ry));
          var rotate = Cesium.Matrix4.fromRotationTranslation(my);
          Cesium.Matrix4.multiply(m, rotate, m);
        }

        if (rz) {
          var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rz));
          var rotate = Cesium.Matrix4.fromRotationTranslation(mz);
          Cesium.Matrix4.multiply(m, rotate, m);
        }

        if (scale) {
          var _scale = Cesium.Matrix4.fromUniformScale(scale);
          Cesium.Matrix4.multiply(m, _scale, m);
        }

        tileSet._root.transform = m;

        viewer.flyTo(tileSet);
        //参照点
        var entity = {
          id: "test",
          point: new Cesium.PointGraphics({
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            color: Cesium.Color.fromCssColorString("#ff0033"),
            pixelSize: 30,
            outlineColor: Cesium.Color.fromCssColorString("#ff0033"),
            outlineWidth: 1,
          }),
          position: surface,
        };
        viewer.entities.add(entity);
      });
    </script>
  </body>
</html>