【Cesium】在地球上绘制标注

前言

大家好，我是南木元元，热衷分享有趣实用的文章。本文来分享一下如何在cesium三维地球上实现标注效果。

实现效果

话不多说，先来看看实现的效果。主要有两个功能：

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

控制经纬度输入的表单：

地球上标注的点：

cesium创建标注

要实现上述的效果，首先应该知道如何在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点集合，然后添加到地球场景中即可在地球上显示。

表单输入标注

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

data中定义相关经纬度数据：

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

使用v-model进行表单的双向绑定：

封装相应标注站点位置的方法：

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

点击确定时，调用drawSite方法传入当前选中的经纬度：

鼠标点击标注

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
}

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~