IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> 给cesium添加信号线 -> 正文阅读

[网络协议]给cesium添加信号线

使用的是websocket通信接收数据,每条数据来了之后需要更新点到点之间的连线
核心代码:
首次加载

 		    viewer.entities.add({
              name: "Purple straight arrow at height",
              id: ele.id + "" + ele.senderToConnect,
              polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(
                  ele.coordinates
                ),
                width: 3,
                arcType: Cesium.ArcType.NONE,
                material: new Cesium.PolylineArrowMaterialProperty(
                  Cesium.Color.PURPLE
                ),
              },
            });```

其中id为两个点的数据组成的id,作为唯一标识,方便后面再进行查找,如果不添加的话,cesium会添加一个随机id
例如:
在这里插入图片描述
添加后就是自己所添加的id:
在这里插入图片描述

可以根据viewer.entities.getById()方法拿到对应的实体;
后面新的数据到来之后进行更新:

			//	hasLine判断是否存在该实体,根据第一个添加进去的两个id
   			 hasLine = viewer.entities.getById(ele.id + "" + ele.senderToConnect);
 			if (hasLine) {
            hasLine.polyline.positions =
              Cesium.Cartesian3.fromDegreesArrayHeights(ele.coordinates);
          } 

整体代码:

  const entityInfo = JSON.parse(msg.data); //接收到的sockit信息
      // 添加信号线
      let hasLine = {};
      if (entityInfo.modelSignal) {
        entityInfo.modelSignal.forEach((ele) => {
          // console.log("信号线处理", Date.parse(new Date()));
          hasLine = viewer.entities.getById(ele.id + "" + ele.senderToConnect);
          if (hasLine) {
            hasLine.polyline.positions =
              Cesium.Cartesian3.fromDegreesArrayHeights(ele.coordinates);
          } else {
            viewer.entities.add({
              name: "Purple straight arrow at height",
              id: ele.id + "" + ele.senderToConnect,
              polyline: {
                positions: Cesium.Cartesian3.fromDegreesArrayHeights(
                  ele.coordinates
                ),
                width: 3,
                arcType: Cesium.ArcType.NONE,
                material: new Cesium.PolylineArrowMaterialProperty(
                  Cesium.Color.PURPLE
                ),
              },
            });
          }
        });
      }

其中数据格式为:
在这里插入图片描述
modelSignal数组中存放的是需要添加的信号线的信息,由两个点组成,
其中coordinates中的前三个元素为第一个点,后三个是第二个点;(这是cesium画线的方法所规定的)

效果:
在这里插入图片描述
随着数据不断更新,也会不断更新

  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2021-07-26 12:23:00  更:2021-07-26 12:24:43 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年4日历 -2024/4/24 8:39:17-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码