第一章:开始

打开三维地球

下载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中,有时焦点被代码窗口捕获,导致不能切换模式,先隐藏代码窗口,再按切换键即可

系统层次

        

重要对象