当前位置: 首页 > news >正文

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');

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;
}

或者你也可以在浏览器中运行上述代码查看是否支持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;

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

相关文章:

  • 如何使用Tokenview NFT API获取NFT巨鲸
  • 【第二章 SQL-DQL(数据库基础查询和条件查询)】
  • 保安辞职报告格式范文(7篇)
  • 3个自定义防抖Hooks的实现原理
  • Web前端系列技术之Web APIs基础(从基础开始)⑤
  • 子查询及分组查询
  • 使用 Servlet 和 JSP 检查用户是否登录
  • 【C语言】struct结构体保姆级别教学!
  • ASP.NET 错误机制
  • 设计模式 状态模式的由来、状态模式和策略模式的区别
  • 战术网络强化学习环境-基于多智能体的场景生成
  • 现在华为认证的有效期是多久?到期后怎么重考?
  • 第六届“强网杯”全国网络安全挑战赛-青少年专项赛
  • NFT有哪些特性呢
  • VSCode-让开发更快更方便更安全
  • Shell之实现小游戏
  • virtualbox复制vdi
  • 【C语言】static的理解,关键字宏观把握,编写函数计算printf的返回值,switch后面的()里面必须是什么形式?(每日小细节006)
  • 大厂秋招投递结束,校招再无机会拿offer? 应届生应该重点把握秋招还是春招?
  • 基于OXC技术的传送网研究与应用
  • 2022全国车辆工程专业大学排名一览表
  • 2022周口职业技术学院单招学费多少钱一年-各专业收费标准
  • 2022年中原工学院艺术类招生简章
  • 2022浙江经贸职业技术学院学费多少钱一年-各专业收费标准
  • 2022年湖南大学强基计划报名条件-报名时间-报名入口
  • 2020河北工程大学运动训练专业招生简章
  • 2022湖州有哪些民办大学?湖州所有民办大学名单一览表(1所)
  • 2022天津城市建设管理职业技术学院学费多少钱一年-各专业收费标准
  • 2022滁州学院艺术类学费多少钱一年-各专业收费标准
  • 2022云南警官学院学费多少钱一年-各专业收费标准