首页 / 浏览问题 / 三维GIS / 问题详情
保存了camera,使用setView或flyTo设置视角不管用
6EXP 2021年05月23日

过程是这样的,一开始进页面,加载工作空间后保存camera数据。

之后用鼠标移动和切换视角,再用原来保存的camera数据来回来初始视角。但使用setView或者flyTo均无法回到初始视角,测试后发现只要orientation里面有最原始的方位角数据,就无法切换视角。但使用自己随便写的方位角(比如:Cesium.Math.toRadius(120.0))就能切换视角。

但方位角一开始进页面就已经保存了,切换之前也看过数据并没有变化,怎么就无法切换呢?

使用的版本是SuperMap_iClient3D_10i(2020)_for_WebGL_26304.zip

1个回答

您好,我这边没能重现您的问题,是否方便提供给我一个能重现问题的demo,我这边测试一下
6,087EXP 2021年05月24日

setViewportByPosition(){

const _this = this

window.viewer.camera.setView({

destination : _this.cameraData.position,

orientation : {

heading : _this.cameraData.heading,

pitch : _this.cameraData.pitch,

roll : _this.cameraData.roll

}

});

},

值是下面这些,上面是事件

  1. x: -2774731.051093542
  2. y: 4759623.608142776
  3. z: 3215345.646069169
  1. heading: 6.150373132475655
  2. pitch: -0.6154252126724264
  3. roll: 6.283185307179586
我这边也是这样写的,我发您一段代码,您直接复制粘贴到示例代码里面去跑一下,点击地形隐藏是重写定位:<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>地形影像</title>
    <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
     <script src="./js/spectrum.js"></script>
    <script type="text/javascript" src="http://www.supermapol.com/earth/Build/Cesium/Cesium.js"></script>
    <script src="./js/config.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<div id="toolbar" class="param-container tool-bar">
    <div class="param-item">
        <label>地形显隐:</label>
        <label for="terrainVisible">地形显示</label>
        <input type="radio" name="isTerrainVisible" value="terrainVisible" id="terrainVisible" checked>
        <label for="terrainUnvisible">地形隐藏</label>
        <input type="radio" name="isTerrainVisible" value="terrainUnvisible" id="terrainUnvisible">
    </div>
    <div class="param-item">
        <label>颜色透明</label>
        <input class="colorPicker" size="8" data-bind="value: color,valueUpdate: 'input'" id="colorPicker">
    </div>
    <div class="param-item">
        <label>颜色透明容限</label>
        <input type="range" min="0" max="1" step="0.02" data-bind="value: tolerance,valueUpdate: 'input'" id="tolerance" style="display: block;width:200px;margin: 5px 0">
    </div>
</div>
    
<script>
function onload(Cesium) {
    var viewer = new Cesium.Viewer('cesiumContainer',{
        //创建地形服务提供者的实例,url为SuperMap iServer发布的TIN地形服务
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : URL_CONFIG.SiChuan_TERRAIN,
            isSct : true,//地形服务源自SuperMap iServer发布时需设置isSct为true
            invisibility:true
        }),
    });
    //添加SuperMap iServer发布的影像服务
    var layer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
        url : URL_CONFIG.SiChuan_IMG
    }));
            
            
            console.log(layer)
            
            
            var x = -1206939.1925299785
            var y = 5337998.241228442
            var z = 3286279.2424502545
            
            var heading = 1.4059101895600987
            var pitch = -0.20917672793046682
            var roll = 2.708944180085382e-13
            
    viewer.scene.camera.setView({
        destination : new Cesium.Cartesian3(x,y,z),
        orientation : {
            heading : heading,
            pitch : pitch,
            roll : roll
        }
    });
    var viewModel = {
        color : '#ffffff',
        tolerance : 0
    };
    $("#colorPicker").spectrum({
        color: "rgba(255,255,255)",
        showPalette: true,
        showAlpha: true,
        localStorageKey: "spectrum.demo",
        palette: palette
    });
    $("#colorPicker").on('change', function(event) {
        var selectedColor = Cesium.Color.fromCssColorString(event.target.value);
        layer.transparentBackColor = selectedColor;
    });
    Cesium.knockout.track(viewModel);
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);
    Cesium.knockout.getObservable(viewModel,'tolerance').subscribe(
        function(newValue) {
            layer.transparentBackColorTolerance = newValue;
        }
    );
    $("#terrainVisible").click(function(){
        viewer.terrainProvider._visible = true;
    });
    $("#terrainUnvisible").click(function(){
        viewer.scene.camera.setView({
        destination : new Cesium.Cartesian3(x,y,z),
        orientation : {
            heading : heading,
            pitch : pitch,
            roll : roll
        }
    });
        // viewer.terrainProvider._visible = false;
    });
    $('#loadingbar').remove();
    $('#toolbar').show();
}
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    onload(Cesium);
}
</script>
</body>
</html>
我用你的数值带进去就可以切换视角,但用我那个就不行,我那个只要写了方位角就切换不了了。
不用this,直接把值放进去呢?然后不用const用let试下
和this没有关系,我在切换视角前用debugger看过,数据没有变化
...