# @istrong/dmap

### 安装

```bash
npm i @istrong/dmap
```

### 安装指定地图平台

```bash
npm i @istrong/dmap-leaflet
# npm i @istrong/dmap-cesium
# npm i @istrong/dmap-arcgis
```
> 1. 可以在 `public/dmap` 目录下查看当前安装的所有地图平台的资源文件。(`public`是vue-cli 3.0构建项目后的静态资源目录)。
> 2. `arcgis`的构建基于`grunt`，且包含`dojo`和`requirejs`两种方式，这里用的是`requirejs`。（cesium也是用的requirejs）。
> 3. `arcgis` 以及 `cesium` 都是基于`amd`模块化进行动态加载，且不少插件以及图片资源都不是npm包，例如：catiline.js等，再比如基于`Woker`加载的脚本等等，都无法直接通过webpack打包（需修改构建环境，且不同平台的配置不一样），再加上单个地图平台的整体资源都比较大，超过10M+，因此不适合频繁进行动态构建。(轻量级的leaflet平台除外)。
> 4. 如果项目需要改变vue-cli 3.0中的public的静态资源目录结构，导致地图开发包的相对位置发生变动使得地图加载失败，可通过requirejs的配置来设置相对路径。
> 5. 为了支持低版本的浏览器，`arcgis`采用3.x版本，而官方的3.x版本不支持npm包。（直到三维平台4.x版本才支持）。

### 示例

```vue
<template>
  <dmap v-bind="{center:[119.3, 26.08333],zoom:10,provider:'GaodeMap.Normal'}" />
</template>

<script>
import Vue from "vue";
import dmap from "@istrong/dmap";
//
// 注册全局组件
// Vue.use(dmap)
//
export default {
  components:{ dmap }
}
</script>
```
> 1. 各个平台的地图是异步加载的，将不能在dom实例化之后立即访问地图实例对象。
> 2. 当前加载dmap(子组件)的组件对象，当派发`init`事件之后可以直接通过this.map访问dmap实例化后的对象。
> 3. 可以通过new Vue({mapOptions}) 来设置全局的地图配置。
> 4. dmap内的各个地图平台不会依赖任何前端框架（ajax请求也将不会使用约定的`vue-axios`），这也是为什么可以快速从react转到vue的原因之一。
> 5. 如果在一个组件内部同时实例化多个dmap组件，请从`init`事件派发的参数来获取各个组件对象。

### 插件加载机制

<del> 旧版本：依据`arcgis`以及`cesium`的插件机制，统一采用`amd`的模块化机制。<del> 
<del> 新版本：保留原地图平台的`amd`加载机制，自定义开发的插件将额外采取webpack的动态加载机制。<del> 

统一采用`amd`模块化机制，并开启CommonsChunkPlugin插件进行优化（后续将修改为`SplitChunksPlugin`）。

> 部分用到`Woker`加载的脚本仍然保持原有的加载机制。

### $props
|属性|类型|默认值|说明|
|-|-|-|-|
|platform|string|'leaflet'|可选值：`leaflet`、`cesium`、`arcgis`等|

### $events
|名称|数据|描述|
|-|-|-|
|init|map对象|地图初始化完毕之后派发该事件|