cesium learning (eight) basic drawing (point line)

I. Introduction

　　For a map GIS scene, draw points, lines, surfaces belong to a basic function, whether it is two-dimensional map or three-dimensional map of the scene was like that, especially for two-dimensional three-dimensional scene, it should be more difficult than some.

But the simple drawing based not think too much, let's start learning the Cesium how to achieve basic rendering of three-dimensional scene.

Second, the original Cesium the Entity method to draw

　　Cesium encapsulated interface geometric object, i.e. point, line, plane, cylinder, cuboid, conical, etc., there are special geometry: Corridor , Ellipse , ellipsoid ; and billboard and Model . But this is mainly the use of point, line, surface three geometric objects, other geometric objects are similar, using a method similar, mainly to see the parameters required for each geometric object within itself what Bale.

2.1 plotted points Entity

　　First look PointGraphics point geometry, parameters it needs is the location of the point (coordinates, major), style (color, contour width, color, etc.). Then we pass it can realize the function of these properties plotted points.

The core code is as follows:

1, using a handler to build a mouse event:

//绘制点
        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, using the entity add a point:

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
                }
            });
            returnPointgeometry; 
        };

View Code

 3, FIG effect:

2.2 Draw Line Entity

　　Can look PolylineGraphics object attributes, even into two lines, Positions attribute is used to store the respective inflection points; and width of the line width , and style, and the like points.

1, using a handler to build a mouse event:

//绘制线
        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 (the Click) {
                 // call to get the positional information of the interface 
                position = viewer.camera.pickEllipsoid (click.position, viewer.scene.globe.ellipsoid); 
                tempPoints.push (position); 
                the let tempLength = tempPoints. length;
                 // call to the interface plotted points 
                the let drawPoint point = (tempPoints [tempPoints.length -. 1 ]); 
                tempEntities.push (point); 
                IF (tempLength>. 1 ) { 
                    the let pointline = drawPolyline ([tempPoints [tempPoints.length - 2], tempPoints [tempPoints.length -. 1 ]]);
                    tempEntities.push (pointline); 
                } 
                the else { 
                    tooltip.innerHTML = "Draw the next point, right end" ; 
                } 
                return ; 
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 
            // right click operation 
            handler.setInputAction ( function (the Click) { 
                tooltip.style.display = "none" ; 
                tooltip.innerHTML = "left click draw, draw the right end" ; 
                tempPoints = []; 
                handler.destroy (); // close the event handler 
                handler =null;
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        });

View Code

2, the use of entity to add the line :

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, FIG effect:

 

2.3 drawing surface Entity

　　Surface geometry object, we use PolygonGraphics to draw. A drawing surface, we will draw a plurality of points, combined into a plurality of lines. Its properties are similar, which positions the attribute with the same subject line.

1, using a handler to build a mouse event:

//绘制面
        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); 
            // left click operation 
            handler.setInputAction ( function (the Click) {
                 // call to get the positional information of the interface 
                position = viewer.camera.pickEllipsoid (click.position, viewer.scene.globe. ellipsoid); 
                tempPoints.push (position); 
                the let tempLength = tempPoints.length;
                 // call to the interface plotted points 
                the let point = drawPoint (position); 
                tempEntities.push (point); 
                IF (tempLength>. 1 ) { 
                    the let pointlineDrawPolyline = ([tempPoints [tempPoints.length - 2], tempPoints [tempPoints.length -. 1 ]]); 
                    tempEntities.push (pointline); 
                } the else { 
                    tooltip.innerHTML = "Draw the next point, right end" ; 
                } 
                return ; 

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 
            // right click operation 
            handler.setInputAction ( function (the click) { 
                the let of Cartesian = viewer.camera.pickEllipsoid (click.position, viewer.scene.globe.ellipsoid);
                 IF (of Cartesian ) { 
                    the let tempLength= TempPoints.length;
                     IF (tempLength <. 3 ) { 
                        Alert ( 'select three or more points and then performs the closing operation command' ); 
                    } the else {
                         // closed last line 
                        let pointline = drawPolyline ([tempPoints [ tempPoints.length -. 1], tempPoints [0 ]]); 
                        tempEntities.push (pointline); 
                        the drawPolygon (tempPoints); 
                        tempEntities.push (tempPoints); 
                        handler.destroy (); // Close event handler 
                        handler = null ;
                    }
                }
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        });

View Code

2, the use of entity to add surface :

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, FIG effect:

 

Three, DrawHandler plug

　　There are many online bigwigs wrote his DrawHandler For Ceisum plug-in, which is more feature-rich, ideal for lazy to use ( ∀ ) . Of course, good information is to learn where to draw the method is not the same, what I have is a simple draw, and there is no real-time plotted line, surface, and so is drawhandler way plug-in is implemented in real-time rendering out. Let us look.

3.1 plotted points

 

3.2 Draw the line

 

3.3 drawing plane

 

Fourth, summary

　　Use basic drawing tools to produce their own, the advantage of convenient, fast, the disadvantage is simple, but a good way, good technology is slowly accumulated out, here I just use Cesium 's Entity points, line, surface rendering, Entity there are many geometric object drawing, you can view their own API to learn, if you have time to consider after refilling.

　　Plug-in is a good thing for us is extremely easy to use, it is also easy to use, but for our understanding of Cesium is it less of content, if you have the time to imitate what should be their own plug-ins to achieve, or read its source code, see see how it is implemented.