在阅读本节前，建议您已阅读：
- 获取 Mars2D SDK类库 ：了解sdk的不同下载及安装方式
- 开源仓库清单 ：下载一些模版代码阅读或参考下
再尝试将mars2d集成到自己的项目中。
# 1. 引入Mars2D类库
可以根据您自己的技术栈使用情况，获取 Mars2D SDK类库 进行下载或引入Mars2D库到自己的项目中去使用。
# 方式1：head静态资源方式引入
在html的head标签中引入Cesium官方包和Mars2D包相关资源，此方法比较简单，不会出现各类集成问题，引入资源后在代码即可通过window.mars2d来使用相关mars2d类及方法。
# 方式2： import方式导入
使用Node环境下的现代web前端技术栈时，可以使用npm等来安装mars2d包并import导入后来使用。
//引入npm版本时
import "leaflet/dist/leaflet.css"
import "leaflet"
import 'mars2d/dist/mars2d.css'
import * as mars2d from 'mars2d'
//引入下载的本地版本时
// import './lib/mars2d/mars2d.css'
// import * as mars2d from './lib/mars2d/mars2d.js'
//导入mars2d插件（按需使用，需要先npm install）
import 'mars2d-esri'
//可以绑定下vue原型链，可以全局使用
Vue.prototype.mars2d = mars2d;
//在具体使用的vue等文件中
//直接使用 this.mars2d 进行相关调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 2. 新建div容器
在需要呈现地图的页面或相关组件中，加上div容器，并注意设置div的css高宽样式。
<div id="mars2dContainer" class="mars2d-container"></div>
1
# 3. 使用mars2d.Map方法创建地图
使用Map地图类 (opens new window)类创建二维地图场景。
var mapOptions = {} //支持的参数请看API文档：http://mars2d.cn/api/Map.html
var map = new mars2d.Map('mars2dContainer', mapOptions)
1
2
2
# 运行效果
新窗口查看