示例完整代码如下：

<!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; //对大气和雾启用动态照明效果

          //加载小模型

          add3DEntityModel("https://data.mars3d.cn/gltf/mars/feiji.glb",120.131292,30.471157,0,-17,0,0);

          // 将三维球定位到模型

          viewer.camera.flyTo({

              destination: Cesium.Cartesian3.fromDegrees(120.132072,30.471217, 2000),

              orientation: {

                  heading :  Cesium.Math.toRadians(348.4202942851978),

                  pitch : Cesium.Math.toRadians(-89.74026687972041),

                  roll : Cesium.Math.toRadians(0)

              },

              complete:function callback() {

                  // 定位完成之后的回调函数

              }

          });

   }

   function add3DEntityModel(uri,longitude,latitude,height,v_heading,v_pitch,v_roll) {

       viewer.entities.removeAll();

       //位置（弧度单位）

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

       var heading = Cesium.Math.toRadians(v_heading);

       var pitch = Cesium.Math.toRadians(v_pitch);

       var roll = Cesium.Math.toRadians(v_roll);

       var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

       //朝向（弧度单位）

       var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

       var entity = viewer.entities.add({

           name : uri,

           description:"<div><p>这是一个飞机！</div>", // 这是模型的描述属性，可以是html标签

           position : position,

           orientation : orientation,

           model : {

               uri : uri,

               minimumPixelSize : 128,

               maximumScale : 20000

           }

       });

    //取或设置相机当前正在跟踪的Entity实例。

       //viewer.trackedEntity = entity;

       }

</script>

</body>

</html>

几个参数说明：

//destination是相机的目标位置，参数是经度、纬度、高度

//orientation是相机朝向

//    heading-代表镜头左右方向,正值为右,负值为左

//    pitch-代表镜头上下方向,正值为上,负值为下.

//    roll-代表镜头左右倾斜,正值,向右倾斜,负值向左倾斜

heading-代表镜头左右方向,正值为右,负值为左,360度和0度是一样的
pitch-代表镜头上下方向,正值为上,负值为下.
roll-代表镜头左右倾斜.正值,向右倾斜,负值向左倾斜

cesium教程4-用entity加载glb和gltf格式的小模型的更多相关文章

  1. esri-leaflet入门教程（4）-加载各类图层

    esri-leaflet入门教程(4)-加载各类图层 by 李远祥 在leaflet中图层一般分为底图(Basemap)和叠加图层(Overlay).前面章节已经介绍过底图其实也是实现了TileLay ...

  2. Sql server 数据库的备份和还原数据库提示“ 加载的介质已格式化为支持 1 个介质簇，但根据指定的备份设备，应支持 2 个介质簇”

     数据库备份和还原总结 在 "M:\2017-Pro\company\other\databak_2014-10\anquanbaowei_db_201704300200.BAK" ...

  3. Entity Framework入门教程（8)---预先加载、延迟加载、显示加载

    1.预先加载 预先加载:在对一种类型的实体进行查询时,将相关的实体作为查询的一部分一起加载.预先加载可以使用Include()方法实现. 1.加载一个相关实体类型 栗子:使用Include()方法从数 ...

  4. node-webkit教程(15)当图片加载失败的时候

    在node-webkit教程(14)禁用缓存中,简单讲了当前禁用缓存的几种方法. 在实际开发过程中,我遇到了一个因为缓存引起的诡异的问题.应用场景如下: 在一个编辑器里,不停的向画布上添加svg或者其 ...

  5. Cesium如何通过addImageryProvider方法加载SkylineGlobe Server发布的WMS服务

    某某某单位用SkylineGlobeServer7版本发布了好些服务,然后让我们在Cesium里都加载进来展示. 其实只要符合OGC标准的,加进来还是很容易的. 示例代码如下: function te ...

  6. Cesium随笔（2）加载天地图地图服务【转】

    Cesium自带的图层是bing地图和esri,mapbox等图层,木有中文注记,想加载中文注记的图层?废话不说,上代码: var viewer = new Cesium.Viewer('cesium ...

  7. WebGL简易教程(十五)：加载gltf模型

    目录 1. 概述 2. 实例 2.1. 数据 2.2. 程序 2.2.1. 文件读取 2.2.2. glTF格式解析 2.2.3. 初始化顶点缓冲区 2.2.4. 其他 3. 结果 4. 参考 5. ...

  8. 【PHP面向对象(OOP)编程入门教程】23.自动加载类 __autoload()函数

    很多开发者写面向对象的应用程序时,对每个类的定义建立一个 PHP 源文件.一个很大的烦恼是不得不在每个脚本(每个类一个文件)开头写一个长长的包含文件的列表. 在软件开发的系统中,不可能把所有的类都写在 ...

  9. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  10. cocos2d-x游戏开发系列教程-坦克大战游戏加载地图的编写

    上节课写了关卡选择场景,那么接下来写关卡内容,先写最基本的地图的加载 我们新建一个场景类,如下所示: class CityScene : public cocos2d::CCLayer { publi ...

随机推荐

  1. #模型转换，动态规划#洛谷 1758 [NOI2009] 管道取珠

    题目 分析 考虑每种情况的方案数平方之和,可以被转换成有两个人同时独立进行该游戏,问最后情况相同的方案数. 那么设 \(dp[i][j][k][o]\) 表示第一个人在上管道拿了 \(i\) 个,下管 ...

  2. 报名启动｜OpenHarmony源码转换器—多线程特性转换赛题

  3. OpenHarmony自定义组件介绍

      一.创建自定义组件 在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件.在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑 ...

  4. [HAOI2007,P2216,BZOJ1047]理想的正方形单调队列解法

    题目描述 有一个 \(a \times b\) 的整数组成的矩阵,现请你从中找出一个 \(n \times n\) 的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入格式 第一行为 \( ...

  5. 【Kotlin】扩展属性、扩展函数

    1 类的扩展 ​ Kotlin 提供了扩展类或接口的操作,而无需通过类继承或使用装饰器等设计模式,来为某个类添加一些额外的属性或函数,我们只需要通过一个被称为扩展的特殊声明来完成.通过这种机制,我们可 ...

  6. Android 开发入门（3）

    0x05 活动 Activity (1)启停活动页面 a. 启动和结束 从当前页面跳转至新页面 startActivity(new Intent(this, [targetPage].class)) ...

  7. 力扣77(Java)-组合（中等）

    题目: 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合. 你可以按 任何顺序 返回答案. 示例 1: 输入:n = 4, k = 2输出:[ [2,4], [3,4], ...

  8. 力扣27(java&python)-移除元素（简单）

    题目: 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入 ...

  9. PolarDB助力易仓打造跨境行业生态链协同的产业链SaaS

    简介: 2022年7月,易仓ECCANG WMS东南亚版正式上线!经过9年快速发展,易仓已经成为一家跨境全生态综合服务商,也见证了跨境行业从起步到万亿级的增长.而PolarDB作为面向下一代云原生关系 ...

  10. 阿里云原生应用安全防护实践与 OpenKruise 的新领域

    简介: 得益于 Kubernetes 面向终态的理念,云原生架构天然具备高度自动化的能力.然而,面向终态的自动化是一把"双刃剑",它既为应用带来了声明式的部署能力,同时也潜在地会将 ...