快速上手

4/1/2023

# 获取 Mars3D

Mars3D 支持多种下载方式,可以在下一篇教程获取 Mars3D SDK类库中查看所有方式。这里,我们以从 unpkg.com (opens new window)CDN 上获取为例,介绍如何快速安装。

关于这些文件的介绍,可以在下一篇教程获取 Mars3D SDK类库中了解更多信息。

# 引入 Mars3D

在电脑新建一个目录来存放代码文件,比如 D:\test\, 通过VS Code打开此项目目录。

VS Code的使用请参考开发环境搭建章节教程

在项目目录下新建一个 D:\test\index.html 文件,内容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /> 
    <!--引入cesium基础lib--> 
    <link href="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Cesium.js" type="text/javascript" ></script>
    <!--引入mars3d库lib-->
    <link href="https://unpkg.com/mars3d@latest/dist/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/mars3d@latest/dist/mars3d.js" type="text/javascript" ></script>   
  </head>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

在VS Code中打开这个 D:\test\index.html,通过右键 采用Open with live server方式 运行,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,并有正确的mars3d版本等信息提示,就可以进行下一步。

# 绘制一个简单的三维地球

在绘三维地球前我们需要为 Mars3D 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后,添加:

<body>
  <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
  <div id="mars3dContainer" class="mars3d-container"></div> 
</body>
1
2
3
4

然后就可以通过 new mars3d.Map (opens new window)方法初始化一个 mars3d 实例并通过传入 mapOptions 参数生成一个简单的三维地球,下面是完整代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars3d</title>
    <!--引入cesium基础lib--> 
    <link href="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/mars3d-cesium@latest/Build/Cesium/Cesium.js" type="text/javascript" ></script>
    <!--引入mars3d库lib-->
    <link href="https://unpkg.com/mars3d@latest/dist/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="https://unpkg.com/mars3d@latest/dist/mars3d.js" type="text/javascript" ></script>   
    <style>
      html, body, .mars3d-container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
    <div id="mars3dContainer" class="mars3d-container"></div>
    <script type="text/javascript">
      var mapOptions = {
        basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
      };
      var map = new mars3d.Map("mars3dContainer", mapOptions); //支持的参数请看API文档:http://mars3d.cn/api/Map.html
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这样你的第一个三维地球就诞生了!

新窗口查看
最后更新: 9/8/2023, 5:23:49 PM