World Wind Web 系列（一）：简单的案列

最新推荐文章于 2026-05-18 12:39:44 发布

翻译最新推荐文章于 2026-05-18 12:39:44 发布 · 4.5k 阅读

标签

#World Wind Web #NASA

收录于

翻译同时被 2 个专栏收录

7 篇文章

订阅专栏

World Wind

3 篇文章

订阅专栏

本文档介绍如何使用WorldWindWeb进行地图应用开发。主要内容包括引入worldwind.js库，在HTML中定义画布区域，以及通过JavaScript渲染地球图像层、指南针、坐标显示等组件。

本教程是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));
}