Cesium代码块段学习

Web框架

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>cesium</title><script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>  <script type="text/javascript" src="../Source/My/ExtendGlobe.js"></script> <style>@import url(../Build/Cesium/Widgets/widgets.css);</style></head><body><div id="cesiumContainer"></div> <script>[后续代码按需编写]</script><script src="../demon/10-1.js"> </script><script src="../demon/10-3.js"> </script><script src="../demon/10-4.js"> </script></body>
</html>

Cesium基础操作

连接Cesium账号的token

Cesium.Ion.defaultAccessToken = 'Your Token';

Web界面的各个控件

//用于构建应用程序的基本小部件。
var viewer = new Cesium.Viewer('cesiumContainer', {//需要进行可视化的数据源的集合animation: false, //是否显示动画控件//shouldAnimate: true,homeButton: false, //是否显示Home按钮fullscreenButton: false, //是否显示全屏按钮baseLayerPicker: false, //是否显示图层选择控件geocoder: false, //是否显示地名查找控件timeline: false, //是否显示时间线控件sceneModePicker: true, //是否显示投影方式控件navigationHelpButton: false, //是否显示帮助信息控件infoBox: false, //是否显示点击要素之后显示的信息requestRenderMode: true, //启用请求渲染模式scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneModefullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处});

获取地球场景及地形

     //获取场景var scene = viewer.scene;//在场景中渲染的地球仪var globe = scene.globe;scene.screenSpaceCameraController.enableCollisionDetection = false;//第一个根据鼠标输入到画布修改摄像机位置和方向；第二个使相机进入地下。//screenSpaceCameraController获取用于摄像机输入处理的控制器;enableCollisionDetection启用或禁用相机对地形的碰撞检测。(默认为true)var extendGlobe = new Cesium.ExtendGlobe(viewer);extendGlobe.terrainTransparent = true; // or false

全球影像中文注记服务

 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg",layer: "tdtAnnoLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",maximumLevel: 13,minimumLevel: 1,show: false}));

飞行定位（运行后最初位置）

 viewer.scene.camera.flyTo({destination: new Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189,10000),orientation: {heading : Cesium.Math.toRadians(20.0), // 方向pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度roll : 0},duration:1});

设置相机位置以及航向角

viewer.scene.camera.setView({                //设置相机的位置，方向和变换。destination: new Cesium.Cartesian3(       //笛卡尔坐标类型。摄像机在WGS84（世界）坐标中的最终位置或从上向下视图中可见的矩形。3827058.651471591,  -256575.7981065622,5078738.238484612),                                           //116.3972282409668, 39.90960456049752orientation: new Cesium.HeadingPitchRoll(       // //目的类型（航向角【从局部北向旋转，其中正角向东增加】、俯仰角【正俯仰角在平面上方。负俯仰角在平面下方】、距中心距离【距本地框架中心的距离】）1.9765540737339418,-0.17352018581162754,0.0030147639151465455),endTransform: Cesium.Matrix4.IDENTITY,        //表示摄像机参考帧的变换矩阵
});

开启地下可见以及地表透明

var viewer = new Cesium.Viewer('cesiumContainer', {//开启或者关闭地下模式setCollisionDetection(enable) {this.viewer.scene.screenSpaceCameraController.enableCollisionDetection = enable},//设置透明度setAlpha(alpha) {this.viewer.scene.globe.translucency.frontFaceAlpha = alpha;},//创建世界地形terrainProvider : Cesium.createWorldTerrain()
});

模型

加载模型

加载gltf模型

entities方式加载gltf模型（01）

 // 添加模型var position=Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189, 0);addFengjiModel(position);function  addFengjiModel(position){var hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(180), 0, 0);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);var color=Cesium.Color.WHITE ;// 添加模型var model = viewer.entities.add({//模型idid:'model',//模型位置position: position,//模型方向orientation: orientation,// 模型资源model: {//  模型路径uri: '../no1/try1/g3.gltf',//  模型最小刻度minimumPixelSize: 128,// 模型最大刻度maximumSize: 128,//   设置模型最大放大大小maximumScale : 200,//   模型是否可见show: true,//  模型轮廓颜色silhouetteColor:Cesium.Color.WHITE,//  模型颜色  ，这里可以设置颜色的变化color: color ,//   仅用于调试，显示魔仙绘制时的线框debugWireframe : false,//   仅用于调试。显示模型绘制时的边界球。debugShowBoundingVolume : false,scale:10,runAnimations:true                //是否运行模型中的动画效果},// 添加描述description: '风机模型'});// 视角切换到模型viewer.trackedEntity = model;}

点击模型会显示模型的注释（这里是风机模型）

entities方式加载gltf模型（02）

var position=Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189, 0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({url : '../no1/try1/g3.gltf',
}));

entities方式加载gltf模型（02）

var entity = viewer.entities.add({  position : Cesium.Cartesian3.fromDegrees(107.767504857,28.8597158189,100),  model : {  uri : '../no1/try1/g3.gltf'  }
});
viewer.trackedEntity = entity;

加载3DTile（json）模型（01）

   var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: '../data/3dtiles/tianjie/tileset.json', //数据地址maximumScreenSpaceError: 2,  //最大的屏幕空间误差maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数modelMatrix: m,//形状矩阵}));

加载3DTile（json）模型（02）

var palaceTileset = new Cesium.Cesium3DTileset({url: '../no1/try1/1/tileset.json',//控制切片视角显示的数量，可调整性能maximumScreenSpaceError: 2,//最大的屏幕空间误差maximumNumberOfLoadedTiles: 100000,//最大加载瓦片个数});viewer.scene.primitives.add(palaceTileset);//场景中添加该模型scene.globe.depthTestAgainstTerrain = true;viewer.zoomTo(palaceTileset);//相机飞至模型上空

加载3DTile（json）模型（03）

模型属性绑定

ViewModel属性设置

var originalColor = Cesium.Color.BLACK;
var originalNearDistance = 1000.0;
var originalFarDistance = 1000000.0;
var originalNearAlpha = 0.0;
var originalFarAlpha = 1.0;var color = originalColor;// The viewModel tracks the state of our mini application.
var viewModel = {enabled: true,nearDistance: originalNearDistance,farDistance: originalFarDistance,nearAlpha: originalNearAlpha,farAlpha: originalFarAlpha,
};Cesium.knockout.track(viewModel);              把对象关联到Cesium这里用的绑定可以参考观察者模式

ViewModel与地形模型绑定且实时更新

// Bind the viewModel to the DOM elements of the UI that call for it.（绑定地形模型，且实时更新）
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);          绑定MV
for (var name in viewModel) {if (viewModel.hasOwnProperty(name)) {         // Object 的原型方法,定义在viewModel对象之上。用来检测一个属性是否是对象的自有属性，是返回trueCesium.knockout.getObservable(viewModel, name).subscribe(update);  //knockout使Cesium球体监听html控件, 从而根据控件的值实时更新一些地图属性.}
}//图层切换
Sandcastle.addToolbarButton("Random color", function () {   //相机移动时，添加按钮更新图层颜色color = Cesium.Color.fromRandom({alpha: 1.0,});update();
});Sandcastle.addToolbarButton("Clear", function () {          //相机移动时，添加按钮清除模型信息，进行更新color = originalColor;viewModel.enabled = true;viewModel.nearDistance = originalNearDistance;viewModel.farDistance = originalFarDistance;viewModel.nearAlpha = originalNearAlpha;viewModel.farAlpha = originalFarAlpha;update();
});function update() {globe.undergroundColor = viewModel.enabled ? color : undefined;      //地下颜色为模型部分是，设置颜色var nearDistance = Number(viewModel.nearDistance);nearDistance = isNaN(nearDistance)? originalNearDistance: nearDistance;var farDistance = Number(viewModel.farDistance);farDistance = isNaN(farDistance)? originalFarDistance : farDistance;if (nearDistance > farDistance) {nearDistance = farDistance;}var nearAlpha = Number(viewModel.nearAlpha);nearAlpha = isNaN(nearAlpha) ? 0.0 : nearAlpha;var farAlpha = Number(viewModel.farAlpha);farAlpha = isNaN(farAlpha) ? 1.0 : farAlpha;globe.undergroundColorAlphaByDistance.near = nearDistance;globe.undergroundColorAlphaByDistance.far = farDistance;globe.undergroundColorAlphaByDistance.nearValue = nearAlpha;globe.undergroundColorAlphaByDistance.farValue = farAlpha;}
update();

模型变换

模型旋转

// 设置模型旋转90度entity.readyPromise.then(function(argument) {var position = Cesium.Cartesian3.fromDegrees(position);var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(90)));Cesium.Matrix4.multiply(mat, rotationX, mat);model.modelMatrix = mat;
})

模型矩阵变换

palaceTileset.readyPromise.then(function(argument) {var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);var mat = Cesium.Transforms.eastNorthUpToFixedFrame(position);    //mat为局部坐标的z轴垂直于地表，局部坐标的y轴指向正北的4x4变换矩阵var rotationX = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(heading)));  //rotationX为旋转加平移的3x3变换矩阵，这里按照弧度转换Cesium.Matrix4.multiply(mat, rotationX, mat);     //生成局部坐标的变换最终矩阵tileset._root.transform = mat;viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1000)});
});

添加JS文件

在网络框架最后添加

               </script><script src="../demon/10-1.js"> </script></body>
</html>

Cesium源码中的基础代码相关推荐

html源码蔡,html基础代码详解
大家好,现在大家已经了解了什么是SEO,怎么学习SEO,也知道什么是域名怎么使用域名了,那么蔡江就给大家分享一下学习SEO需要懂的基础的不能再基础的内容:HTML代码基础的学习了. 一.什么是HTML ...
vue源码中优秀代码片段（一）
一.前言笔者在读Vue源码时, 手记一些源码中优美的代码片段,一起来学习吧二.代码片段 1. makeMap 检测某值是否在字符串(逗号分隔的字符串)中存在, 运用了柯里化函数和缓存函数源码鉴赏 ...
Nacos源码中为什么使用了String.intern方法？
前言面试的时候经常被问到String的intern方法的调用及内存结构发生的变化.但在实际生产中真正用到过了吗,看到过别人如何使用了吗? 最近阅读Nacos的源码,还真看到代码中使用String类的 ...
初学者也能看懂的 Vue2 源码中那些实用的基础工具函数
1. 前言大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 想学源码,极力推荐之前我写的<学习源码整体架构系列>jQuery.underscore.l ...
初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
1. 前言大家好,我是若川.最近组织了源码共读活动.每周读 200 行左右的源码.很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习. 写相对很难的源码,耗 ...
Jquery源码中的Javascript基础知识（三）
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: 1 (function( window, undefined ) { 2 // code 定义变量 3 jQuery ...
android单例模式代码,设计模式(一):Android 源码中的单例模式
设计模式(一):Android 源码中的单例模式 2020-08-17 22:51 阅读数 57 <>什么是单例模式? 单例模式(Singleton) 是最常见也最简单的设计模式,它的目的 ...
OpenCV源码中Haar训练及特征提取的代码说明
//针对大小为winsize的图,计算所有HaarFeature的rect,存入features返回,即获取所有特征坐标 CvIntHaarFeatures* icvCreateIntHaarFeat ...
从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器
1. 前言大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.已进行四个月了,很多小伙伴表示收获颇丰. 想学源码 ...

Cesium源码中的基础代码

Cesium代码块段学习

Web框架

Cesium基础操作

连接Cesium账号的token

Web界面的各个控件

获取地球场景及地形

全球影像中文注记服务

飞行定位（运行后最初位置）

设置相机位置以及航向角

开启地下可见以及地表透明

模型

加载模型

加载gltf模型

entities方式加载gltf模型（01）

entities方式加载gltf模型（02）

entities方式加载gltf模型（02）

加载3DTile（json）模型（01）

加载3DTile（json）模型（02）

加载3DTile（json）模型（03）

模型属性绑定

ViewModel属性设置

ViewModel与地形模型绑定且实时更新

模型变换

模型旋转

模型矩阵变换

添加JS文件

在网络框架最后添加

Cesium源码中的基础代码相关推荐

最新文章

热门文章