Question

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

我在地球上画了红框，想绑定个点击事件。不知道怎么绑定
var viewer = new Cesium.Viewer('cesiumContainer', { showRenderLoopErrors: false });

var quyu = viewer.entities.add({
name: "红蚁灾害区",
position: Cesium.Cartesian3.fromDegrees(118.06, 24.58),
rectangle: {
coordinates: Cesium.Rectangle.fromDegrees(118.065, 24.579, 118.073408, 24.581857),
height: 0.0,
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.RED,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5.5e6)
}

});
viewer.trackedEntity = quyu;

//点击鼠标监听事件
var scene = viewer.scene;
var handler = new Cesium.ScreenSpaceEventHandler(scene.quyu);

handler.setInputAction(function (click) {
//载入视频
var videoElement = document.getElementById('trailer');

var sphere = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-79, 39, 10000),
ellipsoid: videoElement
});

videoElement.style.display = '';

// Older browsers do not support WebGL video textures,
// put up a friendly error message indicating such.
viewer.scene.renderError.addEventListener(function () {

if (!videoElement.paused) {
videoElement.pause();
}
viewer.cesiumWidget.showErrorPanel('This browser does not support cross-origin WebGL video textures.', '', '');
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

Answer 1

拾取和选择

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

Answer 2

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

追问

？？？啥意思

Answer 3

entity加id属性作为唯一标识

var quyu = viewer.entities.add({

    id:"quyu",

name: "红蚁灾害区",

position: Cesium.Cartesian3.fromDegrees(118.06, 24.58),

rectangle: {

coordinates: Cesium.Rectangle.fromDegrees(118.065, 24.579, 118.073408, 24.581857),

height: 0.0,

material: Cesium.Color.RED.withAlpha(0.5),

outline: true,

outlineColor: Cesium.Color.RED,

distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5.5e6)

}

});

//点击鼠标事件中判断点击选中的是否为目标物体

var scene = viewer.scene;

viewer.screenSpaceEventHandler.setInputAction(function (movement) {

var pickedFeature = viewer.scene.pick(movement.position);

        if (!Cesium.defined(pickedFeature)) {

            return;

        }

        if (pickedFeature.id.id === "quyu") {

            console.log("click quyu");

        }

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

更多功能请参考 cesium中文网

Answer 4

江州重别薛六柳八二员外(刘长卿)

Answer 5

同题仙游观(韩翃)