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號大棚"的效果，多個廣告牌自己封裝函數就好啦。