Cesium在线绘制PolyLine折线

转：https://blog.youkuaiyun.com/bretgui88/article/details/79076354

使用Cesium.CallbackProperty可以实时更改Geometry.position等参数，从而达到绘制的效果。

 

1.封装PolyLine对象

var PolyLinePrimitive = (function(){
    function _(positions){
        this.options = {
            polyline : {
                show : true,
                positions : [],
                material : Cesium.Color.CORNFLOWERBLUE,
                width : 5
            }
        };
        this.positions = positions;
        this._init();
    }
 
    _.prototype._init = function(){
        var _self = this;
        var _update = function(){
            return _self.positions;
        };
        //实时更新polyline.positions
        this.options.polyline.positions = new Cesium.CallbackProperty(_update,false);
        viewer.entities.add(this.options);
    };
 
    return _;
})();

2.初始化

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var positions = [];
var poly = undefined;

3.鼠标监听事件

handler.setInputAction(function(movement){
    var cartesian = scene.camera.pickEllipsoid(movement.position,scene.globe.ellipsoid);
    if(positions.length == 0) {
        positions.push(cartesian.clone());
    }
    positions.push(cartesian);
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
handler.setInputAction(function(movement){
    var cartesian = scene.camera.pickEllipsoid(movement.endPosition,scene.globe.ellipsoid);
    if(positions.length >= 2){
        if (!Cesium.defined(poly)) {
            poly = new PolyLinePrimitive(positions);
        }else{
            positions.pop();
            cartesian.y += (1 + Math.random());
            positions.push(cartesian);
        }
    }
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
handler.setInputAction(function(movement){
    handler.destroy();
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);