SceneView沿线漫游编程实现

1
分享 2020-09-25
前言
    使用ArcGIS API for JavaScript 4.x开发的三维应用程序中,沿线漫游一直是一个热门的功能。我曾经被用户和合作伙伴问过多次如何实现,我只能给出理论性的回答并没有实地编写这一功能的代码。今天恰好有机会写了一下。基础部分借鉴了已退役大神@swaggyP的github开源项目
https://github.com/swaggyPYang/esridemo/tree/master/wander
 
正文
    开源项目已完成了遍历线几何的点并且操作view.goTo点的功能。基于已有项目,只需实现当前视角Camera朝径向改变其朝向即可。
原始代码
func_arr = [];
for (var r = 0; r < n.length; r++) func_arr[r] = e(n[r], this.opt);

在遍历折线的所有节点的过程中,可以通过当前点与下一个点的坐标,得到这个有向线段的方向角。
hh=Math.round(Math.atan((n[r+1][0]-n[r][0])/((n[r+1][1]-n[r][1])/0.823)) / (Math.PI / 180))

处理异常情况。上面的算法在方向位于第三象限的时候,使计算结果方向角等于heading+180。
最终代码为:
                for (var r = 0; r < n.length; r++){ 
//根据n[r]和n[r+1]求camera的角度
var hh;
if(r+1!=n.length){
console.log(n[r+1]);
hh=Math.round(Math.atan((n[r+1][0]-n[r][0])/((n[r+1][1]-n[r][1])/0.823)) / (Math.PI / 180))
if(hh>0){hh=hh+180}
console.log(hh)
func_arr[r] = e({
center:n[r],
heading:hh,
zoom:16,
tilt:t.vw.camera.tilt
}, this.opt);
//t.vw.camera.heading=hh;
}else{
func_arr[r] = e(n[r], this.opt);
}
}

 
最终效果
yanxianmanyou.gif

 

6 个评论

哇哦
实现很棒,不过实际项目中建议最好还是先对路线折点前后进行加密插点,这样漫游效果更平滑更柔顺
请教一下大佬,知道在对折现进行加密插点的时候采取什么样的方式比较好?
试试turf.js 里面有把直线按照固定间隔生成点坐标的函数
最新版本API构造自定义类 参考 https://developers.arcgis.com/javascript/latest/implementing-accessor/#mixins-with-accessor
define(["esri/core/Accessor"],
( Accessor ) => {

const Wander = Accessor.createSubclass({
declaredClass: "custom.Wander",

constructor: function(n) {
this.vw = n.view,
this.line = n.line,
this.opt = n.option
},

properties: {
vw: {},
line: {},
opt: {}
},
do: function() {
//主要代码
}

});
return Wander;
});

要回复文章请先登录注册