Cesium在模型表面画线（polyline）

官网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';
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215