Cesium-在 3d 模型和地形上绘画

前言

原文地址
在2D地图中,绘图工具用于以"John Madden(一个美国的体育评论员)"的方式绘制点,折线和多边形。 在3D中,绘图工具通常以相同的方式使用 - 注释地球表面。
file
通过使用Cesium的Scene.pickScene.pickPosition 功能,我们可以重新设计3D绘图工具,允许用户绘制地形、任何3D表面、包括glTF模型,并精确地添加注释用户在3D空间中选择的位置。
file
file
完整的代码示例如下所示,可以复制并粘贴到Sandcastle中运行。 要绘制折线,左键单击,拖动鼠标左键,然后再次单击。 右键单击以添加具有特定点的高度(以米为单位)的注释。
对于折线,通常的方法是使用LEFT_CLICK来跟踪绘图状态(是否绘制折线?)以及MOUSE_MOVE处理在状态绘制时更新折线。 每次更新折线时,都会调用Scene.pick来标识正在绘制的对象(因为每个对象获得不同的颜色折线),并调用Scene.pickPosition来计算基于折线的新点,鼠标光标的屏幕坐标对应在三维空间的坐标。
为了最小化深度缓冲器,例如折线可能一些部分稍微高于或低于表面,所以尽量绘制宽折线。 并且Scene.pickPosition需要WebGL扩展,因此我们通过Scene.pickPositionSupported以验证系统是否支持它。
高度注释的实现是通过RIGHT_CLICK调用Scene.pickPosition,将返回的Cartesian3转换为Cartographic,然后添加一个包含高度的标签容器的Entity。 为了避免混乱,标签做了一定偏移,并用一条线段表示标签到点击的实际点的连线。
该示例可以扩展为一个完整的3D绘图工具,比如添加设置选择颜色和线宽,擦除等的UI。这可以允许用户在3D建筑物和车辆上或者感兴趣的区域注释。 我们欢迎您贡献的成果!

样例代码

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : 'https://assets.agi.com/stk-terrain/world'
    }),
    selectionIndicator: false,
    baseLayerPicker : false,
});
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

var milkTruck = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(
        -112.75475687882565,
        36.308766077235525,
        1187.4710985181116),
    model : {
        uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.gltf'
    }
});
var ground = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(
        -112.75475687882565,
        36.308806077235525,
        1187.4710985181116),
    model : {
        uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
    }
});

var scene = viewer.scene;
var camera = viewer.camera;
var color;
var colors = [];
var polyline;
var drawing = false;
var positions = [];

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

handler.setInputAction(
    function (click) {
        var pickedObject = scene.pick(click.position);
        var length = colors.length;
        var lastColor = colors[length - 1];
        var cartesian = scene.pickPosition(click.position);

        if (scene.pickPositionSupported && Cesium.defined(cartesian)) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var altitude = cartographic.height;
            var altitudeString = Math.round(altitude).toString();

            viewer.entities.add({
                polyline : {
                    positions : new Cesium.CallbackProperty(function() {
                        return [cartesian, Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude + 9.5)];
                    }, false),
                    width : 2
                }
            });
            viewer.entities.add({
                position : Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude + 10.0),
                label : {
                    heightReference : 1,
                    text : altitudeString,
                    eyeOffset : new Cesium.Cartesian3(0.0, 0.0, -25.0),
                    scale : 0.75
                }
            });
        }
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

handler.setInputAction(
    function (click) {
        if (drawing) {
            reset(color, positions);
        } else {
            polyline = viewer.entities.add({
                polyline : {
                    positions : new Cesium.CallbackProperty(function(){
                        return positions;
                    }, false),
                    material : color,
                    width : 10
                }
            });
        }
        drawing = !drawing;
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(
    function (movement) {
        var pickedObject = scene.pick(movement.endPosition);
        var length = colors.length;
        var lastColor = colors[length - 1];
        var cartesian = scene.pickPosition(movement.endPosition);

        if (scene.pickPositionSupported && Cesium.defined(cartesian)) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);

            // are we drawing on the globe
            if (!Cesium.defined(pickedObject)) {
                color = Cesium.Color.BLUE;

                if (!Cesium.defined(lastColor) || !lastColor.equals(Cesium.Color.BLUE)) {
                    colors.push(Cesium.Color.BLUE);
                }
                if (drawing) {
                    if (Cesium.defined(lastColor) && lastColor.equals(Cesium.Color.BLUE)) {
                        positions.push(cartesian);
                    } else {
                        reset(lastColor, positions);
                        draw(color, positions);
                    }
                }
            }

            // are we drawing on one of the 3D models
            if (Cesium.defined(pickedObject) &&
                 ((pickedObject.id === ground) || (pickedObject.id === milkTruck))) {
                var penultimateColor = colors[length - 2];

                if (pickedObject.id === ground) {
                    color = Cesium.Color.GREEN;
                } else {
                    color = Cesium.Color.ORANGE;
                }
                pushColor(color, colors);

                if (drawing) {
                    if (lastColor.equals(Cesium.Color.BLUE)) {
                        reset(lastColor, positions);
                        draw(color, positions);
                    } else if ((Cesium.Color.GREEN.equals(lastColor) &&
                                Cesium.Color.ORANGE.equals(penultimateColor)) ||
                                (Cesium.Color.ORANGE.equals(lastColor) &&
                                Cesium.Color.GREEN.equals(penultimateColor))) {
                        positions.pop();
                        reset(penultimateColor, positions);
                        draw(lastColor, positions);
                        colors.push(color);
                    } else {
                        positions.push(cartesian);
                    }
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function pushColor(color, colors) {
    var lastColor = colors[colors.length - 1];
    if (!Cesium.defined(lastColor) || !color.equals(lastColor)) {
        colors.push(color);
    }
}

function reset(color, currentPositions) {
    viewer.entities.add({
        polyline : {
            positions : new Cesium.CallbackProperty(function() {
                return currentPositions;
            }, false),
            material : color,
            width : 10
        }
    });
    positions = [];
    viewer.entities.remove(polyline);
}

function draw(color, currentPositions) {
    polyline = viewer.entities.add({
        polyline : {
            positions : new Cesium.CallbackProperty(function() {
                return currentPositions;
            }, false),
            material : color,
            width : 10
        }
    });
}

camera.flyTo({
    destination : new Cesium.Cartesian3(
        -1990688.2412034054,
        -4746189.37573292,
        3756554.691309811),
    orientation : {
        heading : 5.57769772317312,
        pitch : -0.4357678642191547,
        roll : 6.28089541612804
    }
});

Sandcastle.addToolbarButton('Hide/Show Entities', function() {
    milkTruck.show = !milkTruck.show;
    ground.show = !ground.show;
});

// adding help text
var paragraph0 = document.createElement('p');
paragraph0.id = 'help0';
var node0 = document.createTextNode("To start drawing, left click and move mouse. Left click");
paragraph0.appendChild(node0);

var paragraph1 = document.createElement('p');
paragraph1.id = 'help1';
var node1 = document.createTextNode("again to stop drawing. Right click to mark the altitude.");
paragraph1.appendChild(node1);

var element = document.getElementById('toolbar');
element.appendChild(paragraph0);
element.appendChild(paragraph1);
document.getElementById('help0').style.fontSize = '16px';
document.getElementById('help1').style.fontSize = '16px';