cesiumjs详细教程（cesium开发教程）

发布时间：2023-12-08

cesiumjs详细教程（cesium开发教程）

更新：2022-11-10 19:11

本文目录一览：

  1. Cesium在js中调用entity的infobox单机事件
  2. Cesium初始化选项
  3. Cesium随笔：视锥绘制（上）
  4. cesium如何搭建dat.gui
  5. Cesium实战项目
  6. [cesium 怎样设置web服务器](#cesium 怎样设置web服务器)

Cesium在js中调用entity的infobox单机事件

第步创建静态页面von.html并引入vue.js关键核js文件第二步主题元素插入div标签元素并其插入input输入框按钮利用v-on指令绑定点击事件queryDate第三步div标签编写vue.js点击事件事件获取前期第四步让输入框按钮间距设置body元素第五步预览该静态

Cesium初始化选项

基于cesium开发地图时用到的组件是：new Cesium.Viewer(container, options)，container为地图在页面中放置位置的id，options是初始化设置的选项，包括是否显示homeButton，动画组件，时间轴以及底图等。具体开发过程中用到的选项可参考官方api。 常用的选项如下：

Cesium随笔：视锥绘制（上）

第一篇CesiumJS技术日记，不管技术难不难，认真归纳是个好习惯。本文绕弯太多，要直接绘制视锥的请移步 这里。 最近在研究视域分析，思路：使用ShadowMap.js接口开放的阴影绘制功能，指定点光源的相关参数。然而在调试的过程中发现并没有那么简单，生成ShadowMap对象时会抛出无法在参数中找到Context对象的异常，这个Context对象在Api文档中并没有提及，这个问题在 这里 提及，Cozzi说不支持，索性视域分析就放一放，先将视锥绘制出来。这里只说关键的地方，primitive的加载、鼠标事件等过程就不多说了。

方案1

确定摄像机位置 → 确定摄像机方向 → 生成新相机实体 → 使用lookAt(target,offset)设置相机位置姿态 → 获取相机视锥 → 绘制视锥，该方案应该是标准方法，但是调试过程中绘制的视锥总是出现在地心处，多次尝试无果（和下漫画如出一辙）： 切忌钻牛角尖，尝试方案2：

方案2

确定相机位置 → 确定摄像机方向 → 生成视锥几何体 → 计算视锥俯仰角度 → 计算视锥航向角度 → 绘制视锥。方案2相对于前者的难点在于相机姿态的计算，原本使用myCamera.lookAt(target,offset)可以直接计算出视锥的姿态，无奈该方法绘制出错，现在只能自己算了（笔者没有找到根据两点计算姿态的函数）。 视锥的形态和初始姿态（yaw-0,pitch-0）如下图。 视锥构造参数如下：

  • frustum: 视锥本体，下面详细说明
  • origin: 轴心，就是那个尖的位置
  • orientation: 决定相机看的方向，后面再详细说明
  • vertexFormat: 该参数和视锥绘制没有关系，保持默认即可 我们选用PerspectiveFrustum，如下是官方doc的构造函数参数。
  • near和far参数作用如下图，其中虚线是辅助线，不属于绘制的视锥几何体。
  • fov: 查看的视场角，绕z轴旋转，以弧度方式输入。
  • aspectRatio: 垂直边和水平边的比值，如下图的aspectRatio为n。 far、near、fov、aspectRatio四个参数确定了便可以确定视锥的形状。 在程序启动之后的第一件事是通过鼠标选取两个点：起点和瞄准的点，通过这两个点来计算出视锥的姿态，如下图from点便是视锥的origin，这里我们只关心航向（yaw/heading）和俯仰（pitch）两个参数，不关心横滚（roll），我们希望计算出来的航向角和俯仰角通过如下图的这种方式来表示相机瞄准的方位，下图中粉色线是视锥所表示相机所发射的射线。即航向角和俯仰角为0时射线指向x轴方向，航向角增加射线绕着z轴顺时针转动，俯仰角增加射线绕着y轴转动。 计算出的姿态换算成四元素（Quaternion），用作视锥的orientation参数。 不过视锥初始化状态发射的射线（表示的相机所发射）并不是指向x轴方向，而是指向z方向，且航向沿着x的反方向，将视锥航向角-180°，俯仰角-90°，便是视锥理想的初始姿态。 Cesium中的经纬度坐标系和笛卡尔坐标系该选谁呢？上文中提到的姿态所参考的xyz轴是以椭球地表为参考的（x指向正东，y指向正北，z垂直于地面向上），因此选择经纬度更为直观，但是只限于短距离的计算。

俯仰角计算

先计算绝对值： 再根据h的正负判断俯仰角的正负值（仰为正，俯为负）。

航向角计算

先计算第一象限的值： 现在判断To点的位置，结合之前视锥的初始姿态，计算出最终的航向弧度。

  • case 区域1：
  • case 区域2：
  • case 区域3：无需操作
  • case 区域4： 当然，这种方法仅仅适用于短距离和靠近赤道的地区，对于笔者的用途足够了。 其实并不推荐这样的方法来计算视锥（不过好歹笔者调试了半天才试出来，也记录一下），后面将叙述推荐的方法。

cesium如何搭建dat.gui

先引入dat.gui.min.js（压缩版）

<script src="js/dat.gui.min.js"></script>

在js中初始化配置

var viewModel = {
    emissionRate: 5.0,
    gravity: 0.0,
    miniParticleLife: 1.0,
    maxiParticleLife: 1.0,
    fly: true
}
window.onload = function() {
    gui = new dat.GUI();
    gui.add(viewModel, 'emissionRate', 0, 100);
    gui.add(viewModel, 'particleSize', 2, 60);
    gui.add(viewModel, 'miniParticleLife', 0.1, 29.1);
    gui.add(viewModel, 'maxiParticleLife', 0.1, 29.1);
    // 复选框按钮
    gui.add(viewModel, 'fly');
}

当数值变化时赋值给对象属性onchange事件会在域的内容改变时发生

window.onload = function() {
    var gui = new dat.GUI();
    gui.add(viewModel, 'emissionRate', 0, 100).onChange(function(val) {
        // 操作
        _this.particleSystem.emissionRate = parseFloat(val);
    });
    gui.add(viewModel, 'particleSize', 2, 60).onChange(function(val) {
        _this.particleSystem.particleSize = parseFloat(val);
    });
    gui.add(viewModel, 'miniParticleLife', 0.1, 29.1).onChange(function(val) {
        _this.particleSystem.miniParticleLife = parseFloat(val);
    });
    gui.add(viewModel, 'maxiParticleLife', 0.1, 29.1).onChange(function(val) {
        _this.particleSystem.maxiParticleLife = parseFloat(val);
    });
}

这里就可以完成了。

Cesium实战项目

本人所学GIS专业，毕业后一直从事Cesium相关的GIS开发工作，在业余时间将Cesium中常用的一些功能进行封装，形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目，紧贴业务特性，实用性强，能够在最大程度上帮助个人、团队、公司、企业提高工作效率，节省开发成本。 Cesium实战项目目前共111个实例（后面会继续增加），项目基于Cesium1.7.2+VUE 实现，现有实例如下：

基础底图

  1. ArcGIS在线底图
  2. 谷歌在线底图
  3. 高德在线底图
  4. 天地图在线底图
  5. 本地单张图片

点状对象

  1. Cesium点聚合1
  2. Cesium点聚合2
  3. Billboard加载Gif图片
  4. Cesium 闪烁点
  5. Primitives加载大量图标点
  6. div文本点
  7. 动态效果点
  8. 图标点+文字(primitive方式)

单体化

  1. 倾斜模型分栋单体化（基于geoserver）
  2. 倾斜模型分层单体化（基于geoserver）含教程
  3. 倾斜模型分户单体化（基于geoserver）含教程

编辑绘制

  1. 点线面绘制
  2. 点线面编辑
  3. 点线面绘制扩展
  4. 点线面编辑扩展

自定义信息框

  1. 多字段自适应信息框
  2. 气泡窗口样式1
  3. 气泡窗口样式2

标注标绘

  1. 自定义html标注图层
  2. 军事标绘
  3. 军事标绘编辑
  4. gltf 标绘绘制
  5. gltf 标绘编辑
  6. 行政区标注
  7. 体对象绘制编辑

轨迹漫游

  1. 轨迹回放
  2. 跟随视角漫游
  3. 第一人称漫游
  4. 上帝视角漫游

分析

  1. Cesium 2维点转3维点
  2. Cesium 空间线段等分
  3. 地表透明（地下模式）
  4. 通视分析
  5. 可视域分析
  6. 缓冲区分析
  7. 地表开挖（材质贴图）
  8. 地形开挖（材质贴图）
  9. 模型裁剪（Planes）
  10. 矿区岩层效果
  11. 双屏对比
  12. 二三维联动（基于openlayers）

场景

  1. 场景出图（导出图片）
  2. 自定义天空盒
  3. 位置信息状态栏控件
  4. 雨雪雾天气效果
  5. 限定视角范围
  6. 绘制反选遮罩
  7. 自定义空间背景
  8. 宏观数字地球
  9. 鹰眼地图（基于openlayers）
  10. 导航控件
  11. 云层
  12. Tooltip鼠标移入信息
  13. 书签管理
  14. 旋转的地球
  15. 绕点旋转
  16. 场景泛光

工具

  1. 场景测量工具
  2. 鼠标位置拾取工具

特效

  1. 动态线、流动线
  2. 流向动态线
  3. 动态水面效果
  4. 动态扩散圆
  5. 动态立体墙
  6. 粒子系统
  7. 圆形波纹效果
  8. 矢量白膜自定义shader（不改源码）
  9. 光晕线
  10. 动态立体墙（升级）
  11. 圆形、规则多边形动态围墙
  12. 围墙扩散动画
  13. 光柱椎体
  14. 数字工厂
  15. 六边形扩散扫描
  16. 圆形扩散扫描
  17. 模型热力图
  18. 动态传输线
  19. 扫描线

行业应用

  1. 雷达扫描效果
  2. 雷达追踪圆锥体
  3. 雷达追踪四棱锥体
  4. 雷达遮罩扫描
  5. 相控阵雷达范围
  6. 雷达放射波
  7. 卫星视椎体（四棱锥体）
  8. 视频贴图参数调整
  9. 视频融合
  10. 目标跟踪
  11. 动态目标检测
  12. 视频窗口（普通视频）
  13. 视频窗口（rtmp视频）
  14. 视频墙（含编辑）
  15. 动态水域
  16. 水闸放水效果

Echarts可视化支持

  1. Echarts 迁徙图1
  2. Echarts 迁徙图2
  3. Echarts 散点图
  4. Echarts 流入线
  5. Echarts 流出线

MapV可视化支持

  1. MapV 迁徙图
  2. MapV 大迁徙图
  3. MapV 热力图
  4. MapV 强边界图

其他

  1. 3dtiles高度调整
  2. 文字贴图
  3. 热力图（基于heatmap.js插件）
    在线预览地址 在线预览地址 用户名cesium 密码cesium@sz

cesium 怎样设置web服务器

  1. 安装node.js 双击运行安装包，安装路径可以自定义，或者默认都可以，安装完成后，打开命令行，输入node -v，如果结果为版本号，表明安装成功。如下图所示。 如果结果为版本号，表明安装成功
  2. 开启电脑自带的IIS服务
    • 打开控制面板（直接搜索即可）
    • 点击程序
    • 选择 启用或关闭Windows功能
    • 在对话框中根据自己需求选择功能，不知道怎么选择可以全选，来防止因为忘记选择某一个功能而报错！ 等待下载完成，进度条走完就行了。到此，IIS已开启。
  3. 配置cesium到IIS
    • 右击 此电脑，选择管理
    • 按照下图，依次展开，然后在网站上右键，选择添加网站
    • 在这个框中设定网站名称，在物理路径处，选择cesium的安装路径即可。选择一个IP地址即可，选择自己所连wifi的某个地址就行。然后确定即可。配置完成。 在浏览器中输入自己刚配置的IP地址，弹出cesium的页面，就说明环境搭建完成。
推荐文章