这次做了一个cesium中小车沿路径动态运行的小代码。
需要的数据就是小车glb模型(cesium有自带),多个路径的点坐标(经纬度即可)
中间出现了几个问题值得记录。
1.首先是czml中坐标的问题。
czml中的position官方解释是:Defines a position. The position can optionally vary over time.
其中位置坐标有很多可选的形式,分别是cartesian ,cartographicRadians,cartographicDegrees,cartesianVelocity。也就是说,position的坐标只支持这些方式。
这里是网址:https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Position
2.由于小车路径是在有地形的时候运行,所以这个路径就需要高度信息,cesium中有自带的检测地形高度方法。sampleTerrainMostDetailed(terrainProvider, positions)。
可以看到,sampleTerrainMostDetailed(terrainProvider, positions)中的positions要求是 Array.,所以给定的位置数据必须要转换成Cartographic。
这里就有必要说一下两个易混的经纬度,CartographicRadiansValue,CartographicDegreesValue。
CartographicRadiansValue:是根据弧度指定的坐标。WGS84大地测量位置,指定为[Longitude, Latitude, Height],其中经度和纬度以弧度表示,高度以米为单位。
CartographicDegreesValue:是根据度指定的坐标。WGS84大地测量位置,指定为[Longitude, Latitude, Height],其中经度和纬度以度为单位,高度以米为单位。
我的代码中先用 Cesium.Cartographic.fromDegrees(103.667886, 32.051531) 把数据转换成Cartographic。要注意转换后对象的值将以弧度为单位!!!
这个地方稍有不注意就会犯错,导致线路加载不出来。
然后通过Cesium.sampleTerrainMostDetailed(terrainProvider, positions);得到指定经纬度的高度信息,然后加载到czml里即可。
3.是异步编程问题。
js中的异步编程,通俗的解释一下就是从主线程发射一个子线程来完成任务。异步编程有回调函数,但是回调函数有些不好用的地方,所以大多都是用promise。这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。本代码中的Cesium.when(promise, function (updatedPositions) {}需要异步调用完成之后才能加载到czml中,updatedPositions就是var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, positions);所返回的值。
4.最后就是小车的方向问题Orientation。小车模型的方向需要进行制定,不然朝向与线路是堆不起来的。
viewer.dataSources.add(dataSource).then(function(ds){
var s = ds.entities.getById("CesiumMilkTruck");
s.orientation =new Cesium.VelocityOrientationProperty(s.position);
});
通过这个代码引入czml并且为小车实体添加VelocityOrientationProperty方法使其自动定向。
至此,这个功能已经完整的实现了,现在在较平坦的地方走的话效果会比较好,如果在山路中走效果还是有待商榷,下面这几天我主要研究一下如何在山路中使其效果变好。
源码发在github上了 ,有需要的可以自取哈。
https://github.com/mst272/dynamic-vehicle-in-cesium