使用Cesium动态绘制点、线、面、圆、矩形

最新推荐文章于 2024-09-14 16:33:00 发布

原创

最新推荐文章于 2024-09-14 16:33:00 发布 · 4.4w 阅读

133 ·

CC 4.0 BY-SA版权

文章标签：

#cesium

将以下代码复制到https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Drawing%20on%20Terrain.html查看Demo。

var activeShapePoints = [];
var activeShape;
var floatingPoint;

//查看器
var viewer = new Cesium.Viewer('cesiumContainer', {
   
   
    selectionIndicator: false,
    infoBox: false,
    // 注释时相当于使用默认地形，解开注释相当于使用全球地形
    terrainProvider: Cesium.createWorldTerrain()
});

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

//双击鼠标左键清除默认事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//绘制点
function createPoint(worldPosition) {
   
   
    var point = viewer.entities.add({
   
   
        position: worldPosition,
        point: {
   
   
            color: Cesium.Color.WHITE,
            pixelSize: 5,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
        }
    });
    return point;
}
//初始化为线
var drawingMode = 'line';
//绘制图形
function drawShape(positionData) {
   
   
    var shape;
    if (drawingMode === 'line') {
   
   
        shape = viewer.entities.add({
   
   
            polyline: {
   
   
                positions: positionData,
                clampToGround: true,
                width: 3
            }
        });
    }
    else if (drawingMode === 'polygon') {
   
   
        shape = viewer.entities.add({
   
   
            polygon: {
   
   
                hierarchy: positionData,
                material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
            }
        });
    } else if (drawingMode === 'circle') {
   
   
        //当positionData为数组时绘制最终图，如果为function则绘制动态图
        var value = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
        //var start = activeShapePoints[0];
        //var end = activeShapePoints[activeShapePoints.length - 1];
        //var r = Math.sqrt(Math.pow(start.x - end.x, 2) + Math.pow(start.y - end.y, 2));
        //r = r ? r : r + 1;
        shape = viewer.entities.add({
   
   
            position: activeShapePoints[0],
            name: 'Blue translucent, rotated, and extruded ellipse with outline',
            type:'Selection tool',
            ellipse: {
   
   
                semiMinorAxis: new Cesium.CallbackProperty(function () {
   
   
                    //半径 两点间距离
                    var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));
                    return r ? r : r + 1;
                }, false),
                semiMajorAxis: new Cesium.CallbackProperty(function () {
   
   
                    var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));
                    return r ? r : r + 1;
                }, false),
                material: Cesium.Color.BLUE.withAlpha(0.5),
                outline: true
            }
        });
    } else if (drawingMode === 'rectangle') {