9.Cesium中的event

https://blog.csdn.net/u010358183/article/details/121610901

1. 使用ScreenSpaceEventHandler添加事件

geojsonToDegrees

import * as Cesium from "cesium";
const geojsonToDegrees = (geojson) => {
	let arr = []
	if(geojson){
		geojson.features.forEach(item=>{
			let trArr = []
			if(item.geometry.type === 'Point'){
				trArr.push(
					Cesium.Cartesian3.fromDegrees(...item.geometry.coordinates)
				)
			}else if(item.geometry.type === 'Polygon'){
				item.geometry.coordinates[0].forEach(item1=>{
					trArr.push(
						Cesium.Cartesian3.fromDegrees(...item1)
					)
				})
			} else if(item.geometry.type === 'LineString'){
				item.geometry.coordinates.forEach(item1=>{
					trArr.push(
						Cesium.Cartesian3.fromDegrees(...item1)
					)
				})
			}
			
			arr.push(trArr)
			
		})
	}
	
	return arr
}

export default geojsonToDegrees

polylineEntity

import * as Cesium from "cesium";

import geojsonToDegrees from "@/components/Cesium/CesiumEntity/geojsonToDegrees";
/**
 * @description 实体类 线
 * @param options.viewer {any} 地图viewer
 * @param options.geojsonData {any} 地图geojson格式  LineString
 * @param options.config {Object} polyline配置 线宽，材质
 * @param options.config.width { number } 线宽
 * @param options.config.material { any } 材质
 */
class polylineEntity{
	declare viewer: any
	declare geojsonData: any
	declare lineEntity: any
	declare lineEntities: []
	declare config: {
		show?: boolean,
		clampToGround?: boolean,
		width?: number,
		material: any
	}
	declare ids: any
	
	declare handler: any
	
	constructor(options: {
		viewer: any,
		geojsonData: any,
		config: {
			show?: boolean,
			clampToGround?: boolean,
			width?: number,
			material: any
		}
	}) {
		this.viewer = options.viewer
		this.geojsonData = options.geojsonData
		this.lineEntity = undefined
		this.lineEntities = []
		this.config = options.config
		this.ids = []
		
		this.init()
	}
	
	private init(){
		geojsonToDegrees(this.geojsonData).forEach(item=>{
			this.lineEntity = new Cesium.Entity({
				polyline: {
					show: this.config.show || true,
					clampToGround: this.config.clampToGround || true, // 是否贴地
					shadows: Cesium.ShadowMode.DISABLED, // 折线是投射还是接收光源的阴影
					positions: item,
					width: this.config.width || 10,
					arcType: Cesium.ArcType.GEODESIC,
					// 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH
					// TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH	将同时对Terrain和3D Tiles进行分类。
					classificationType: Cesium.ClassificationType.BOTH,
					// 指定用于订购地面几何形状的z索引。仅在多边形为常数且未指定高度或拉伸高度的情况下才有效  type:ConstantProperty
					// zIndex: 0,
					material: this.config.material
					// 线低于地形时用于绘制折线的材质
					// depthFailMaterial: Cesium.Color.WHITE,
				}
			})
			
			this.viewer.entities.add(this.lineEntity);
			
			this.lineEntities.push(this.lineEntity)
		})
	}
	
	public on(eventType, callback){
		this.off(eventType)
		this.ids = []
		for( let i = 0; i < this.lineEntities.length; i++ ){
			if(this.viewer.entities.contains(this.lineEntities[i])){
				this.ids.push(this.lineEntities[i]?._id)
			}
		}
		
		let that = this;
		this.handler = new Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
		this.handler.setInputAction(function (click) {
			let pickedObject = that.viewer.scene.pick(click.position);
			
			// 屏幕坐标转世界坐标——关键点
			let ellipsoid = that.viewer.scene.globe.ellipsoid;
			let cartesian = that.viewer.camera.pickEllipsoid(click.position, ellipsoid);
			
			that.viewer._selectedEntity = [];//去除左击之后出现选中的绿框
			
			if (cartesian) {     //判断点击的是否是地球
				//将笛卡尔坐标转换为地理坐标
				const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
				//将弧度转为度的十进制度表示
				const lon = Cesium.Math.toDegrees(cartographic.longitude);
				const lat = Cesium.Math.toDegrees(cartographic.latitude);
				const click_point = {longitude: lon, latitude: lat};
				// that.viewer._element.style.cursor = 'pointer'
				if (Cesium.defined(pickedObject)) {
					if(that.ids.includes(pickedObject?.id?._id)){
						callback(click_point,pickedObject)
					}
				}
			}
			
		}, Cesium.ScreenSpaceEventType[eventType])
	}
	
	public off(eventType){
		if(this.handler){
			this.handler.removeInputAction(Cesium.ScreenSpaceEventType[eventType]);
			this.handler.destroy()
		}
	}
	
	public removeAll(){
		for( let i = 0; i < this.lineEntities.length; i++ ){
			/**
			 *  删除实体
			 */
			if(this.viewer.entities.contains(this.lineEntities[i])){
				this.viewer.entities.remove(this.lineEntities[i])
			}
			
		}
	}
}

export default polylineEntity

使用

  let line = new polylineEntity({
    viewer: viewer1,
    geojsonData: {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [120.192805, 30.253767],
              [120.195004, 30.251675],
              [120.190814, 30.250776],
              [120.1894, 30.254324],
              [120.192938, 30.254888],
              [120.191351, 30.25296],
              [120.193995, 30.251775]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [120.194177, 30.255066],
              [120.194541, 30.254031],
              [120.193566, 30.254502],
              [120.193772, 30.255174]
            ]
          }
        }
      ]
    },
    config: {
      width: 10,
      material: new PolylineTrailLinkMaterialProperty(
          1000,
          new Cesium.Color(1, 36, 46),
          new Cesium.Cartesian2(3.0,1.0)),
    }
  })

  line.on('LEFT_CLICK', (coor, entity)=>{
    console.log(coor)
    console.log(entity)
  })