Cesium-EarthSdk简单功能实现(二)——流动道路
效果:
代码: https://gitee.com/magic1412/earthsdk-vue-test
1、使用QGIS或ArcGIS将道路数据处理成如图所示json
oid为某条道路的唯一id,x和y分别为道路上节点的经纬度坐标
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;
});