首页 / 浏览问题 / 三维GIS / 问题详情
如何通过界面调整S3M倾斜模型的位置。
23EXP 2023年01月24日

使用产品:SuperMap iClient3D for WebGL   操作系统:win10 x64
数据类型: s3m倾斜摄影数据
问题详细描述:我这里有个设计界面,能否通过调整界面上的经纬度和旋转参数,动态改变s3m倾斜模型的位置。
问题重现步骤:1、 通过viewer.scene.addS3MTilesLayerByScp()加载一个s3m倾斜模型 2、点击界面上经纬度,修改经纬度参数 3、三维场景内的s3m倾斜摄影模型位置随之改变。

界面如下:

1个回答

您好,想要前端改变倾斜模型的位置,有以下几种方法可以实现:

1.可以使用实体的方式添加模型
viewer.entities.add({
      id: "test",
      position: Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200),
      model: {
            uri: 'data/Cesium_Air.gltf'
             }
});

2.以实例化的方式添加模型
使用接口S3MInstanceCollection,在添加模型时,将界面填入的坐标位置和旋转参数传入,即可实现动态添加模型。
具体的参数说明可以参考我们相关博客:https://blog.csdn.net/supermapsupport/article/details/97913355

3.直接修改图层的坐标信息比如
 layer.lat = 38.12115876850175;  //纬度
 layer.lon = 117.04856986486317;  //经度
 layer.height = 100;    //高度
 layer.LoadingPriority = 2;    //设置加载的优先级模式为层优先加载模式
 layer.refresh();

如果您倾斜数据不是单个s3m模型,比较大,用方法1和方法2可能添加不全,性能不是很理想,建议您那边使用方法3;如果是单个小模型,您可以选择上述三种方法的一种来进行修改模型坐标。
840EXP 2023年01月28日
我对您给出的答案研究了一下,还有点问题想请教下。我这边的服务是s3m的缓存地址,这样的服务地址不能添加嘛?地址:http://39.170.82.136:8090/iserver/services/3D-yzcdywngx/rest/realspace/datas/Config/config 。

修改S3MTilesLayer位置可以通过修改其属性来实现,参考以下代码:

注意需要设置加载模式为层优先加载模式。

你提供的服务地址是通过iserver 9D发布的,倾斜入库应该也是早期版本进行的,所以用这个更改位置有问题,使用新版iserver与iDesktop处理倾斜的话,是可以改的。

您好,我试了,还是有bug啊。

1、移动位置后,定位过去还是原来的位置,没有定位到调整后的位置。

2、移动后模型加载不稳定,有时能加载出来,有时不能,很随机。

重现bug:将以下代码复制到SuperMap iClient3D 11i (2023)  beta  for Cesium\examples\index.html,覆盖所有的代码后运行。点击按钮【东移0.01度】、按钮【东移1度】、【定位至模型】可以调试。界面如下:

代码见

<!DOCTYPE html>
<html>

<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" />
  <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
  <script src="./webgl/config.js"></script>
  <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
  <script src="./webgl/js/config.js"></script>


  <style>
    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <button id="btn" style="position: absolute; left: 10px; top: 5px">
    东移0.01度
  </button>
  <button id="btn1" style="position: absolute; left: 100px; top: 5px">
    东移1度
  </button>
  <button id="location" style="position: absolute; left: 180px; top: 5px">
    定位至模型
  </button>
  <button id="showmodel" style="position: absolute; left: 260px; top: 5px">
    显示隐藏
  </button>
  <script type="text/javascript">
    function onload(Cesium) {
      var viewer = new Cesium.Viewer('cesiumContainer', {
        infoBox: false, //是否显示信息框(InfoBox)
      })

      var labelImagery = new Cesium.TiandituImageryProvider({
        mapStyle: Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务(经纬度投影)
        token: 'f3dd44f4f222f25c2fdeba995c43ab83',
      });
      viewer.imageryLayers.addImageryProvider(labelImagery);
      var scene = viewer.scene
      var s3mPromise = viewer.scene.addS3MTilesLayerByScp(
        'http://39.170.97.129:8090/iserver/services/3D-local3DCache-Config2/rest/realspace/datas/Combine/config',  //lat:44.93917176419239,lon:123.88419607891198

        {
          name: 'Combine',
          cullEnabled: false,
        }
      )

      Cesium.when(s3mPromise, (layer) => {
        viewer.flyTo(layer)
        console.log(layer, 'layer')

        // 东移0.01度
        var btn = document.querySelector('#btn')
        btn.addEventListener('click', function () {
          console.log('layer: ', layer);
          layer.lat = 44.93917176419239
          layer.lon = 123.89419607891198  // 东移0.01度
          layer.height = 100
          layer.LoadingPriority = 2
          layer.refresh()

          viewer.zoomTo(layer)
        })
        // 东移1度
        var btn1 = document.querySelector('#btn1')
        btn1.addEventListener('click', function () {
          layer.lat = 44.9388306985484
          layer.lon = 124.89419607891198 // 东移1度
          layer.height = 100
          layer.LoadingPriority = 2
          layer.refresh()

          viewer.zoomTo(layer)
        })

        // 定位至模型
        var location = document.querySelector('#location')
        location.addEventListener('click', function () {
          viewer.zoomTo(layer)
        })

        // 显示隐藏模型        
        var showmodel = document.querySelector('#showmodel')
        showmodel.addEventListener('click', function () {
          layer.visible=!layer.visible
        })
      })
    }




    if (typeof Cesium !== 'undefined') {
      window.startupCalled = true
      onload(Cesium)
    }
  </script>
</body>

</html>

...