cesiumjs壁纸的简单介绍

发布时间：2023-12-08

cesiumjs壁纸的简单介绍

更新：2022-11-09 02:03

本文目录一览：

  1. Cesiumjs可以加载倾斜摄影的OSGB数据吗
  2. cesium上如何绑定地球图片添加点击事件
  3. cesium 和 Three.js有什么区别，以及二者与WebGL 的关系
  4. cesium截图不显示绘制元素

Cesiumjs可以加载倾斜摄影的OSGB数据吗

可以！ 不过不是加载原始的OSGB格式的数据，必须经过转换（OSGB2B3DM.exe），转换后为b3dm格式，是cesium支持的切片模型加载的格式。 --------------------cesium加载b3dm代码------

var model = _teemo_scene.primitives.add(new Cesium.Cesium3DTileset({
    id: o.id,
    url: o.url,
    maximumMemoryUsage: 1024, //内存使用最大量
    skipLevelOfDetail: true, //↓↓↓LOD优化项↓↓↓
    baseScreenSpaceError: 1024,
    skipScreenSpaceErrorFactor: 16,
    skipLevels: 1,
    immediatelyLoadDesiredLevelOfDetail: false,
    loadSiblings: false,
    cullWithChildrenBounds: true
}));

cesium上如何绑定地球图片添加点击事件

拾取和选择 ThingJS 系统内置了很多事件，比如点击鼠标、键盘输入、层级变化等。用户可以监听这些事件，在事件回调中进行相应的业务逻辑处理网页链接

拾取

通过属性和接口获取鼠标拾取（Pick）的物体 当鼠标在一个物体上悬停时，我们经常希望做一些操作，比如变色等。 我们使用 Picker 类来获取鼠标拾取（Pick）的物体，通过 app.picker 得到 Picker 类来实现这个功能，见下例：

//判断拾取的物体是否改变
if (app.picker.isChanged()) {
    //通过app.picker.objects 得到当前拾取的物体
    console.log(app.picker.objects);
    //通过app.picker.previousObjects 得到之前拾取的物体
    console.log(app.picker.previousObjects);
}

通过事件获取鼠标拾取的物体

可以通过 MouseEnter 和 MouseLeave 来实现 。

// 鼠标拾取物体显示边框
app.on(THING.EventType.MouseEnter, '.Thing', function (ev) {
    ev.object.style.outlineColor = '#FF0000';
});
// 鼠标离开物体边框取消
app.on(THING.EventType.MouseLeave, '.Thing', function (ev) {
    ev.object.style.outlineColor = null;
});

查看示例 示例效果如下图所示： 当 Pick 发生变化时会触发 PickChange 事件,也可以通过事件的回调参数获取当前和之前的拾取物体。

app.on(THING.EventType.PickChange, function (ev) {
    ev.objects.style.color = '#ff0000';
    ev.previousObjects.style.color = null;
});

区域 Pick 物体

有时我们通过鼠标框选一个区域，在区域内的物体我们认为是被 Pick 的，如下例：

//由于框选比较消耗性能，因此预先设置框的“候选集”，只在候选集中框选
var things = app.query('.Thing');
app.picker.areaCandidates = things;
//启动框选 传入 鼠标按下时开始框选的屏幕坐标
app.picker.startAreaPicking({
    x: x,
    y: y
});
//结束框选
app.picker.endAreaPicking();

查看示例 pickedResultFunc 可通过 pickedResultFunc 设置拾取对象回调函数，详见代码块，如下图：

选择

选择物体

鼠标悬停到物体上，但不代表我选择它了，比如是我们点击后才表明我们选择了它。选择物体，我们通过 Selection 模块实现，可通过 app.selection 的接口实现该功能，见下例：

//将物体加入到选择集中
app.selection.select(obj);
// 判断对象是否在选择集中
app.selection.has(obj);
//将物体从选择集中删除
app.selection.deselect(obj);
//清空选择集
app.selection.clear();

通过属性和方法，侦测选择集变化

Selection 通过提供 isChanged 方法获取选择集变化，通过 objects 和 previousObjects 获取当前选择集和变化之前的选择集，见下例：

if (app.selection.isChanged()) {
    //获取当前哪些物体被选择
    console.log(app.selection.objects);
    //当isChanged时，之前都有哪些物体被选择
    console.log(app.selection.previousObjects);
}

通过事件侦测选择集变化

可以通过 Select 和 Deselect 事件精确控制物体针对选择的响应，如下例：

app.on(THING.EventType.Select, '.Thing', function (ev) {
    // 选择集中的物体颜色进行改变
    ev.object.style.color = "#ff0000";
});
app.on(THING.EventType.Deselect, '.Thing', function (ev) {
    // 物体从选择集中删除时，清除颜色
    ev.object.style.color = null;
});

我们也可以通过 SelectionChange 事件。

app.on(THING.EventType.SelectionChange, function (ev) {
    console.log(ev.previousObjects + " " + ev.objects);
});

cesium 和 Three.js有什么区别，以及二者与WebGL 的关系

二者都是基于WebGL技术开发的js库

  • Three.js 受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手；例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api)，只是做了更大粒度的封装。
  • Cesium 受众面相对较小，是Gis相关的，也是基于WebGL开发的，它主要是三维地球相关的js库，可以展示二维地图服务(百度高德)、倾斜摄影模型；还可以在上面做一些三维分析。

cesium截图不显示绘制元素

排查了下是在初始化的一个属性造成的 requestRenderMode 设为 false 或者不设置。默认值为 false requestRenderMode 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率在画面不发生变化的时候，暂停渲染，变化时再渲染。 Cesium是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 通过Cesium提供的JSAPI，可以实现以下功能：

  • 全球级别的高精度的地形和影像服务
  • 矢量以及模型数据
  • 基于时态的数据可视化
  • 多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化
推荐文章