隐藏掉这些配置有两种方式。
1.js构造viewer对象时候隐藏
2.通过viewer对象来隐藏div的方式
Cesium里面鼠标的 *** 作主要在ScreenSpaceCameraController.js里面
1.viewer.scene.screenSpaceCameraController.enableInputs 设置为true的话，场景里可以旋转，拖拽等。设置为false将禁用所有鼠标的输入事件
2.viewer.scene.screenSpaceCameraController.enableTranslate 是否可以拖动地图,只在2d和2.5d场景里生效
3.viewer.scene.screenSpaceCameraController.enableZoom 是否可以缩放
4.viewer.scene.screenSpaceCameraController.enableRotate 是否可以旋转地图,只在2d和2.5d场景里生效
5.viewer.scene.screenSpaceCameraController.enableTilt 是否可以倾斜地图,只在3d和2.5d场景生效
6.viewer.scene.screenSpaceCameraController.enableLook 是否允许使用自由外观,只改变相机的朝向，不改变相机位置
7.viewer.scene.screenSpaceCameraController.inertiaSpin 旋转惯性
8.viewer.scene.screenSpaceCameraController.inertiaTranslate 平移惯性
9.viewer.scene.screenSpaceCameraController.inertiaZoom 缩放惯性
10.viewer.scene.screenSpaceCameraController.bounceAnimationTime 切换2d,2.5d，3d模式之间的时间间隔，默认3s
11.viewer.scene.screenSpaceCameraController.minimumZoomDistance 相机离地表的最低高度，默认1米，比如设置为-100米的情况下相机将钻入地下
12.viewer.scene.screenSpaceCameraController.maximumZoomDistance 相机离地表的最大高度，默认为无穷大
13.viewer.scene.screenSpaceCameraController.translateEventTypes = Cesium.CameraEventType.LEFT_DRAG 移动场景的事件，默认是鼠标按住左键拖拽地图,可自定义移动场景的鼠标事件，2d和2.5d有效
14.viewer.scene.screenSpaceCameraController.zoomEventTypes =[
Cesium.CameraEventType.RIGHT_DRAG,
Cesium.CameraEventType.WHEEL,
Cesium.CameraEventType.PINCH,
]
鼠标缩放事件，传入的是一个数组,默认鼠标右键拖拽，鼠标滚轮滚动，两个手指滚动笔记本触控区都可以触发场景缩放效果
15.viewer.scene.screenSpaceCameraController.rotateEventTypes = Cesium.CameraEventType.LEFT_DRAG 旋转场景，默认是左键拖拽，只在2.5d和3d场景生效
16.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
Cesium.CameraEventType.MIDDLE_DRAG,
Cesium.CameraEventType.PINCH,
{
eventType: Cesium.CameraEventType.LEFT_DRAG,
modifier: Cesium.KeyboardEventModifier.CTRL,
},
{
eventType: Cesium.CameraEventType.RIGHT_DRAG,
modifier: Cesium.KeyboardEventModifier.CTRL,
},
]
场景倾斜事件，默认是鼠标滚轮下按拖拽，按CTRL+左键拖拽，按CTRL+右键拖拽都可以使场景倾斜，建议将场景倾斜改成右键拖拽使用起来更方便一点，比如
viewer.scene.screenSpaceCameraController.tiltEventTypes = Cesium.CameraEventType.RIGHT_DRAG
15.viewer.scene.screenSpaceCameraController.lookEventTypes={
eventType: CameraEventType.LEFT_DRAG,
modifier: KeyboardEventModifier.SHIFT,
}
相机位置不变，改变相机方向进行自由观看，默认是按住SHIFTT键+左键拖拽
16.viewer.scene.screenSpaceCameraController.enableCollisionDetection 是否开启碰撞检测，默认是开启
Cesium作为三维GIS和BIM应用的主力引擎，目前已经受到越来越多的开发者的青睐。这两年笔者也一直做Cesium相关的开发工作，真切地感受到Cesium的强大，其丰富的API、丰富的示例为开发三维GIS/BIM应用提供了极大的便利。
为了进一步丰富Cesium的开发生态，我们把之前在Cesium基础上开发的功能，以及大量的改良功能，封装成若干个独立的js包。这样也避免开发者重复造轮子。对于大屏展示、C端替代等直接本地部署Cesium的应用场景，可以直接免费使用我们封装的EarthSDK扩展包。
EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js两个js包。
XbsjCesium.js用来扩展Cesium所不具备的三维可视化功能，例如视频融合、分析工具、模型压平等。
XbsjEarth.js则主要目标在于封装出更加易于使用的API接口，尽可能屏蔽掉前端开发工程师所不熟悉的图形学、GIS相关内容。会在Cesium的基础上封装好一些复杂的交互 *** 作，并提供极其简单的API接口方便调用。
EarthSDK从前端开发者的角度考虑设计API，大部分类的属性都是响应式设计，通过简单 *** 作即可监控相应的属性变化，通过bind方便可以实现属性的相互绑定。特别针对Vue的开发者，实现了和vue的响应式属性的无缝融合。具体可以参考这篇文章的介绍： 三维应用的响应式设计探索 。
之前使用过ECharts的同学可能对ECharts的 *** 作简单印象深刻。ECharts相当于把大量的API转成配置式，真正使用时，只需要通过setOptions来进行一个大JSON对象的配置，即可完成图表的创建。
EarthSDK的API设计也是受ECharts的启发，会尽量减少不需要的API，减轻开发者的记忆负担。只需要通过一个大JSON配置，就可以完成整个场景的搭建。
而且，EarthSDK比ECharts更进一步，可以直接修改相应的属性，即可完成三维场景的动态变化。而ECharts则需要不停地调用setOption来进行配置。以后的文章中会详细说明此特性。
EarthSDK创建场景后，内置viewer和scene对象，用户可以通过viewer或者scene来向场景中添加Cesium的原生对象，和调用所有原生的Cesium API函数。
为了更易于理解EarthSDK的使用，我们开发了一个样例程序 XbsjEarthUI(这个程序也同时集成到了CesiumLab中)。此样例程序已经开源放在Github和Gitee上，基于MIT协议，用户可以任意修改。
XbsjEarthUI在github上的地址： https://github.com/cesiumlab/XbsjEarthUI
XbsjEarthUI在gitee上的地址：
https://gitee.com/cesiumlab/XbsjEarthUI
EarthSDK可以加载百度地图、高德地图等三十多种地图数据，并可以做到实时纠偏。
交通安防领域需要用到的视频监控、视频融合功能。可以将视频映射到倾斜摄影、BIM模型上（3dtiles模型），视频会覆盖到非平面物体上，不会出现闪烁等现象。
针对模型位置、姿态进行编辑。方便进行多个模型数据组合使用。并且这里的模型位置编辑可以很方便的在全球任意位置拖放。
结合CesiumLab数据生产，使用EarthSDK调整数据后期亮度，可以做出较好的特效。方便进行大屏展示。
可以指定模型数据显示在某一个视口，方便进行方案对比等 *** 作。
Cesium的地面本身不能做到透明显示，我们进行改进，使得透明度可以实时调节。
动态实现视域分析效果。
可以对路径进行编辑，编辑好的路径，可以用于控制相机的漫游，也可以控制物体的移动。
对原始Cesium的标签效果进行改进，并可以使用类似html5标签增加onClick属性，来自动执行自定义 *** 作。
拾取和选择
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)})
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）