刚做完项目中广告牌的效果，顺便分享一下。更多可以参考官网的例子查看详情
先上效果图:
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 monospacescale: 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号大棚"的效果，多个广告牌自己封装函数就好啦。
