直接上示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>cesium示例</title>

  <!-- 引用cesium的js和css，天地图的扩展js -->

  <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>

  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/>

  <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>

  <style type="text/css">

    html, body, #tiandituContainer {

      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;

    }

  </style>

</head>

<body onload="loadData()">

<div id="tiandituContainer">

</div>

<script>

  //Cesium官网注册后的授权token，没有token不能使用cesium在线的地形服务，这里需要改成自己的token

  Cesium.Ion.defaultAccessToken = "";

  var viewer;

   function loadData()

   {

       //默认会调用微软virtualearth地图

        viewer = new Cesium.Viewer('tiandituContainer',{

          animation:false,       //是否显示动画控件

          homeButton:true,       //是否显示home键

          geocoder:true,         //是否显示地名查找控件，如果设置为true，则无法查询

          baseLayerPicker:true, //是否显示图层选择控件

          timeline:false,        //是否显示时间线控件

          fullscreenButton:true, //是否全屏显示

          infoBox:true,         //是否显示点击要素之后显示的信息

          sceneModePicker:true,  //是否显示投影方式控件  三维/二维

          navigationInstructionsInitiallyVisible:false, //导航指令

          navigationHelpButton:false,     //是否显示帮助信息控件

          selectionIndicator:false, //是否显示指示器组件

        });

        //隐藏cesium的logo

        viewer._cesiumWidget._creditContainer.style.display = "none";

        //默认的Cesium会加载一个bingMap底图，这个地图网络不太好，一般要先去掉这个默认的

        viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

        //arcgis在线影像地图

        viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({

            name:"img_arcgis",

            url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"

        }));

         viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关，打开后地形会遮挡看不到的区域

         viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果

       add3DTiles("https://data.mars3d.cn/3dtiles/max-fsdzm/tileset.json",121.479394, 29.791416,8);

   }

           function add3DTiles(url,longitude, latitude, height) {

                var tileset = viewer.scene.primitives.add(

                            new Cesium.Cesium3DTileset({

                                url:url,

                                maximumScreenSpaceError: 2,//默认16,最大屏幕空间错误

                                //maximumNumberOfLoadedTiles: 1000,

                                maximumMemoryUsage:512//默认512,内存MB的最大数量

                            }));

                tileset.readyPromise.then((tileset) => {

                            //模型加载后可能会有便宜和高度不对，需要对模型进行调整

                            tileSet(tileset,longitude, latitude, height)

                            //tileSetAll(tileset,longitude, latitude, height,0,0,0,1);

                    viewer.zoomTo(tileset);

                });

            }

            //利用translation对模型的经度、纬度、高度进行修改

               function tileSet(tileset,longitude, latitude, height)

               {

                   //3dtile模型的边界球体

                   var boundingSphere = tileset.boundingSphere;

                   //迪卡尔空间直角坐标=>地理坐标（弧度制）

                   var cartographic_original = Cesium.Cartographic.fromCartesian(boundingSphere.center);

                   //设置新的经度、纬度、高度

                   var cartographic_offset  = Cesium.Cartographic.fromDegrees(longitude, latitude, height)

                   //地理坐标（弧度制）=>迪卡尔空间直角坐标

                   var Cartesian3_original = Cesium.Cartesian3.fromRadians(cartographic_original.longitude, cartographic_original.latitude, cartographic_original.height);

                   var Cartesian3_offset  = Cesium.Cartesian3.fromRadians(cartographic_offset.longitude, cartographic_offset.latitude, cartographic_offset.height);

                   //获得地面和offset的转换

                   var translation = Cesium.Cartesian3.subtract(Cartesian3_offset, Cartesian3_original, new Cesium.Cartesian3());

                   //修改模型矩阵

                   tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

               }

            //利用transform对模型的所有参数进行修改

               function tileSetAll(tileset,longitude,latitude,height,rotateX,rotateY,rotateZ,scale)

               {

                     //旋转角度设置

                     var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotateX));

                     var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotateY));

                     var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotateZ));

                     var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);

                     var rotationY = Cesium.Matrix4.fromRotationTranslation(my);

                     var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);

                     //平移 修改经纬度

                     var position = Cesium.Cartesian3.fromDegrees(longitude,latitude,height);

                     var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);

                     //旋转、平移矩阵相乘

                     Cesium.Matrix4.multiply(transform, rotationX, transform);

                     Cesium.Matrix4.multiply(transform, rotationY, transform);

                     Cesium.Matrix4.multiply(transform, rotationZ, transform);

                     //缩放 修改缩放比例

                     var scale1 = Cesium.Matrix4.fromUniformScale(scale);

                     Cesium.Matrix4.multiply(transform, scale1, transform);

                     //赋值给tileset

                     tileset._root.transform = transform;

               }

</script>

</body>

</html>

三维模型有的没有坐标信息，可以在转换的时候添加坐标信息，具体如下：

cesium教程3-加载3dtile模型，并调整位置的更多相关文章

  1. cesium 学习(五) 加载场景模型

    cesium 学习(五) 加载场景模型 一.前言 现在开始实际的看看效果,目前我所接触到基本上都是使用Cesium加载模型这个内容,以及在模型上进行操作.So,现在进行一些加载模型的学习,数据的话可以 ...

  2. [译]Vulkan教程(31)加载模型

    [译]Vulkan教程(31)加载模型 Loading models 加载模型 Introduction 入门 Your program is now ready to render textured ...

  3. cesium加载gltf模型

    cesium加载gltf模型 一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...

  4. cesium加载gltf模型点击以及列表点击定位弹窗

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...

  5. ceisum_加载倾斜摄影模型

    osgb转换为3Dtiles格式(使用工具转换) 然后加载到cesium中(加载代码见下,可以控制模型高度) var offset = function(height,tileset) { conso ...

  6. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  7. cesium初探之加载三维模型

    项目需要用到二三维地图切换,本来准备研究ArcGIS js for Web 3d,但考虑到版权的问题,决定试着用cesium来做,于是花了2天时间抱着试试看的心态把cesium从环境配置到加载三维模型 ...

  8. Cesium for Unreal加载倾斜摄影

    本文介绍UE4中通过Cesium插架加载本地倾斜摄影模型.Cesium for Unreal插件运行在UE环境何总运行Cesium,这样方便做一个GIS应用. 安装Cesium for Unreal插 ...

  9. 6_1 持久化模型与再次加载_探讨(1)_三种持久化模型加载方式以及import_meta_graph方式加载持久化模型会存在的变量管理命名混淆的问题

    笔者提交到gitHub上的问题描述地址是:https://github.com/tensorflow/tensorflow/issues/20140 三种持久化模型加载方式的一个小结论 加载持久化模型 ...

  10. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

随机推荐

  1. #树状数组，dp#洛谷 3506 [POI2010]MOT-Monotonicity 2

    题目 给出\(N\)个正整数\(a[1..N]\),再给出\(K\)个关系符号(>.<或=)\(s[1..k]\). 选出一个长度为\(L\)的子序列(不要求连续),要求这个子序列的第\( ...

  2. #SG函数#HDU 1848 Fibonacci again and again

    题目 分析 可取状态只能是斐波那契数,求出SG函数 然后判断三个数sg函数异或和不为0先手必胜 代码 #include <cstdio> #include <cctype> # ...

  3. C# 布尔值和条件语句：入门指南和实用示例

    C# 布尔值 在编程中,通常需要一个只能有两个值之一的数据类型,比如: 是 / 否 开 / 关 真 / 假 为此,C# 有一个 bool 数据类型,可以取 true 或 false 的值. 布尔值 使 ...

  4. SpringBoot使用@Value注入静态属性

    说明:SpringBoot中使用yml文件配置自定义属性,读取配置文件属性注入到实体类中,属性值都为静态属性 配置文件:yml #用户信息 userMag: userName: "王小波&q ...

  5. 华为Push用户增长服务：精准触达，加速增长

    速戳了解华为Push用户增长服务:通过精细化运营,助力开发者高效实现用户增长,提升用户活跃度和粘性! 合作咨询请点此链接 了解更多详情>> 访问华为开发者联盟官网 获取开发指导文档 华为移 ...

  6. openGauss中如何管理表空间

    openGauss 中如何管理表空间 在 openGauss 中,表空间是一个目录,在物理数据和逻辑数据间提供了抽象的一层,为所有的数据库对象分配存储空间,里面存储的是它所包含的数据库的各种物理文件. ...

  7. 知识图谱增强的KG-RAG框架

    昨天我们聊到KG在RAG中如何发挥作用,今天我们来看一个具体的例子. 我们找到一篇论文: https://arxiv.org/abs/2311.17330 ,论文的研究人员开发了一种名为知识图谱增强的 ...

  8. .NET 9 预览版 3 发布

    我们很高兴地宣布发布 .NET 9 预览版 3,其中包含 .NET 库.运行时和 SDK 的新功能和改进.此预览版带来了旨在提高性能.提高开发人员工作效率以及向 .NET 生态系统引入新功能的增强功能 ...

  9. react native 如何用vs code 进行调试

    前言 以前做react-native 写的文章,在此分享一下. 在react-native 中有两种方式调试,一种是crome 调试,一种是本地调试,接下来介绍的是本地调试. 解决方案 在vs cod ...

  10. 牛客网-SQL专项训练23

    ①假设创建新用户nkw,现在想对于任何IP的连接,仅拥有user数据库里面的select和insert权限,则列表语句中能够实现这一要求的语句是(B) 解析: 考察知识点-数据库授权命令: GRANT ...