cesium模型不遮挡点线面_cesium 学习(八) 基础绘制（点线面）

一、前言

对于一个地图GIS场景，绘制点、线、面属于是基础功能，无论是二维地图还是三维地图场景均是如此，尤其对于三维场景来说比二维应该是更加困难了些。

但是基础的简单绘制不用考虑太多，下面我们开始学习在Cesium的三维场景中如何进行基础绘制的实现。

二、使用原始Cesium的Entity方法绘制

Cesium中封装了几何对象的接口，也就是点、线、面、圆柱体、长方体、圆锥体等等，还有特殊的几何对象：corridor、ellipse、ellipsoid；以及billboard和model。但这次主要是使用点、线、面这三个几何对象，其他的几何对象都是类似的，使用方法大同小异，主要是看每个几何对象自身内部所需要的参数有哪些罢了。

2.1绘制点Entity

首先看看PointGraphics点几何对象，它需要的参数是点的位置(坐标、最主要的)，样式(颜色、轮廓的宽度、颜色等)。那么我们传给它这些属性即可实现绘制点的功能。

核心代码如下：

1、使用handler构建鼠标事件：

//绘制点

document.getElementById("drawpoint").addEventListener("click", function() {var handler = newCesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function(movement) {

tooltip.style.left= movement.endPosition.x + 10 + "px";

tooltip.style.top= movement.endPosition.y + 20 + "px";

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function(movement) {

position=viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);

let point=drawPoint(position);

tempEntities.push(point);

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function() {

handler.destroy();//关闭事件句柄

handler = null;

}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

handler.setInputAction(function() {

handler.destroy();//关闭事件句柄

handler = null;

}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)