Cesium在地球上绘制标注

深藏阁楼爱情的钟 2023-10-11 17:07 70阅读 0赞

#### Cesium在地球上绘制标注 ####

*  1. 实现效果
 *  2. 创建标注
 *  3. 根据表单输入进行标注
 *  4. 鼠标点击进行标注

## 1. 实现效果 ##

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

![在这里插入图片描述][ec81ee81415f49ae9a83d164b7898049.png]  
![在这里插入图片描述][673a66d875b64ee49dd196321643c865.png]

## 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,
        }
      },

![在这里插入图片描述][8aab6ed2e6744b94945d73efc1868df2.png]

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

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

![在这里插入图片描述][b39bcd6989334d65b79c84575cecbfd0.png]

## 4. 鼠标点击进行标注 ##

cesium中ScreenSpaceEventHandler专门用于处理用户事件，提供setInputAction方法设置对应的回调函数。  
![在这里插入图片描述][9dfdbe07136e414dab07f7a2521ccd9e.png]

点击选取按钮时，获取鼠标的实时经纬度和高度信息，传入绘制标注方法即可。  
其中传入的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
    }

[ec81ee81415f49ae9a83d164b7898049.png]: https://img-blog.csdnimg.cn/ec81ee81415f49ae9a83d164b7898049.png
[673a66d875b64ee49dd196321643c865.png]: https://img-blog.csdnimg.cn/673a66d875b64ee49dd196321643c865.png
[8aab6ed2e6744b94945d73efc1868df2.png]: https://img-blog.csdnimg.cn/8aab6ed2e6744b94945d73efc1868df2.png
[b39bcd6989334d65b79c84575cecbfd0.png]: https://img-blog.csdnimg.cn/b39bcd6989334d65b79c84575cecbfd0.png
[9dfdbe07136e414dab07f7a2521ccd9e.png]: https://img-blog.csdnimg.cn/9dfdbe07136e414dab07f7a2521ccd9e.png