当前位置: 首页 > Web前端 > JavaScript

基于Mars3D-Cesium第三方库的动态模型间连线

时间:2023-03-26 23:57:34 JavaScript

基于Mars3D/Cesium第三方库的模型间动态连接。随模型移动而移动”。Mars3D提供了绘图功能,简单来说就是可以通过鼠标拖动来改变模型在图层上的位置。所以提出的需求简化为——“鼠标拖动模型,以及之间的连接themodelsmovesasthemodelmoves”。这里模型移动的方式对后面的求解处理有很大的影响。首先说一下第一种求解失败的可能原因。选项1(Failure)的位置模型的位置使用PositionProperty,折线的位置使用PositionPropertyArray,array数组包含ReferenceProperty,这是为了让折线两端的位置依赖于模型的位置,这个方案可以成功显示连接,但是问题出在plotting上,调用提供的plotting函数时,会出现如图的error,在ReferenceProperty的api文档中,提到了这个functio仅当引用的属性为PositionProperty时n才有效。但是我们在第一次设置模型的位置时确实使用了PositionProperty。这里我猜测是plotting函数使用了CallbackProperty,回调的Object不再是PositionProperty类型,所以会报错。Mars3D的API并未开源,具体原因未知。方案二(成功)由于我们要使用Mars3D的api来实现我们的需求,所以我们需要另辟蹊径。第二种解决方案使用czml数据格式。czml数据配置项中的polyline/position属性有一个references选项,也可以用来实现位置依赖。"polyline":{"positions":{"references":["model1#position","model2#position"]}}新问题是:如何导入这个czml数据?Mars3D中提供了很多层,这些层有不同的功能。我们上面提到的绘图功能是基于graphicLayer的,但是graphicLayer不支持导入czml。Mars3D单独提供了czmlLayer来导入czml配置文件。因此采用“双层同步”的方案:在graphicLayer上绘制改变模型位置后,使用监听事件获取改变后的模型坐标,同步更新相应模型中的position属性内容czml配置文件,并更新czmlLayer图层。graphicLayer显示模型,czmlLayer中的配置项只记录模型的位置,不显示模型,只显示折线。简单来说,graphicLayer上的model和czmlLayer上的model其实是两个独立的实体,只是通过监听事件让它们的位置时刻保持一致。//模型绑定监听事件this.graphicLayer.getGraphicById("Firecar").on(mars3d.EventType.updatePosition,function(event){//console.log("位置改变了!",event)console.log(event.position.getValue(Cesium.JulianDate.fromDate(newDate('2022-06-1608:00:00'))))that.czml.forEach(function(value,index,array){if(value.id==='Firecar')value.position={"cartographicDegrees":(mars3d.LngLatPoint.fromCartesian(event.position.getValue(Cesium.JulianDate.fromDate(newDate('2022-06-1608:00:00'))))).toArray(false)}});//更新czml层that.czmlLayer.load()console.log(that.czmlLayer)})注意点:监听事件返回一个事件,有是事件中的一个监听位置属性,这个属性是一个callbackProperty,使用getValue方法传入任意时间值获取变化后的坐标,注意获取到的坐标是cartesian3,更新czml时,将cartesian3替换成数组,所以直线将正常显示。这里的代码只是一个提示,目的是分享解决方案。