react中cesium添加billboard广告牌,billboard点击事件和鼠标滑过效果
刚做完项目中广告牌的效果,顺便分享一下。更多可以参考官网的例子查看详情先上效果图:1.添加广告牌:2.鼠标滑过效果(放大了一点点):3.鼠标点击后,视野定位到具体的位置:1.添加广告牌代码:viewer.entities.add({name: '1号大棚',position: Cesium.Cartesian3.fromDegrees(117.5673, 36.7...
·
刚做完项目中广告牌的效果,顺便分享一下。更多可以参考官网的例子查看详情
先上效果图:
1.添加广告牌:
2.鼠标滑过效果(放大了一点点):
3.鼠标点击后,视野定位到具体的位置:
1.添加广告牌代码:
viewer.entities.add({
name: '1号大棚',
position: Cesium.Cartesian3.fromDegrees(117.5673, 36.7035),
label: { //文字标签
text: '1号大棚',
font: '500 30px Helvetica',// 15pt monospace
scale: 0.5,
style: Cesium.LabelStyle.FILL,
fillColor: Cesium.Color.WHITE,
pixelOffset: new Cesium.Cartesian2(110, -70), //偏移量
showBackground: true,
backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0)
},
billboard: { //图标
image: require('./img/bg.png'),
width: 200,
height: 140,
pixelOffset: new Cesium.Cartesian2(100, -35), //偏移量
},
});
补充说明:billboard的image路径,因为我是react的项目,所以要用require引进来,普通项目的话,不需要require。
2.鼠标滑过效果代码:
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
const pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {
entity.billboard.scale = 1.2;
entity.label.pixelOffset = new Cesium.Cartesian2(110, -80);
entity.label.scale = 0.7;
} else {
entity.billboard.scale = 1.0;
entity.label.pixelOffset = new Cesium.Cartesian2(110, -70);
entity.label.scale = 0.5;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
3.点击广告牌后视野定位代码:
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (click) {
const pick = viewer.scene.pick(click.position);
if (pick && pick.id) {
if (pick.id._name === '1号大棚') {
viewer.flyTo(entity, {
duration: 2,
offset: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-10),
range: 100
}
});
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
我贴出来的代码中只写了"1号大棚"的效果,多个广告牌自己封装函数就好啦。
更多推荐
所有评论(0)