react中cesium添加billboard广告牌，billboard点击事件和鼠标滑过效果

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