cesium 学习(八) 基础绘制（点线面）

最新推荐文章于 2024-09-09 09:44:56 发布

Zippy2016

最新推荐文章于 2024-09-09 09:44:56 发布

阅读量2.1k

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/CreateFree/p/11488492.html

版权

本文介绍了在Cesium三维场景中使用Entity方法进行基础绘制，包括点、线、面的绘制步骤及代码示例。此外，还提及了DrawHandler插件作为便捷的绘制工具，并对两种方式进行了简单比较。

摘要由CSDN通过智能技术生成

一、前言

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

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

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

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

2.1绘制点Entity

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

核心代码如下：

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

//绘制点
        document.getElementById("drawpoint").addEventListener("click", function () {
            var handler = new Cesium.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);
        });