直接上示例代码：

<!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. 学会在 C++ 中使用变量：从定义到实践

    C++ 变量 变量是用于存储数据值的容器. 在 C++ 中,有不同类型的变量(使用不同的关键字定义),例如: int - 存储整数(没有小数点),例如 123 或 -123 double - 存储浮点 ...

  2. Pandas选择与索引

    Series和DataFrame对象与Numpy数组和标准Python字典的数据索引和选择模式一样. 字典形式选择和索引 Series In [1]: import pandas as pd In [ ...

  3. szfpga 详细：高云1N1开发板高云gowin软件使用教程

      1.概述 国产FPGA是最近几年起来的产品,具有性价比高特点.高云FPGA,大多用在LED,电机控制,PLC设备上. 高云1N1开发板采用GW1N-LV1QN48C6/I5 FPGA器件.具有低功 ...

  4. flask售后评分系统

    做软件行业的公司,一般都有专业的售前售后团队,还有客服团队,客服处理用户反馈的问题,会形成工单,然后工单会有一大堆工单流程,涉及工单的内部人员,可能会有赔付啥的,当然,这是有专业的售前.售后.客服团队 ...

  5. 实操指南 | Resource Queue如何实现对AnalyticDB PostgreSQL的资源管理？

    简介: 作者:阿里云数据库OLAP产品部 - 子华 一 背景 AnalyticDB PostgreSQL版(简称ADB PG)是阿里云数据库团队基于PostgreSQL内核(简称PG)打造的一款云原生 ...

  6. iOS 端容器之 WKWebView 那些事

    ​简介: 本文主要是关于在端容器设计开发过程中,WKWebView 使用上遇到的一些问题和解决办法​ 作者 | 驽良 来源 | 阿里技术公众号 一  背景 熟悉 iOS\macOS Hybrid 混合 ...

  7. EDA 事件驱动架构与 EventBridge 二三事

    ​简介: 事件驱动型架构 (EDA) 方兴未艾,作为一种 Serverless 化的应用概念对云原生架构具有着深远影响.当我们讨论到一个具体架构时,首当其冲的是它的发展是否具有技术先进性.这里从我们熟 ...

  8. [Docker] 假如宿主机 Nginx 代理到 Docker 的 PHP

    其实没有多少区别,同样 php 镜像启动服务暴露一个端口,nginx 的 proxy_pass 代理过去,唯一要注意的是 nginx 配置的项目路径. nginx 配置的 root 是本地项目路径,给 ...

  9. dotnet 在析构函数调用 ThreadLocal 也许会抛出对方已释放

    我在不自量力做一个数组池,就是为了减少使用 System.Buffers.dll 程序集,然而在数组池里面,所用的 ThreadLocal 类型,在我对象析构函数进行归还数组时,抛出了无法访问已释放对 ...

  10. 开发日志：windows 服务器禁用TLS1.0和TLS1.1协议使网站更安全

    SSL/TLS 的版本 协议 发布时间 状态 SSL 1.0 未公布 未公布 SSL 2.0 1995 年 已于 2011 年弃用 SSL 3.0 1996 年 已于 2015 年弃用 TLS 1.0 ...