Cesium在线绘制PolyLine折线

最新推荐文章于 2025-07-09 16:31:23 发布

低热量薯条

最新推荐文章于 2025-07-09 16:31:23 发布

阅读量1.6w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签： Cesium WebGL JavaScript

本文链接：https://blog.youkuaiyun.com/bretgui88/article/details/79076354

Cesium 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用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);