Skip to content

飞行

飞行路径构建

  1. 添加一条飞行路径,即向场景 JSON,oSubSceneData.fly.lines 数组添加路径

    Javascript
    oSubSceneData.fly={
        "sceneId":"4a8cbec3413417e58f227060e464c7c5",
        "lines":[]
    }
    //添加一条飞行路径
    var line={
        "id":"1730757e513417e310674b92267f33ad",//路径id
        "title":"飞行路径",//路径名称
        /*关键视点数组*/
        "points":[]
    }
    oSubSceneData.fly.lines.push(line)
    //向飞行路径中添加当前视点
    var oPos=viewer.camera.postion;
    var oDir=viewer.camera.direction;
    var oUp=viewer.camera.up;
    
    line.points.push({
        "id": "846f1897313417e3106751bdd54f5365",
        //视点id
        "title": "视点",
        //视点名称
        /*视点视角的基本信息*/
        "posx": oPos.x,
        "posy": oPos.y,
        "posz": oPos.z,
        "directionx": oDir.x,
        "directiony": oDir.y,
        "directionz": oDir.z,
        "upx": oUp.x,
        "upy": oUp.y,
        "upz": oUp.z,
    
        "timeInterval": 2,
        //视点的过渡时间,单位s
        "viewImg": "temp/scene/4a8cbec3413417e58f227060e464c7c5/image/e5b067e5febe4df7a155f26d3515a0be.jpg" //视点的缩略图路径
    });
  2. 修改、删除某条飞行路径

    修改数飞行路径的名称和视点仅修改对应数组的信息,最后随场景保存接口一并提交

  3. 获取飞行路径

    根据场景 id 获取飞行路径

    //localhost:8000/wish3dearth/api/scene/v1.0.0/getSceneJsonInfo

  4. 生成视点缩略图,并上传该图片,同时修改对应视点的缩略图路径(标注缩略图获取方法相同)

    JavaScript
    //截取canvas方形图片
    var oOriginImg = $("#visibleImg");
    var canvasWidth = $("canvas").width();
    var canvasHeight = $("canvas").height();
    var sImg = getRenderer();
    oOriginImg.off("load");
    oOriginImg.attr("src", sImg);
    oOriginImg.attr("style", "width:" + canvasWidth + "px;height:" + canvasHeight + "px;");
    oOriginImg.off("load").load(function () {
        //原始尺寸
        var orinWidth = oOriginImg.width();
        var orinHeight = oOriginImg.height();
        //计算比例
        var fProportion = parseFloat(orinHeight / orinWidth);
        //现在尺寸
        var iCurrentWidth = orinWidth;
        var iCurrentheight = orinHeight;
        if (fProportion >= 1) {
            iCurrentWidth = parseInt(orinWidth * 0.6);
            iCurrentheight = iCurrentWidth;
        } else {
            iCurrentWidth = parseInt(orinHeight * 0.6);
            iCurrentheight = iCurrentWidth;
        }
        var left = parseInt(orinWidth / 2) - parseInt(iCurrentWidth / 2);
        var top = parseInt(orinHeight / 2) - parseInt(iCurrentheight / 2);
        var crop_canvas = document.createElement('canvas');
        crop_canvas.width = 150;
        crop_canvas.height = 150;
        crop_canvas.getContext('2d').drawImage(oOriginImg.get(0), left, top, iCurrentWidth, iCurrentheight, 0, 0, 150, 150);
        var imgUrl = crop_canvas.toDataURL("image/jpeg");
    });
    
    //注意:每添加一个飞行视点或者删除一个视点都需要更新一下对应该条飞行路径的视点的缩略图,并操作oSubSceneData.deleteObj.images数组
  5. 上传飞行视点的缩略图

    上传接口参照//localhost:8000/wish3dearth/api/scene/v1.0.0/uploadTempImg

飞行路径的预览

  1. 初始化一条飞行路径

    JavaScript
    var cameraTrackControls = new LSGlobe.LSCameraTrackControls(viewer.scene);
  2. 向飞行路径中添加视点信息

    JavaScript
    //向飞行路径中添加单个视点
    //pos,direction,up这些值是保存视点中的相机位置信息
    //timeDelta 保存视点中的timeInterval值
    cameraTrackControls.getAllKeys().push(
    {
        destination: new LSGlobe.Cartesian3(posx,posy,posz),
        orientation: {
            direction: new LSGlobe.Cartesian3(directionx,directiony,directionz),
            up: new LSGlobe.Cartesian3(upx,upy,upz)
        },
        time: timeDelta
    });
    //添加视点完成该飞行路径初始化完成
  3. 飞行路径的操作

    JavaScript
    //开始飞行路径的飞行或继续飞行路径的飞行
    cameraTrackControls.play();
    
    //暂停飞行路径的飞行,从暂停视点开始飞行
    cameraTrackControls.pause();
    
    //清除飞行路径并停止飞行路径的飞行
    cameraTrackControls.clear();
    
    //停止飞行路径的飞行,再次飞行从第一个视点飞行
    cameraTrackControls.stop()

Released under the MIT License.