Cesium在地球上绘制标注

1. 实现效果

• 在表单中输入当前的经纬度，能够在地球上实现标注。
• 并且支持鼠标在地球上选取点，并能够回显在表单中。

2. 创建标注

要实现上述的效果，首先应该知道如何在cesium地球上创建标注。
cesium提供了自带的PointPrimitiveCollection点集合，可以在集合中添加和删除点，并显示到地球上。
官网示例：

const points = scene.primitives.add(new Cesium.PointPrimitiveCollection());
points.add({
    
    
  position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
  color : Cesium.Color.YELLOW
});
points.add({
    
    
  position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
  color : Cesium.Color.CYAN
});

只需要new一个PointPrimitiveCollection点集合，然后添加到地球场景中即可在地球上显示。

3. 根据表单输入进行标注

使用v-model对表单输入数据进行双向绑定。

data() {
    
    
    return {
    
    
      position: {
    
    
        lon: '',
        lat: '',
      },
      pointInfo: null,
    }
  },

封装相应标注站点位置的方法，点击确定时，调用drawSite方法并把当前选中的经纬度传入即可。

//创建点集合
this.pointInfo = this.viewer.scene.primitives.add(
  new Cesium.PointPrimitiveCollection()
);

4. 鼠标点击进行标注

cesium中ScreenSpaceEventHandler专门用于处理用户事件，提供setInputAction方法设置对应的回调函数。

点击选取按钮时，获取鼠标的实时经纬度和高度信息，传入绘制标注方法即可。
其中传入的viewer就是初始化cesium创建的视图容器，它提供了创建和控制3D场景所需的所有基本功能，包括加载3D模型、添加图像覆盖物、设置相机位置和方向、处理用户输入等。

getPosition (viewer){
    
    
	let cesiumViewer = this.viewer;
	let canvas = cesiumViewer.scene.canvas;
	//得到当前三维场景的椭球体
	let ellipsoid = cesiumViewer.scene.globe.ellipsoid;
	// 定义当前场景的画布元素的事件处理
	let handler = new Cesium.ScreenSpaceEventHandler(canvas);
	let _this = this;
	//设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
	handler.setInputAction(function(movement){
    
    
	    //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
	    let cartesian = cesiumViewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
	    if(cartesian){
    
    
	        //将笛卡尔三维坐标转为地图坐标（弧度）
	        var cartographic = cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
	        //将地图坐标（弧度）转为十进制的度数
	        var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
	        var lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
	        var height = (cesiumViewer.camera.positionCartographic.height/1000).toFixed(2);
			_this.drawSite(lat, lng);	//根据鼠标经纬度调用绘制标注方法进行标注
	    }
	},Cesium.ScreenSpaceEventType.MOUSE_MOVE)	//此枚举类型用于对鼠标事件进行分类:向下、向上、单击、双击、按住按钮时移动和移动。具体参考文档Cesium.ScreenSpaceEventType
}