Cesium的使用

Cesium的使用

学习三维已经有段时间了，今天让我们来讲下三维中的Cesium这个开源的使用。

Cesium是国外一个基于JavaScript编写的使用WebGL的地球引擎；其实他就是一个地球可视化框架；

Cesium是开源的，Cesium是一个跨平台、跨浏览器的展示三维地球的javascript库

使用时不需要任何插件支持，但是浏览器必须支持WebGL（网页上绘制和渲染复杂三维图形（3D图形））。本文参考与Cesium官网。

Cesium是纯前端的代码，我们在使用Cesium的时候，只需要把插件引用进来就可以使用了。官网：https://cesium.com/cesiumjs/中文网：http://cesium.coinidea.com/site/download.html  这两个是关于Cesium的网站。

 

在学习Cesium的同时，我们也要关注它自带的组件。

Geocoder : 一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。

HomeButton : 首页位置，点击之后将视图跳转到默认视角。

SceneModePicker : 切换2D、3D 和 Columbus View (CV) 模式。

BaseLayerPicker : 选择三维数字地球的底图（imagery and terrain）。

NavigationHelpButton : 帮助提示，如何操作数字地球。

Animation :控制视窗动画的播放速度。

CreditsDisplay : 展示商标版权和数据源。

Timeline : 展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。

FullscreenButton : 视察全屏按钮。

 

那么，我们应该怎么添加地图进来呢？首先，要定义初始化变量，接着获取场景，最后把模型数据添加到地球场景里面。

var viewer, scene; //初始地图参数

    var tileset; //调整模型所需tileset对象

    // 初始化三维地球

    viewer = new Cesium.Viewer("cesiumContainer", {

    //全屏按钮

    homeButton: false, //主页按钮

    orderIndependentTranslucency: false,

    contextOptions: { webgl: { alpha: true, } } });

    // 获取场景

    scene = viewer.scene;

        viewer.bottomContainer.style.display = "none"; //隐藏窗口底部区域的DOM元素

    //加载模型数据,并添加到三地球场景里面

    var url = "./data/tileset.json";

    tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

    url: url,

    maximumScreenSpaceError: 2,

    maximumNumberOfLoadedTiles: 1000 // 最大加载瓦片个数

    }));

    //加载模型完成执行

    tileset.readyPromise.then(function(tileset) {

    changeHeight(0);

    viewer.zoomTo(tileset);

    }).otherwise(function(error) {

    throw (error);

    });

//直接调用函数，调整高度,height表示物体离地面的高度

function changeHeight(height) {

 height = Number(height);

if (isNaN(height)) {

return;}

var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);

var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);

var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);

var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());

tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);}