Cesium-EarthSdk简单功能实现（二）——流动道路

最新推荐文章于 2024-07-29 15:47:37 发布

M1412

最新推荐文章于 2024-07-29 15:47:37 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： gis javascript 3d

本文链接：https://blog.csdn.net/u011505575/article/details/110236672

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Cesium-EarthSdk简单功能实现（二）——流动道路

效果：
在这里插入图片描述
代码： https://gitee.com/magic1412/earthsdk-vue-test

1、使用QGIS或ArcGIS将道路数据处理成如图所示json

oid为某条道路的唯一id，x和y分别为道路上节点的经纬度坐标

$C:\Users\ZHANGX~1\AppData\Local\Temp\企业微信截图_16064656694255.png$

2、加载并处理道路json

loadODLineData(dataFunc) {
  Cesium.Resource.fetchJson('./assets/json/line.json').then((data) => {
    var timeDuration = 5.0;
    var moveBaseDuration = 1.0;
    var type = null;
    var oldType = null;
    //点数组
    var ptList = []
    //线数组
    var busLines = [];
    data.map((item) => {
          type = item.oid
          if (type === oldType) {
            ptList.push([item.x * Math.PI / 180.0, item.y * Math.PI / 180.0])
          } else {
            if (oldType !== null) {
              busLines.push({
                positions: ptList,
                color: [Math.random() * 0.5 + 0.5, Math.random() * 0.8 + 0.2, 0.0, 1.0],
                width: 3.0,
                startTime: timeDuration * Math.random(),
                duration: moveBaseDuration + 1.0 * Math.random()
              });
            }
            ptList = []
            ptList.push([item.x * Math.PI / 180.0, item.y * Math.PI / 180.0])
          }
          oldType = type
        }
    )
    dataFunc(busLines, timeDuration);
  });
}

3，实例化Earthsdk的XE.Obj.ODLines类

this._odlines = new XE.Obj.ODLines(this._earth);
this._odlines.translucentPass = false;
//加载处理好的数据
this.loadODLineData((data, timeDuration) => {
  this._odlines.data = data;
  this._odlines.timeDuration = timeDuration;
  this._odlines.playing = true;
});