Cesium draws annotations on the earth

1. Realize the effect

• Enter the current latitude and longitude in the form, and it can be marked on the earth.
• And support the mouse to select points on the earth, and can be echoed in the form.

2. Create callouts

To achieve the above effects, you should first know how to create labels on the cesium earth.
Cesium provides its own PointPrimitiveCollection point collection, which can add and delete points in the collection and display them on the earth.
Official website example:

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
});

You only need to create a new PointPrimitiveCollection point collection, and then add it to the earth scene to display it on the earth.

3. Annotate based on form input

Two-way binding of form input data using v-model.

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

Encapsulate the method of marking the location of the corresponding site. When you click OK, call the drawSite method and pass in the currently selected latitude and longitude.

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

4. Mouse click to mark

ScreenSpaceEventHandler in cesium is specially used to handle user events, and provides the setInputAction method to set the corresponding callback function.

When the select button is clicked, the real-time latitude, longitude and height information of the mouse can be obtained, and then passed to the drawing and labeling method.
The viewer passed in is the view container created by initializing cesium, which provides all the basic functions required to create and control 3D scenes, including loading 3D models, adding image overlays, setting camera position and orientation, and handling user input.

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
}