在阅读本节前，建议您已阅读：

• 获取 mirage2d SDK 类库,了解 sdk 的不同下载及安装方式

  再尝试将 mirage2d 集成到自己的项目中。

1. 引入mirage2d类库

可以根据您自己的技术栈使用情况进行下载或引入 mirage2d 库到自己的项目中去使用。

方式 1：head 静态资源方式引入

在 html 的 head 标签中引入 Cesium 官方包和 mirage2d 包相关资源，此方法比较简单，不会出现各类集成问题，引入资源后在代码即可通过window.mirage2d来使用相关 mirage2d 类及方法。

方式 2： import 方式导入

使用 Node 环境下的现代 web 前端技术栈时，可以使用 npm 等来安装 mirage2d 包并 import 导入后来使用。

//引入npm版本时
import "mirage2d/dist/mirage2d.css";
import * as mirage2d from "mirage2d";

//引入下载的本地版本时
// import './lib/mirage2d/mirage2d.css'
// import * as mirage2d from './lib/mirage2d/mirage2d.js'

//导入mirage2d插件（按需使用，需要先npm install）
import "mirage2d-echart";

//可以绑定下vue原型链，可以全局使用
Vue.prototype.mirage2d = mirage2d;

//在具体使用的vue等文件中
//直接使用 this.mirage2d 进行相关调用。

2. 新建 div 容器

在需要呈现地图的页面或相关组件中，加上 div 容器，并注意设置 div 的 css 高宽样式。

<div id="mirage2dContainer" class="mirage2d-container"></div>

3. 使用 mirage2d.Map 方法创建地图

使用Map 地图类类创建二维地图场景。

var mapOptions = {}; //支持的参数请看API文档：http://www.miragemap.cn/api/Map.html
var map = new mirage2d.Map("mirage2dContainer", mapOptions);

运行效果

新窗口查看