星图时空

切换日光/暗黑模式

获取 Mars3D ​

这里，我们以 CDN 方式获取，如： unpkg.com，介绍如何快速安装。

引入 Mars3D ​

新建一个目录来存放代码文件，如 D:\mars3d-study\01-快速入门, 通过 VS Code 打开此项目目录。

在项目目录下新建一个 index.html 文件，内容如下：

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!--引入cesium基础lib-->
    <link
      href="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Cesium.js"
      type="text/javascript"
    ></script>
    <!--引入mars3d库lib-->
    <link
      href="https://unpkg.com/mars3d@3.5.5/dist/mars3d.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d@3.5.5/dist/mars3d.js"
      type="text/javascript"
    ></script>
  </head>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!--引入cesium基础lib-->
    <link
      href="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Cesium.js"
      type="text/javascript"
    ></script>
    <!--引入mars3d库lib-->
    <link
      href="https://unpkg.com/mars3d@3.5.5/dist/mars3d.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d@3.5.5/dist/mars3d.js"
      type="text/javascript"
    ></script>
  </head>
</html>

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

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

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

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

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

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars3d</title>
    <!--引入cesium基础lib-->
    <link
      href="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Cesium.js"
      type="text/javascript"
    ></script>
    <!--引入mars3d库lib-->
    <link
      href="https://unpkg.com/mars3d@3.5.5/dist/mars3d.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d@3.5.5/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>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars3d</title>
    <!--引入cesium基础lib-->
    <link
      href="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d-cesium@1.105.0/Build/Cesium/Cesium.js"
      type="text/javascript"
    ></script>
    <!--引入mars3d库lib-->
    <link
      href="https://unpkg.com/mars3d@3.5.5/dist/mars3d.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mars3d@3.5.5/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>

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