获取 Mars3D
Mars3D 支持多种下载方式,可以在下一篇教程安装中查看所有方式。这里,我们以从 jsDelivr CDN 上获取为例,介绍如何快速安装。
关于这些文件的介绍,可以在下一篇教程安装中了解更多信息。
#引入 Mars3D
新建一个 index.html 文件,内容如下:
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><!--引入cesium基础lib--><linkhref="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css"rel="stylesheet"type="text/css"/><scriptsrc="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js"type="text/javascript"></script><!--引入mars3d库lib--><linkhref="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css"rel="stylesheet"type="text/css"/><scriptsrc="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js"type="text/javascript"></script></head></html>
打开这个 index.html,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,并有正确的mars3d版本等信息提示,就可以进行下一步。
#绘制一个简单的三维地球
在绘三维地球前我们需要为 Mars3D 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后,添加:
<body><!-- 为 Mars3D 准备一个定义了宽高的 DOM --><divid="mars3dContainer"class="mars3d-container"></div></body>
然后就可以通过 new mars3d.Map 方法初始化一个 mars3d 实例并通过传入 mapOptions 参数生成一个简单的三维地球,下面是完整代码。
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>mars3d</title><!--引入cesium基础lib--><linkhref="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css"rel="stylesheet"type="text/css"/><scriptsrc="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js"type="text/javascript"></script><!--引入mars3d库lib--><linkhref="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css"rel="stylesheet"type="text/css"/><scriptsrc="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js"type="text/javascript"></script></head><body><!-- 为 Mars3D 准备一个定义了宽高的 DOM --><divid="mars3dContainer"class="mars3d-container"></div><scripttype="text/javascript">varmapOptions={}//支持的参数请看API文档:http://mars3d.cn/api/Map.htmlvarmap=newmars3d.Map('mars3dContainer',mapOptions)</script></body></html>
这样你的第一个三维地球就诞生了!