本教程是World Wind Web系列的第一篇,主要介绍World Wind Web的简单应用。后期随着项目的进展,会陆续更新。
步骤
1、引入worldwind.js
新建一个HTML页面,引入worldwind.js库
<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js" type="text/javascript"></script>
2、在页面中加入一个 <canvas>
画布区域,并设置其区域的大小
<canvas id="canvasOne" width="1024" height="768">
Your browser does not support HTML5 Canvas.
</canvas>
3、在JavaScript中渲染图层和控制层
window.onload = function () {
// 为canvas 创建一个 WorldWindow
var wwd = new WorldWind.WorldWindow("canvasOne");
// 在WorldWindow的地球上添加一些图像层
wwd.addLayer(new WorldWind.BMNGOneImageLayer());
wwd.addLayer(new WorldWind.BMNGLandsatLayer());
// 在WorldWindow 上添加一个指南针,一个坐标显示和一些视图控制器
wwd.addLayer(new WorldWind.CompassLayer());
wwd.addLayer(new WorldWind.CoordinatesDisplayLayer(wwd));
wwd.addLayer(new WorldWind.ViewControlsLayer(wwd));
}
4、显示效果图