Ceisum实时获取后台数据实时更新实体位置信息

var viewer = new Cesium.Viewer('cesiumContainer', {infoBox : false,selectionIndicator : false,shadows : true,shouldAnimate : true});var positions = [];var poly = undefined;var entityArr=[];var PolyLin

前端杨小白

7226人浏览 · 2020-05-27 19:04:25

前端杨小白 · 2020-05-27 19:04:25 发布

用定时器模拟实时获取后台数据当取到数据后实体同时移动到目标位置这种方式不再与Cesium时间关联

实现效果：每秒新增一个坐标；每秒实体运动到相应正确位置

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true,
    shouldAnimate : true
});
var positions = [];
var poly = undefined;
var entityArr=[];
var PolyLinePrimitive = (function(){
    function _(positions){
        this.options = {
            polyline : {
                show : true,
                positions : [],
                material : Cesium.Color.CORNFLOWERBLUE,
                width : 5,
                arcType : Cesium.ArcType.RHUMB,
            }
        };
        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);
        entityArr.push(this.options)
    };
    return _;
})();

var czml2 = [{
    "id": "document",
    "name":"CZML Path",
    "version": "1.0",
}, {
    "id": "path1",
    "name": "path with GPS flight data",
    "description": "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
    "availability": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
        "billboard":{
        "image":"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zyw56m65a+85by5XzFfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe3N0cm9rZTojMDAwMEZGO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDBGRjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxNS41LDUuMDQgMTIuNSwxMC4yMyAxOC41LDEwLjIzICIvPg0KPGxpbmUgY2xhc3M9InN0MSIgeDE9IjE1LjUiIHkxPSIxMC41IiB4Mj0iMTUuNSIgeTI9IjI2LjUiLz4NCjxsaW5lIGNsYXNzPSJzdDEiIHgxPSIxMi41IiB5MT0iMjYuNSIgeDI9IjE4LjUiIHkyPSIyNi41Ii8+DQo8bGluZSBjbGFzcz0ic3QxIiB4MT0iMTUuNSIgeTE9IjIwLjUiIHgyPSIxMi41IiB5Mj0iMjMuNSIvPg0KPGxpbmUgY2xhc3M9InN0MSIgeDE9IjE4LjUiIHkxPSIyMy41IiB4Mj0iMTUuNSIgeTI9IjIwLjUiLz4NCjwvc3ZnPg0K",
        "scale":0.2
    },
    "position": {
        "cartographicDegrees": [ 118.87826541800007, 30.956799, 0.0,]
    }
}]; 
var c2 = new Cesium.CzmlDataSource();
viewer.dataSources.add(c2.load(czml2));

// 动态赋值
var i = 30.956799;
var a = 20;
var b=118.87826541800007;
var realTimeClData=setInterval(function() {
    i+= 10.001*Math.random();
    b+=10.001*Math.random();
    a+= 10;
    //图标：更新czml坐标
    czml2[1].position.cartographicDegrees = [b,i,0];
    c2.process(czml2);
    //线：更新entities坐标
    var cartesian =Cesium.Cartesian3.fromDegrees( b, i, 0);
    if(positions.length == 0) {
        positions.push(cartesian.clone());
        positions.push(cartesian);
    }
    if(positions.length >= 2){
        if (!Cesium.defined(poly)) {
            poly = new PolyLinePrimitive(positions);
        }else{
            //positions.pop();
            //cartesian.y += (1 + Math.random());
            positions.push(cartesian);
            //只展示5条坐标数据
            //if(positions.length>5){
            //    positions.shift();
            //}
            console.log(positions.length,"positions");
        }
    }
}, 1000);
Sandcastle.addToolbarButton('清除计时器', function() {
   clearInterval(realTimeClData);
});

二维展示

三维展示

多个实体运动：实时加载数据更新位置信息

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true,
    shouldAnimate : true
});
var PolyLinePrimitive = (function(){
    function _(positions){
        this.options = {
            polyline : {
                show : true,
                positions : [],
                material : Cesium.Color.CORNFLOWERBLUE,
                width : 1,
                arcType : Cesium.ArcType.RHUMB,
            }
        };
        this.positions = positions;
        this._init();
    } 
    _.prototype._init = function(){
        var _self = this;
        var _update = function(){
			// 1秒将近100次的调用定义的positions数组，实时加载更新线的坐标位置!!!
            return _self.positions;
        };
        //实时更新polyline.positions
        this.options.polyline.positions = new Cesium.CallbackProperty(_update,false);
        viewer.entities.add(this.options);
    };
    return _;
})();
// 记录线的坐标，PolyLinePrimitive实体类监听的坐标
var positions = [];
// 记录线的所有实体对象
var poly = [];//undefined
// 测试实体条数
var ec =5;
// 添加初始化数据（positions、poly）
for (var i = 0; i < ec; i++){
    positions.push([]);
    poly.push(undefined);
}
var czml2 = [{
    "id": "document",
    "name":"CZML Path",
    "version": "1.0",
}, {
    "id": "path1",
    "name": "path with GPS flight data",
    "availability": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
        "billboard":{
        "image":"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i5Zyw56m65a+85by5XzFfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiDQoJIHk9IjBweCIgdmlld0JveD0iMCAwIDMyIDMyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMiAzMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe3N0cm9rZTojMDAwMEZGO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDBGRjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxNS41LDUuMDQgMTIuNSwxMC4yMyAxOC41LDEwLjIzICIvPg0KPGxpbmUgY2xhc3M9InN0MSIgeDE9IjE1LjUiIHkxPSIxMC41IiB4Mj0iMTUuNSIgeTI9IjI2LjUiLz4NCjxsaW5lIGNsYXNzPSJzdDEiIHgxPSIxMi41IiB5MT0iMjYuNSIgeDI9IjE4LjUiIHkyPSIyNi41Ii8+DQo8bGluZSBjbGFzcz0ic3QxIiB4MT0iMTUuNSIgeTE9IjIwLjUiIHgyPSIxMi41IiB5Mj0iMjMuNSIvPg0KPGxpbmUgY2xhc3M9InN0MSIgeDE9IjE4LjUiIHkxPSIyMy41IiB4Mj0iMTUuNSIgeTI9IjIwLjUiLz4NCjwvc3ZnPg0K",
        "scale":0.2
    },
    "position": {
        "cartographicDegrees": [ 118.87826541800007, 30.956799, 0.0,]
    }
}]; 
// 动态赋值
var i = 30.956800;
var a = 20;
var b=118.8774481050001;
var czmlBox=[];
var dataSourceBox=[];
var ii = [];
var bb = [];
for (var i = 0 ; i < ec; i++){
    ii.push(i);
    bb.push(b);
    czmlBox.push(czml2);
    var DataSource = new Cesium.CzmlDataSource();
    viewer.dataSources.add(DataSource.load(czml2));
    dataSourceBox.push(DataSource);
}
var realTimeClData=setInterval(function() {
    for (var i = 0 ; i < ec; i++){
        ii[i] += 10.001*Math.random();
        bb[i] += 10.001*Math.random();
		//图标
		czmlBox[i][1].position.cartographicDegrees = [bb[i],ii[i],0];
		dataSourceBox[i].process(czmlBox[i]);
		//线
		var cartesian =Cesium.Cartesian3.fromDegrees( bb[i], ii[i], 0);
		if(positions[i].length == 0){
			positions[i].push(cartesian.clone());
			positions[i].push(cartesian);
		}
		if(positions[i].length >= 2){
			if (!Cesium.defined(poly[i])) {
				poly[i] = new PolyLinePrimitive(positions[i]);
			}else{
                if(positions[i].length>5){
                    positions[i].shift();
                }
				positions[i].push(cartesian);
			}
		}
    }
},2000);
Sandcastle.addToolbarButton('清除计时器', function() {
   clearInterval(realTimeClData);
});

二维展示