ceisum初始化

Cesium 是什么

3D geospatial visualization for the web。Cesium是 web端地理信息3d可视化 的JS库。得益于V8引擎的优化升级，个人计算机内存的增加以及图形显卡的发展，使得JS接入3d可视化成为可能。

Cesium支持：

• 支持2D,2.5D,3D 形式的地理（地图）数据展示，
• 可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示
• 可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器。
• 支持基于时间轴的动态流式数据展示

任何Cesium应用程序的基础都是Viewer。Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子）。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可，如下所示：

var viewer = new Cesium.Viewer('cesiumContainer');
1

Cesium的设计理念是用简洁的语法创作出可视化的环绕地球信息。

Cesium环境搭建

Cesium需要浏览器支持WebGL，可以通过CesiumJS官网提供的一个HelloWorld例子来测试自己的浏览器是否支持Cesium。（推荐使用Chrome） 测试地址

最新的release版本代码下载地址

//检测浏览器webgl支持
function webglreport() {
    var exinfo = getExplorerInfo();
    if (exinfo.type == "IE" && exinfo.version < 11) {
        return false;
    }

    try {
        var glContext;
        var canvas = document.createElement('canvas');
        var requestWebgl2 = typeof WebGL2RenderingContext !== 'undefined';
        if (requestWebgl2) {
            glContext = canvas.getContext('webgl2') || canvas.getContext('experimental-webgl2') || undefined;
        }
        if (glContext == null) {
            glContext = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') || undefined;
        }
        if (glContext == null) {
            return false;
        }
    } catch (e) {
        return false;
    }
    return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

或者你也可以在浏览器中运行上述代码查看是否支持webgl

起步

安装

:::tip
假设你已了解关于 webgl和 Cesium 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！之前有其它框架的使用经验会有帮助，但这不是必需的
:::

创建开场动画

 var viewer = new Cesium.Viewer('cesiumContainer');
  viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(105, 27, 30000000), //经度、纬度、高度
            orientation: {
                heading: Cesium.Math.toRadians(0), //绕垂直于地心的轴旋转
                pitch: Cesium.Math.toRadians(-90), //绕纬度线旋转
                roll: Cesium.Math.toRadians(0), //绕经度线旋转
            },
            duration: 0, //动画持续时间
        });
        viewer.clock.multiplier = 50; //速度
        viewer.clock.shouldAnimate = true;
1
2
3
4
5
6
7
8
9
10
11
12

我们通过viewer变量接受WiseMap创建的地图对象,调用camera中的flyTo方法设置开场动画，你也许注意到了camera，可以理解为是一个相机，上面封装了调用3d地图的许多方法，别着急我们一步步来。
通过开场动画的创建，可以观察，改变所创建的地图对象方法都继承在开始viewer上。