在前后端交互过程中，一般采用json作为通信协议，不过在特殊情况下:
比如最近项目中要求websocket短时间内频繁由后台推送大量数据给前端，由于网络原因很容易阻塞
– 这时就需要将数据包进行压缩/序列化&反序列化等处理以减小负载。经过考虑最终选择protobuf作为通信协议，先把数据进行序列化再发送…接收…处理

1. 首先是前后端协商定义数据格式 =>

cesium 中描述 entity 随时间动态变化时，必然要用到 property 插值，来对应时间和实体的状态，最近有用到这个属性，记录一下：

一般常用的插值有两种，一种是连续值插值SampleProperty，即给个时间段和一个状态区间，cesium会在区间内自己做平滑处理；
一种是枚举值插值TimeIntervalCollectionProperty，即一个时间段对应一个状态，不会做平滑插值。

假设现在有一个entity：

1
2
3
4
5
6
7
8
9

let myEntity = vie.entities.add({
  id: options.id,
  model: {
    uri: `gltf/car.gltf`,
    scale: 0.8,
    minimumPixelSize: 32,
    color: Cesium.Color.fromCssColorString('#ff0'),
  },
});

以下的source都是若干个 {时间，对应值组成的对象} 组成的数组list

最近项目中有遇到根据实时推送数据展示轨迹的需求，并且需要加载gltf、glb此类3D模型作为车辆点，所以在此需要结合threejs
但是若使用原生threejs的话结合地图开发不太友好，所以使用threebox作为桥梁可以减少很多心智负担。在这里做个小demo记录一下

1. 引入所需的 js 库

   1 2 3 4 5 6 7 8

   // mapboxgl <script type="text/javascript" src="xxx/mapbox-gl.js"></script> <link rel="stylesheet" type="text/css" href="xxx/mapbox-gl.css"/> // threebox <script type="text/javascript" src="xxx/threebox/threebox.js"></script> <link rel="stylesheet" type="text/css" href="xxx/threebox/threebox.css" /> // turf <script type="text/javascript" src="./turf/turf.min.js"></script>

前几天项目中有个需求是基于Vue框架使用CesiumJS库，需要创建里面gltf模型对应的Popup弹窗组件 来介绍一些关于这个entity的详细信息。

• 因为UI样式定制化较高，且可能多处需要调用，所以需要封装一个Popup组件。
• 并且如果使用原生html文本来一点点编写组件的话，开发起来会很呆 - -| 所以，改用创建并挂载一个Vue页面组件来实现这个弹窗页面。
• 接下来介绍一下实现步骤：