Cesium在模型表面画线（polyline）

最新推荐文章于 2024-09-17 21:00:25 发布

GIS小虫

最新推荐文章于 2024-09-17 21:00:25 发布

阅读量3.4k

点赞数

分类专栏： cesium 文章标签：前端 javascript python

本文链接：https://blog.csdn.net/neuromancerr/article/details/127781838

版权

cesium 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

官网16年的老文章，依然好使，比那些复制来复制去的有用，原文
https://cesium.com/blog/2016/03/21/drawing-on-the-globe-and-3d-models/
下面贴一下原文机翻

在 2D 地图中，绘图工具用于以“John Madden”的方式绘制点、折线和多边形。在 3D 中，绘图工具通常以相同的方式使用 - 注释地球表面。
在这里插入图片描述
借助 Cesium 的 Scene.pick 和 Scene.pickPosition 函数，我们可以重新设想 3D 绘图工具，以允许用户在地形上绘图，在包括 glTF 模型在内的任何 3D 表面上绘图，并精确注释用户在 3D 中选择的位置。

在这篇简短的文章中，我们探索了使用 Cesium 构建 3D 绘图工具。在下面的屏幕截图中，请注意模型上绘制的多段线是如何在 3D 空间中的，即使模型是隐藏的。

完整的代码示例如下所示，可以复制并粘贴到 Sandcastle中。要绘制多段线，单击鼠标左键，拖动鼠标，然后再次单击鼠标左键。右键单击以添加带有特定点高度（以米为单位）的注释。

对于折线，一般的方法是使用 LEFT_CLICK 处理程序来跟踪绘图状态（我们是否在绘制折线？），并使用 MOUSE_MOVE 处理程序在状态正在绘制时更新折线。每次更新折线时，都会调用 Scene.pick 来识别正在绘制的对象（因为每个对象都有不同颜色的折线）并调用 Scene.pickPosition 来计算基于折线中新点的 3D 位置在鼠标光标的 2D 位置上。

为了最大限度地减少深度缓冲区伪影，例如稍微高于或低于表面的多段线，绘制了一条宽多段线。由于 Scene.pickPosition 需要 WebGL 扩展，我们检查 Scene.pickPositionSupported 以验证系统是否支持它。

高度注释是通过在 RIGHT_CLICK 处理程序中调用 Scene.pickPosition 来实现的，将返回的 Cartesian3 转换为 Cartographic，然后添加一个带有包含高度标签的实体。为了帮助避免混乱，标签是偏移的，并且多段线将标签连接到实际单击的点。

这个例子可以扩展成一个成熟的 3D 绘图工具，带有一个用于选择颜色和线宽、擦除等的 UI。这可以让用户在 3D 建筑物和车辆上标注感兴趣的区域。让我们知道您构建了什么！

示例代码

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain(),
    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';