World Wind Web 系列(一):简单的案列

本教程是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、显示效果图
这里写图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值