正文 

当前位置： 首页 > java > java示例

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

createfree      2022-02-13     680

关键词：

一、前言

　　对于一个地图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);
        });
View Code

2、使用entity添加点：

技术图片 
function drawPoint(position, config) {
            var config = config ? config : {};
            var pointGeometry = viewer.entities.add({
                name: "点几何对象",
                position: position,
                point: {
                    color: Cesium.Color.SKYBLUE,
                    pixelSize: 10,
                    outlineColor: Cesium.Color.YELLOW,
                    outlineWidth: 3,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                }
            });
            return pointGeometry;
        };
View Code

 3、效果图：

技术图片

2.2绘制线Entity

　　可以看看PolylineGraphics对象中的属性，两点连成线，positions属性就是用来存放各个拐点的；还有线的宽度width，样式等和点类似。

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

技术图片 
//绘制线
        document.getElementById("drawline").addEventListener("click", function () {
            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            var tempPoints = [];
            //鼠标移动事件
            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 (click) {
                //调用获取位置信息的接口
                position = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
                tempPoints.push(position);
                let tempLength = tempPoints.length;
                //调用绘制点的接口
                let point = drawPoint(tempPoints[tempPoints.length - 1]);
                tempEntities.push(point);
                if (tempLength > 1) {
                    let pointline = drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
                    tempEntities.push(pointline);
                }
                else {
                    tooltip.innerHTML = "请绘制下一个点，右键结束";
                }
                return;
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            //右键点击操作
            handler.setInputAction(function (click) {
                tooltip.style.display = "none";
                tooltip.innerHTML = "左键单击绘制,右键结束绘制";
                tempPoints = [];
                handler.destroy();//关闭事件句柄
                handler = null;
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        });
View Code

2、使用entity添加线：

技术图片 
function drawPolyline(positions, config) {
            if (positions.length < 1) return;
            var config = config ? config : {};
            var polylineGeometry = viewer.entities.add({
                name: "线几何对象",
                polyline: {
                    positions: positions,
                    width: config.width ? config.width : 5.0,
                    material: new Cesium.PolylineGlowMaterialProperty({
                        color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
                    }),
                    depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
                        color: config.color ? new Cesium.Color.fromCssColorString(config.color) : Cesium.Color.GOLD,
                    }),
                }
            });
            return polylineGeometry;
        };
View Code

 3、效果图：

 技术图片

2.3绘制面Entity

　　面几何对象，我们使用PolygonGraphics来绘制。绘制一个面，我们会绘制多个点、多条线组合成。它的属性也是类似的，其中positions属性同线对象是一样的。

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

技术图片 
//绘制面
        document.getElementById("drawploy").addEventListener("click", function () {
            var tempPoints = [];
            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            tooltip.style.display = "block";
            //鼠标移动事件
            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 (click) {
                //调用获取位置信息的接口
                position = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
                tempPoints.push(position);
                let tempLength = tempPoints.length;
                //调用绘制点的接口
                let point = drawPoint(position);
                tempEntities.push(point);
                if (tempLength > 1) {
                    let pointline = drawPolyline([tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1]]);
                    tempEntities.push(pointline);
                } else {
                    tooltip.innerHTML = "请绘制下一个点，右键结束";
                }
                return;

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            //右键点击操作
            handler.setInputAction(function (click) {
                let cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
                if (cartesian) {
                    let tempLength = tempPoints.length;
                    if (tempLength < 3) {
                        alert(‘请选择3个以上的点再执行闭合操作命令‘);
                    } else {
                        //闭合最后一条线
                        let pointline = drawPolyline([tempPoints[tempPoints.length - 1], tempPoints[0]]);
                        tempEntities.push(pointline);
                        drawPolygon(tempPoints);
                        tempEntities.push(tempPoints);
                        handler.destroy();//关闭事件句柄
                        handler = null;
                    }
                }
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        });
View Code

2、使用entity添加面：

技术图片 
function drawPolygon(positions, config) {
            if (positions.length < 2) return;
            var config = config ? config : {};
            var polygonGeometry = viewer.entities.add({
                name: "线几何对象",
                polygon: {
                    height: 0.1,
                    hierarchy: new Cesium.PolygonHierarchy(positions),
                    material: config.color ? new Cesium.Color.fromCssColorString(config.color).withAlpha(.2) : new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
                    perPositionHeight: true,
                }
            });
            return polygonGeometry;
        };
View Code

 3、效果图：

 技术图片

三、DrawHandler插件

　　网上有很多大佬们写了自己的DrawHandler For Ceisum的插件，其中的功能更加丰富，非常适合偷懒者使用(ˇ∀ˇ)。当然也是学习的好资料，其中绘制的方法是不一样的，我上面的是简单的绘制，且没有实时将线绘制出来，面也是，而drawhandler插件实现的方式却是实时绘制出来的。下面我们来看看。

3.1绘制点

 技术图片

3.2绘制线

 技术图片

3.3绘制面

 技术图片

四、总结

　　使用自己制作的基础绘制工具，其优点是方便、快捷，缺点是简陋，但好方法、好技术都是慢慢积累出来的，这里我只是使用了Cesium的Entity中的点、线、面绘制，Entity中还有很多的几何对象绘制，可以自行查看API学习，如果之后有时间会考虑再补充。

　　插件是好东西，对于我们使用来说极其方便，用起来也是好用，但是对于我们理解Cesium来说就少了些内容，如果有时间应当自己去模仿一下插件的实现，或者阅读其源码，看看它是如何实现的。

cesium实战项目

参考技术A本人所学GIS专业，毕业后一直从事Cesium相关的GIS开发工作，在业余时间将Ceium中常用的一些功能进行封装，形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目，紧贴业务特性，实用性强，能够在最大程... 查看详情

cesium绘制点、线、面、圆、矩形

参考技术A本文基于《基于Webpack的Cesium+Vue应用》文章，在此基础之上，进行功能的扩展。本文主要讲解如何在Cesium三维球上用鼠标绘制点、线、面、矩形。 查看详情

openlayers|cesium在线生成随机点线面坐标数据(代码片段)

Openlayers|Cesium在线生成随机点线面坐标数据OpenLayers教程使用Turf.js模拟随机数据在线示例OpenLayers教程地图开发工作中，有时候需要模拟一些数据，之前都是手动用循环创建，数据太有规律，不好用，于是搞个在... 查看详情

primitive篇（贴图）

...客我们了解了自定义点、线、面绘制，这篇我们接着学习cesium自定义纹理贴图。我们完成点线面的绘制，只是绘制出了对象的框架，没有逼真的外观。逼真外观是需要设置材质来实现：Material。再次查看appearance对象：属性里面的... 查看详情

离线地图解决方案：地图点线面绘制

使用鼠标，在地图上添加点、线、面，并获取所添加地物的坐标信息。效果如下：图元绘制后获取坐标：<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>< 查看详情

leaflet绘制点线面圆椭圆线缓冲区(代码片段)

...绘图插件Leaflet.draw，但是我不想要它的控件，只想用它的绘制功能，控件我自己提供，当时不知道如何使用，就自己写了个绘制点线面圆和椭圆的工具，代码如下：///<referencepath="define.js"/>///<referencepath="icon.js"/>///<refer... 查看详情

[转]利用matlab绘制地图上的点线面

原文链接：https://blog.csdn.net/rumswell/article/details/16927565一.绘制点%生成背景地图地图  h = worldmap(‘France‘);%读取和显示大陆架  landareas = shaperead(‘landareas.shp‘,‘UseGeoCoord 查看详情

arcgisforandroid（10.2.9）-点线面绘制前奏

参考技术A先介绍用到的对象接口：一、Symbol是对Graphic对象进行符号样式设置的接口，所有符号样式类都实现了Symbol接口：二、地图图层Layer图层只有添加到MapView对象中才能使用。在ArcGISRuntimeforAndroid中有许多种图层，不同图层... 查看详情

离线地图解决方案：地图点线面绘制

使用鼠标，在地图上添加点、线、面，并获取所添加地物的坐标信息。效果如下：650)this.width=650;"src="https://s1.51cto.com/wyfs02/M00/90/AD/wKiom1jxtdnCQLObAALHGiRgrZ4649.png-wh_500x0-wm_3-wmp_4-s_1587690320.png"style="float:none;"title="地图绘 查看详情

c#winform怎么在picturebox中绘制点线面

参考技术A利用Graphic类就可以绘制相应的点，线，面了Graphicg=picturebox.CreateGraphics();然后利用g的相应方法就能绘制图形了，如DrawLine画线，DrawRectangle画四边形等本回答被提问者和网友采纳 参考技术B你可以开发一个控件，支持自定... 查看详情

用c#代码写，arcengine开发，在加载的地图上绘制多边形后，导出绘制区域内的所有矢量要素（点线面）

导出的格式为shapefile格式！参考技术A用intersect方法求交，并且根据点线面不同而选择不同的intersect方法就好。本回答被提问者采纳 查看详情

平面设计图之点线面的作业怎么画

...互间的关联与对比。点、线、面组合作业是平面构成理论学习中的基础练习内容之一，而平面构成是平面设计专业学习的必修课之一。完成平面构成作业中关于点线面三种元素的组合，首先要正确理解点线面的基本概念，以及它... 查看详情

cesium实现文字点多段线多边形的实时绘制(代码片段)

...的一个功能，是用户对感兴趣区域标注的业务需要。同时Cesium提供了点、线（多段线）、面及文字（label）绘制的接口，绘制方式总共有两种，一种是通过Entity实体的方式，一种是通过Primitives的方式。第一种使用较为简单，是在... 查看详情

什么是点线面

什么是点线面空间一点的位置就是一点，点是所有图形的基础，线就是由无数个点连接而成的，而无数条线在同一个平面内相交形成面。点作为最简单的几何概念，通常作为几何、物理、矢量图形和其他领域中的最基本的组成部... 查看详情

cesium学习网址

 不错的案例介绍：根据地形瓦片直接绘制高程、坡度及等高线同一场景下显示两个不同的瓦片图层https://cloud.tencent.com/developer/article/1113355 绘制大量的几何体https://blog.csdn.net/UmGsoil/article/details/74912638 查看详情

在地图上基于openlayers实现点/线/面静态的绘制显示(代码片段)

...的工作过程中，是离不开矢量的数据的。矢量作为最基础的数据形式，一般通用在各个项目中。在导航软件开发或者应用中，点/线/面的标记，标绘，显示等都是不可缺少的。本文主要是来介绍在地图上基于Ope... 查看详情

arcgis10.1多部件至单部件面转线面转点线转面

绍了Arcgis中多部件至单部件、面转线、面转点、线转面的应用。多部件至单部件：点击学习点击学习系统教程本文出自“GIS思维”博客，请务必保留此出处http://gisthink.blog.51cto.com/9670171/1795054 查看详情

计算几何-点线面形

1.TOYS双语描述：Calculatethenumberoftoysthatlandineachbinofapartitionedtoybox.计算一个分区玩具箱每个箱子里的玩具数量。Momanddadhaveaproblem-theirchildJohnneverputshistoysawaywhenheisfinishedplayingwiththem.TheygaveJohnarectan 查看详情