第一章:开始
下载Drawsee平台,解压缩,其中有jslib目录,按次序引用两个js库。
页面上放置一个div作为容器,创建EarthViewer对象,等init()函数完成后,调用open函数。 采用这样的初始化方式,是为了支持WebGPU的异步初始化,系统会根据浏览器自动选择WebGL或者WebGPU模式。
全部网页代码如下,系统缺省打开Bing影像。
提示:必须使用网页发布方式浏览,比如"localhost/mySample.html";文件管理器中直接点击浏览, 会由于浏览器的安全机制限制,无法创建后台工作线程而出错。
<html>
<head>
<script src="./jslib/drawsee.babylon.min.js"></script>
<script src="./jslib/drawsee.min.js"></script>
</head>
<body>
<div id="earthDiv"/>
<script language="javascript">
var earthViewer = new Drawsee.EarthViewer("earthDiv");
earthViewer.init().then(function () {
earthViewer.open();
});
</script>
</body>
</html>
我们将使用Playground作为学习代码的展示,其中只包括核心执行代码,省略了html网页引用其他部分
Playground支持自动列出方法,鼠标指取就有帮助提示,你可以修改代码并重新执行
EarthViewer有一些属性,用于控制显隐
earthViewer.isStatusBarVisible 是否显示底部状态栏
earthViewer.isNorthPointerVisible 是否显示指北针
earthViewer.isSkyVisible 是否绘制大气层
earthViewer.isAxisVisible 是否显示直角坐标轴
地图漫游:按住鼠标左键拖动地图。快速拖动并马上放开,会有惯性滑动;上下左右方向键也可移动
地图缩放:鼠标滚轮缩放地图,会根据滚轮速度自动加速;键盘+-号,用于小幅度缩放
地图旋转:有三种操作方式:
1. 按住鼠标右键不放并同时移动,将会旋转三维视角,松开即停止;
2. 单击鼠标右键并马上放开,就进入持续旋转操作模式。鼠标移动时视图会跟着旋转,点击任何鼠标键都会结束此模式。初次使用可能不习惯, 但这是出于人体工学设计,如果必须按住鼠标键旋转,长时间操作容易导致手指劳损
3. 使用键盘旋转,n向左,m向右,page up向上, page down向下
向北回正:鼠标左键单击右上角指北针
自动飞行:在右键旋转模式下,单击键盘上箭头,进入自动向前平飞模式。移动鼠标改变飞行方向和高度,滚轮拉近与中心点距离, 上下箭头加减速;单击任何鼠标键退出该模式。此模式通常用于一些简单飞行效果录屏,或者测试场景渲染效率
自动旋转:在右键旋转模式、或飞行模式中,当鼠标移动到窗口左右边缘区域时,保持鼠标不动, 水平视角会向该方向继续旋转,上下移动鼠标可以同时调整俯仰视角
手机触屏:单指触屏移动,拖动地图;双指触屏相向运动,缩放地图; 在屏幕右侧边缘区域上下滑动,竖直方向旋转;在底部边缘区域左右滑动,水平方向旋转
为方便开发员工作,Drawsee有开发模式。在地图窗口按下“shift+d”键,可以在普通模式和开发模式之间切换。 开发模式中,底部状态栏显示更多信息。通过热键,可在信息窗口获取相机参数,当前鼠标位置,激发屏幕跟踪线操作
提示:在Playground中,有时焦点被代码窗口捕获,导致不能切换模式,先隐藏代码窗口,再按切换键即可