场景基础

在应用开发中,场景通常指的是应用中的不同页面或者功能模块。

每个场景可以包含一组图层和交互组件,用于展示特定的内容和实现特定的功能,我们可以通过创建不同的场景来组织应用的逻辑结构,实现不同的功能和交互效果。

1. 初始化场景

我们使用 SDK 提供的 Scene 类创建三维场景,通过指定挂载的 dom 元素,能快速初始化一个三维场景:

  // 创建三维场景
  const scene = new ubm.Scene('app') // app 是场景挂载的dom节点的id

为了让场景全屏显示,可以给包含场景的 dom 元素(这里是 id=app 的 dom)指定相关的 css style:

  #app {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
  }

代码示例如下:

代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>场景demo</title>
  <style>
    html,
    body,
    #app {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    const scene = new ubm.Scene('app')
  </script>
</body>
</html>
扩展:我们也可以使用 SDK 提供的 Map 类创建二维视图,通过指定挂载的 dom 元素,快速初始化一个二维地图:
  // 创建二维地图 
  const map = new ubm.Map({
    map:  {
      basemap: 'tianditu-image'
    },
    container: "app"
  });

2. 查看模式

SDK 提供了两种场景查看模式:

  • 平面场景 local
  • 地球场景 global

可在初始化场景时,通过设置 viewingMode 属性来区分。

2.1 平面场景

代码
  const scene = new ubm.Scene('app', {
    viewingMode: "local",
  })

2.2 地球场景

代码
const scene = new ubm.Scene('app', {
  viewingMode: 'global',
})