Cesium在线绘制PolyLine折线

本文介绍如何使用Cesium.CallbackProperty实现折线的实时绘制。通过监听鼠标点击和移动事件,更新PolyLine的位置属性,完成动态折线绘制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用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);





评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

低热量薯条

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值