Mars3D之快速上手

获取 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>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容