Ceisum实时获取后台数据 实时更新实体位置信息且实现实体转向功能

最新推荐文章于 2024-09-21 16:23:50 发布
最新推荐文章于 2024-09-21 16:23:50 发布
阅读量4.3k 收藏 37
点赞数 2
分类专栏： Cesium
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangwqi/article/details/106714908
版权

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

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

PS：该方法实体经纬度超过正负180，90时需进行坐标计算转为正负180,90范围内的坐标后实体转向才正常；本文未进行处理

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true,
  sceneMode: 2, // 初始场景模式
    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 : 1,
                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 _;
})();
// 模型转向-经纬度求与正北方向的夹角（方向角）
function getAngel(A, B) {
    var dx = (B.m_RadLo - A.m_RadLo) * A.Ed;
    var dy = (B.m_RadLa - A.m_RadLa) * A.Ec;
    var angle = 0.0;
    angle = Math.atan(Math.abs(dx / dy)) * 180. / Math.PI;
    var dLo = B.m_Longitude - A.m_Longitude;
    var dLa = B.m_Latitude - A.m_Latitude;
    if (dLo > 0 && dLa <= 0) {
        angle = (90 - angle) + 90;
    } else if (dLo <= 0 && dLa < 0) {
        angle = angle + 180;
    } else if (dLo < 0 && dLa >= 0) {
        angle = (90 - angle) + 270;
    }
    return angle;
}
function MyLatLng(longitude, latitude) {
    var Rc = 6378137;
    var Rj = 6356725;
    var m_LoDeg, m_LoMin, m_LoSec;
    var m_LaDeg, m_LaMin, m_LaSec;
    var m_Longitude, m_Latitude;
    var m_RadLo, m_RadLa;
    var Ec;
    var Ed;
    m_LoDeg = longitude;
    m_LoMin = Number.parseInt((longitude - m_LoDeg) * 60);
    m_LoSec = (longitude - m_LoDeg - m_LoMin / 60.) * 3600;
    m_LaDeg = latitude;
    m_LaMin = Number.parseInt((latitude - m_LaDeg) * 60);
    m_LaSec = (latitude - m_LaDeg - m_LaMin / 60.) * 3600;
    m_Longitude = longitude;
    m_Latitude = latitude;
    m_RadLo = longitude * Math.PI / 180.;
    m_RadLa = latitude * Math.PI / 180.;
    Ec = Rj + (Rc - Rj) * (90. - m_Latitude) / 90.;
    Ed = Ec * Math.cos(m_RadLa);
    return {
        m_RadLo: m_RadLo,
        m_RadLa: m_RadLa,
        m_Longitude: m_Longitude,
        m_Latitude: m_Latitude,
        Ed: Ed,
        Ec: Ec
    }
}
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,
        rotation:0获取或设置以弧度为单位的旋转角度。
    },
    "position": {
        "cartographicDegrees": [ 2.87826541800007, 3.956799, 0.0,]
    }
}]; 
var c2 = new Cesium.CzmlDataSource();
viewer.dataSources.add(c2.load(czml2));
// 动态赋值
var i = 3.956799;
var a = 20;
var b=2.87826541800007;
var rotationArr=[2.87826541800007,3.956799];
var realTimeClData=setInterval(function() {
    i+= 10.001*Math.random();
    b+=10.001*Math.random();
    a+= 10;
    //图标：更新czml坐标
    czml2[1].position.cartographicDegrees = [b,i,0];
    rotationArr.push(b, i);
    if(rotationArr.length>4){
      rotationArr.splice(0,2);
    }
    if(rotationArr.length==4){
      var ag = getAngel(MyLatLng(rotationArr[0],rotationArr[1]), MyLatLng(rotationArr[2],rotationArr[3]));
      czml2[1].billboard.rotation = -ag * Math.PI / 180;
    }
    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.push(cartesian);
        }
    }
},2000);
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,
         rotation:0获取或设置以弧度为单位的旋转角度。
    },
    "position": {
        "cartographicDegrees": [ 118.87826541800007, 30.956799, 0.0,]
    }
}]; 
function getAngel(A, B) {
    var dx = (B.m_RadLo - A.m_RadLo) * A.Ed;
    var dy = (B.m_RadLa - A.m_RadLa) * A.Ec;
    var angle = 0.0;
    angle = Math.atan(Math.abs(dx / dy)) * 180. / Math.PI;
    var dLo = B.m_Longitude - A.m_Longitude;
    var dLa = B.m_Latitude - A.m_Latitude;
    if (dLo > 0 && dLa <= 0) {
        angle = (90 - angle) + 90;
    } else if (dLo <= 0 && dLa < 0) {
        angle = angle + 180;
    } else if (dLo < 0 && dLa >= 0) {
        angle = (90 - angle) + 270;
    }
    return angle;
}

function MyLatLng(longitude, latitude) {
    var Rc = 6378137;
    var Rj = 6356725;
    var m_LoDeg, m_LoMin, m_LoSec;
    var m_LaDeg, m_LaMin, m_LaSec;
    var m_Longitude, m_Latitude;
    var m_RadLo, m_RadLa;
    var Ec;
    var Ed;
    
    m_LoDeg = longitude;
    m_LoMin = Number.parseInt((longitude - m_LoDeg) * 60);
    m_LoSec = (longitude - m_LoDeg - m_LoMin / 60.) * 3600;
    m_LaDeg = latitude;
    m_LaMin = Number.parseInt((latitude - m_LaDeg) * 60);
    m_LaSec = (latitude - m_LaDeg - m_LaMin / 60.) * 3600;
    m_Longitude = longitude;
    m_Latitude = latitude;
    m_RadLo = longitude * Math.PI / 180.;
    m_RadLa = latitude * Math.PI / 180.;
    Ec = Rj + (Rc - Rj) * (90. - m_Latitude) / 90.;
    Ed = Ec * Math.cos(m_RadLa);
    return {
        m_RadLo: m_RadLo,
        m_RadLa: m_RadLa,
        m_Longitude: m_Longitude,
        m_Latitude: m_Latitude,
        Ed: Ed,
        Ec: Ec
    };
}
// 动态赋值
var i = 30.956800;
var a = 20;
var b=118.8774481050001;
var czmlBox=[];
var dataSourceBox=[];
var rotationBox=[];
var ii = [];
var bb = [];
for (var j = 0 ; j < ec; j++){
    ii.push(i);
    bb.push(b);
    rotationBox.push([ii[i],bb[i]]);
    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();
        rotationBox[i].push(bb[i],bb[i]);
        if(rotationBox[i].length>4){
          rotationBox[i].splice(0,2);
        }
        if(rotationBox[i].length==4){
          var ag = getAngel(MyLatLng(rotationBox[i][0],rotationBox[i][1]), MyLatLng(rotationBox[i][2],rotationBox[i][3]));
          czmlBox[i][1].billboard.rotation = -ag * Math.PI / 180;
        }
		//图标
		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);
});

 

实时更新雷达位置

var viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});
var i = 30.956799;
var a = 20;
var b=118.87826541800007;
var position=[b,i,0];
var CircleLineBox=[];
var realTimeClData=setInterval(function() {
	if(CircleLineBox){
		CircleLineBox.forEach(item=>{
			viewer.entities.remove(item)
		})
		CircleLineBox=[]
	}
	for (var i = 0 ; i < 5; i++){
		position[0]+=10.001*Math.random();
		position[1]+=10.001*Math.random();
		//viewer.entities.removeAll();
		var circle=viewer.entities.add({
		  position: Cesium.Cartesian3.fromDegrees(position[0],position[1]),//以度为单位
		  ellipse : {
			  semiMinorAxis :300000,//椭圆的短长轴的长度 以米为单位
			  semiMajorAxis :300000,
			  // height: itemParam.Circle.Altitude,//椭球上方的高度（以米为单位)
			  material : Cesium.Color.RED.withAlpha(0.5)
		  }
		});
		CircleLineBox.push(circle)
	};
}, 2500);
Sandcastle.addToolbarButton('清除计时器', function() {
   clearInterval(realTimeClData);
});

cesium实时更新数据实现实体运功

 cesium在二维地图中移动实体

Cesium基于czml的model模型转向

Cesium基于czml billboard的模型转向

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

前端杨小白
关注
专栏目录
cesium 加载gltf并实时改变位置 SampledProperty方式
AllBluefm的专栏
04-02 1148
1、知道车辆所有轨迹的点坐标，用entity方式添加模型，position用SampledPositionProperty记录每个点的时间和位置，并设置好clock。业务描述：在场景中添加一个车辆，并实时改变车辆的位置，可选方案比较多，根据实际情况有不同的实现方式。3、只知道当前位置的坐标。2、知道车辆所有轨迹的点坐标，采用CZML方式。
cesium实时捕获entity实体移动的坐标
zhu_zhu_xia的博客
10-19 3918
viewer.clock.onTick.addEventListener(function(clock){ varcurtime= viewer.clock.currentTime; //笛卡尔坐标 varpos=entity._position.getValue(curtime,null); varcartographic=Cesium.Ellipsoid.WGS84.cartesianToCart...
Ceisum实时获取后台数据 实时更新实体位置信息
最新发布
2401_87288802的博客
09-21 474
Sandcastle.addToolbarButton(‘清除计时器’, function() {Sandcastle.addToolbarButton(‘清除计时器’, function() {// 记录线的坐标，PolyLinePrimitive实体类监听的坐标。// 添加初始化数据（positions、poly）// 记录线的所有实体对象。
Ceisum实时获取后台数据 实时更新实体位置信息，web开发源码
2401_84097883的博客
04-03 622
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！[外链图片转存中…(img-KdzbeaSu-1712086247396)][外链图片转存中…(img-ioyBWVEo-1712086247396)]
ceisum怎么实现获取框选范围里的所有实体
09-21
如果你想通过Ceisum获取文档中被框选范围内的所有实体，这通常涉及到"实体提取"功能。在Ceisum中，你可以按照以下步骤操作： 1. **初始化 Ceisum**：首先需要安装并导入Ceisum库，例如在Python中，你可以这样做： ...
cesium获取模型实时坐标_Cesium获取鼠标点击位置（PickPosition）
weixin_35432846的博客
02-23 2933
cesium学习了这么长时间，有时候写鼠标点击事件时，想获取鼠标点击点位置，发现情况很多。比如以下情形：1获取鼠标点的对应椭球面位置2获取加载地形后对应的经纬度和高程3获取倾斜摄影或模型点击处的坐标4获取点击处屏幕坐标......发现不同场景对坐标需要不一致，因此花费了一点时间，学习下cesium的鼠标点击位置的获取api接口，看了官方文档和对应的示例，我总结了cesium提供以下几种接口(可能还...
cesium实时轨迹、自动变向
08-01
Cesium实时轨迹、点击运动、插值坐标、轨迹回放。
cesium实时更新数据实现实体运功
yangwq的博客
02-05 7535
var viewer = new Cesium.Viewer('cesiumContainer', { infoBox : false, selectionIndicator : false, shadows : true, shouldAnimate : true }); var czml = [{ "id": "document", "n...
Cesium 接受websocket数据，并实时展示姿态（无人机监测系统）
资深三维GIS开发
08-14 6169
最近做了个websocket的数据实时更新项目，通过接受websocket的数据，来实时更新无人机的位置以及姿态。 其中前端的ui用的是layui。 以下是部分效果图： 1、数据推送 2、数据连接： 3、无人机姿态展示： 以上即为一个完整的过程，从数据的发送--接受--实时动态展示。 以下说下代码和部分原理： websocket的连接： 这部分就不说了，就是简单的数据推送的过程。 下面说下三维的原理： data为每次推送过来的数据数组，我会遍历这个数据。 根据..
Mapbox GL JS 根据指定的点在地图上标记一个指定半径（KM）的圆形区域
qq_32565543的博客
10-30 4461
需求描述： 小明在使用mapbox-gl进行开发时，需要实现用户指定地图上的一个点，然后根据这个点，突出显示以其为中心的一定半径的圆形区域。半径可以为小明指定的千米数。 具体实现点击产生点的功能就不描述了，这里主要描述产生圆形区域的方法。 1. 构造函数：输入中心点经纬度，和半径大小（KM），以及点数。 var createGeoJSONCircle = function(center, rad...
cesium 实时轨迹
God's asylum的博客
09-04 1028
运用cesium中model和polyline添加模型和轨迹线，用CallbackProperty方法来实时改变经纬度。
cesium 实时传参更新模型的位置和姿态
weixin_30299539的博客
02-22 2247
html <!DOCTYPE html> <html> <head> <title> sesium Demo </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...
cesium实体移动（折线，圆，多边形带边框）
m0_48353529的博客
02-03 1972
Cesium.Cartesian3.subtract计算出鼠标移动的笛卡尔分量，再用原本的圆的位置加上这个分量得到新的位置更新到圆的polyline上以及圆心上。同理折线和多边形也是如此。圆的移动就是把圆心赋值为鼠标当前位置，但是实体的outline宽度不生效后我们改用的polyline来代替边框，那么我们要做的就不仅是改变圆心，还有边框的位置同样需要改变。折线以及多边形都是通过改变polyline的数组改变位置。计算两个笛卡尔的分量差。计算两个笛卡尔的分量和。
Cesium orientation 和 设置初始角度
zhengshaofeng1的专栏
02-03 9262
一. Cesium orientation orientation-相机镜头对准的方法. heading-代表镜头左右方向,正值为右,负值为左,360度和0度是一样的 pitch-代表镜头上下方向,正值为上,负值为下. roll-代表镜头左右倾斜.正值,向右倾斜,负值向左倾斜 二. 设置初始化角度 1.先用鼠标手动调整出你想要的角度 这里viewer是new出来的地图实例 打印出你调整好位置的实例的参数 console.log(viewer.scene.camera.heading); con..
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值