直接上示例代码：

<!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. HTML实现发送接收串口和TCP数据

    前提 请安装通讯调试工具,所有的网页必须运行在本工具上,在其他浏览器直接打开是不行的. 效果显示 在网页上右键打开,选择其他应用 2.在其他应用中找到通讯调试工具 如果没有这一项,点更多,在计算机中查 ...

  2. #范德蒙德卷积，第二类斯特林数，NTT#洛谷 2791 幼儿园篮球题

    题目 \(T(T\leq 200)\)组数据求 \[\frac{1}{C(n,k)}\sum_{i=0}^kC(m,i)C(n-m,k-i)i^L \] 对于所有数据满足 \(n,m,k\leq 2* ...

  3. JDK11的新特性:新的HTTP API

    目录 简介 使用HTTP Client请求的基本流程 创建HTTP Client 创建HTTP Request 发送HTTP请求 异步HTTP请求 总结 JDK11的新特性:新的HTTP API 简介 ...

  4. OpenHarmony轻量系统中内核资源主要管理方式

    一.背景 OpenAtom OpenHarmony(以下简称"OpenHarmony")轻量系统面向MCU类处理器例如ARM Cortex-M.RISC-V 32位的设备,硬件资源 ...

  5. 本周四晚19：00知识赋能第六期第5课丨OpenHarmony WiFi子系统

    OpenAtom OpenHarmony(以下简称"OpenHarmony")开源开发者成长计划项目自 2021 年 10 月 24 日上线以来,在开发者中引发高度关注. 成长计划 ...

  6. Tomcat启动闪退的10个解决小技巧

    引言 大家好!在我们日常开发中,使用Tomcat作为Web服务器是相当常见的. 然而,遇到Tomcat启动后立即闪退的问题也不是什么稀罕事. 这种情况可能会让人感到困惑和沮丧,特别是当你急需完成一个项 ...

  7. AI数字人克隆人直播源码独立部署的应用!

    AI虚拟数字人正在从概念性试验品逐步落地到实际应用场景,特别是在电商直播领域,AI数字人虚拟主播应用可以说是大放异彩,目前,以真人形象为基础的数字人主播,不受场地.真人.布景.灯光.直播设备的限制,相 ...

  8. uniapp小程序页面实现元素与胶囊进行居中对齐

    无论是否为uni,关键在于获取胶囊中点的位置,如果是原生小程序根据小程序文档获取,其余逻辑处理是一致的 代码语法都只是技术选择,重点是逻辑处理,对于技术的运用,代码技术好比是积木,好的程序就是好的组合 ...

  9. eclipse tomcat的一些错误

    eclipse tomcat运行错误 错误提示: Server Tomcat v7.0 Server at localhost was unable to start within 45 second ...

  10. 单元测试必备：Asp.Net Core代码覆盖率实战，打造可靠应用 !

    引言 在前几章我们深度讲解了单元测试和集成测试的基础知识,这一章我们来讲解一下代码覆盖率,代码覆盖率是单元测试运行的度量值,覆盖率通常以百分比表示,用于衡量代码被测试覆盖的程度,帮助开发人员评估测试用 ...