场景基础
在应用开发中,场景通常指的是应用中的不同页面或者功能模块。
每个场景可以包含一组图层和交互组件,用于展示特定的内容和实现特定的功能,我们可以通过创建不同的场景来组织应用的逻辑结构,实现不同的功能和交互效果。
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 属性来区分。