前言

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

内容概览

1.基于cesium 实现 3d-tiles 平移旋转贴地
2.源代码 demo 下载

本篇实现 3d-tiles 平移旋转贴地,效果图如下:

实现思路:核心就是根据旋转、平移矩阵相乘来改变调整 3d-tiles 模型,利用 cesium 函数 Cesium.Matrix3.fromRotationX、Cesium.Matrix3.fromRotationY、Cesium.Matrix3.fromRotationZ、Cesium.Matrix4.fromRotationTranslation、Cesium.Matrix4.multiply等等

  • 界面滑条动态调整模型位置:
  • var buttonx1 = document.getElementById('buttonx-');
  • var buttonx2 = document.getElementById('buttonx+');
  • var buttonx3 = document.getElementById('buttony-');
  • var buttonx4 = document.getElementById('buttony+');
  • var sliderx = document.getElementById('slider-x');
  • var sliderValuex = document.getElementById('slider-value-x');
  • var slidery = document.getElementById('slider-y');
  • var sliderValuey = document.getElementById('slider-value-y');
  • var sliderHeight = document.getElementById('slider-Height');
  • var sliderValueHeight = document.getElementById('slider-value-Height');
  • var sliderRotateX = document.getElementById('slider-RotateX');
  • var sliderValueRotateX = document.getElementById('slider-value-RotateX');
  • var sliderRotateY = document.getElementById('slider-RotateY');
  • var sliderValueRotateY = document.getElementById('slider-value-RotateY');
  • var sliderRotateZ = document.getElementById('slider-RotateZ');
  • var sliderValueRotateZ = document.getElementById('slider-value-RotateZ');
  • window.onload = function (){
  • buttonx1.addEventListener('click', function(e) {
  • params.tx = params.tx - 0.0001;
  • if (isNaN(params.tx)) {
  • return;
  • }
  • sliderValuex.textContent = params.tx;
  • update3dtilesMaxtrix(tileset);
  • });
  • buttonx2.addEventListener('click', function(e) {
  • params.tx = params.tx + 0.0001;
  • if (isNaN(params.tx)) {
  • return;
  • }
  • sliderValuex.textContent = params.tx;
  • update3dtilesMaxtrix(tileset);
  • });
  • sliderx.addEventListener('input', function(e) {
  • sliderValuex.textContent = e.target.value;
  • params.tx = Number(e.target.value);
  • if (isNaN(params.tx)) {
  • return;
  • }
  • update3dtilesMaxtrix(tileset);
  • });
  •  
  • buttonx3.addEventListener('click', function(e) {
  • params.ty = params.ty - 0.0001;
  • if (isNaN(params.ty)) {
  • return;
  • }
  • sliderValuey.textContent = params.ty;
  • update3dtilesMaxtrix(tileset);
  • });
  • buttonx4.addEventListener('click', function(e) {
  • params.ty = params.ty + 0.0001;
  • if (isNaN(params.ty)) {
  • return;
  • }
  • sliderValuey.textContent = params.ty;
  • update3dtilesMaxtrix(tileset);
  • });
  • slidery.addEventListener('input', function(e) {
  • sliderValuey.textContent = e.target.value;
  • params.ty = Number(e.target.value);
  • if (isNaN(params.ty)) {
  • return;
  • }
  • update3dtilesMaxtrix(tileset);
  • });
  •  
  • sliderHeight.addEventListener('input', function(e) {
  • sliderValueHeight.textContent = e.target.value;
  • params.tz = Number(e.target.value);
  • if (isNaN(params.tz)) {
  • return;
  • }
  • update3dtilesMaxtrix(tileset);
  • });
  •  
  • sliderRotateX.addEventListener('input', function(e) {
  • sliderValueRotateX.textContent = e.target.value;
  • params.rx = Number(e.target.value);
  • if (isNaN(params.rx)) {
  • return;
  • }
  • update3dtilesMaxtrix(tileset);
  • });
  •  
  • sliderRotateY.addEventListener('input', function(e) {
  • sliderValueRotateY.textContent = e.target.value;
  • params.ry = Number(e.target.value);
  • if (isNaN(params.ry)) {
  • return;
  • }
  • update3dtilesMaxtrix(tileset);
  • });
  •  
  • sliderRotateZ.addEventListener('input', function(e) {
  • sliderValueRotateZ.textContent = e.target.value;
  • params.rz = Number(e.target.value);
  • if (isNaN(params.rz)) {
  • return;
  • }
  • update3dtilesMaxtrix(tileset);
  • });
  • }
  • 核心函数:

更多详情见下面链接文章

GIS之家小专栏此文章

文章提供源码,对本专栏感兴趣的话,可以关注一波

cesium 实现 3d-tiles 平移旋转贴地(附源码下载)的更多相关文章

  1. Cesium专栏-空间分析之坡度分析(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  2. Cesium专栏-空间分析之地形等高线(附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  3. cesium 之地图切换展示效果篇(附源码下载)

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

  4. cesium 之加载地形图 Terrain 篇(附源码下载)

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

  5. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. Cesium专栏-雷达遮罩动态扫描(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  7. Cesium专栏-地形开挖2-任意多边形开挖(附源码下载)

    “任意多边形地形开挖” 是“地形开挖”的补充篇,在这节里,我们介绍关于如何使用任意多边形对地形进行开挖,同时,由于有不少小伙伴也咨询了关于“地形开挖”篇后序内容中的填充地形的效果,之前没放出来,是想让 ...

  8. cesium 实现风场图效果(附源码下载)

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

  9. Cesium专栏-填挖方分析(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

随机推荐

  1. [HTML] 学HTML写的第一第二个网页

    ①第一个网页 <h2>英雄联盟(电子竞技类游戏)</h2> <p><b>(英雄联盟)</b>(简称lol)是由美国<i>Roit ...

  2. ubuntu 18 怎样对Windows进行远程桌面控制

    ubuntu 18 怎样对Windows进行远程桌面控制: 1. 先安装一个redesktop 工具(sudo apt-get install redesktop) 2. 在通过 redesktop ...

  3. 在代码生成工具Database2Sharp中使用ODP.NET(Oracle.ManagedDataAccess.dll)访问Oracle数据库,实现免安装Oracle客户端,兼容32位64位Oracle驱动

    由于我们开发的辅助工具Database2Sharp需要支持多种数据库,虽然我们一般使用SQLServer来开发应用较多,但是Oracle等其他数据库也是常用的数据库之一,因此也是支持使用Oracle等 ...

  4. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  5. openresty(nginx)中使用lua脚本获取请求IP地址的代码

    人狠话不多,直接上代码:------------------------------------------------------------------------------------- lo ...

  6. oracle日期时间范围查询

    Oracle的日期时间范围查询 字段为:字符串类型(char),长度为:10 SELECT * FROM testdatetime t WHERE = AND t.createdate >= ' ...

  7. SQL Server Management Studio 安装流程

    数据库的操作需要使用SQL Server Management Studio,不过也可以使用其他的: 下面是安装操作的步骤:如果你下载的压缩包,你需要先解压到一个文件夹里,然后双击setup.exe, ...

  8. mac安装配置Tomcat

    一.安装Tomcat 1.首先到官网下载Tomcat:https://tomcat.apache.org/download-90.cgi 2.解压tomcat文件,最好把它文件名重命名为"T ...

  9. PHP数组具有的特性有哪些

    PHP 的数组是一种非常强大灵活的数据类型.以下是PHP数组具有的一些特性: 1.可以使用数字或字符串作为数组键值 1 $arr = [1 => 'ok', 'one' => 'hello ...

  10. 做为GPU服务器管理员,当其他用户需要执行某个要root权限的命令时,除了告诉他们root密码,还有没有别的办法?

    通常一台GPU服务器(这里指linux系统)不可能只有一个帐号能用的,比如当其他用户想要在GPU服务器上安装一些软件的时候,会需要用到apt-get命令,但是apt-get命令需要root用户的操作权 ...