Cesium创建图元并实现点击图元带出信息气泡弹窗

自己记录，如有更好的或什么不对的地方，请指出！谢谢！

效果图如下：

实现点击下图的图标，可弹出气泡弹窗。带出此图标的信息（例如：标题，视频链接等）

 

 

 

思路：

1.在创建图元时，将数据传入。

2.创建监听点击事件，获取点击的图元的数据。

3.创建弹窗，展示数据。

4.最后销毁页面时可清除监听事件。

一步一步拆解来：

1.在创建图元时，将数据传入。

Entity有一个属性：description

将数据写入description属性中

代码如下：

// 加载图元函数
addContainer(id,position,description) {
  this.pointList[`List${id}`] = this.viewer.entities.add({
	name: `List${id}`,
	position: Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z),
	id: `List${id}`,
	billboard: {
		// 图像地址，URI或Canvas的属性
		image: require('/public/common/position1.png'),
		verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
		scale: 2,
		scaleByDistance: new Cesium.NearFarScalar(0.2, 0.2, 0.2, 0.2),
	},
	description: description,
	});
},

2.创建监听点击事件，获取点击的图元的数据。

Cesium是有鼠标事件的， API：Cesium.ScreenSpaceEventHandler 屏幕空间事件处理程序。

 代码如下：

// 点击事件
handlerListen() {
   handler = this.viewer.screenSpaceEventHandler;
   if (!handler) return;
   handler.setInputAction(movement => {
      var pick = this.viewer.scene.pick(movement.position);
      console.log(pick)
      if (pick && pick.primitive && pick.id) {
          let descript = pick.id.description._value;
          let coor = descript.position;
          let position = {x: coor.x, y: coor.y, z: coor.z}
          this.openPop(position, descript, this.viewer)
          console.log('descript是创建图元时的信息description',descript)
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
},

 3.创建弹窗，展示数据。

cesium弹窗创建下一篇继续补充整理。。。

4.清除监听事件。

// 清除点击事件
removeHandlerListener() {
  if (handler) {
     handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
},