# Mv Map

## 介绍
这里是感动科技有限公司软件研发部指挥调度线基于高德SDK和vue开发的一款适用于公司相关指挥调度项目的地图组件。

<a href="http://139.198.177.68:19090/page/map/#/mv-map/introduce" target="_blank">地图组件开发文档</a>

## 特性
- 快速搭建地图页面，兼容高德2.0和1.4.15版本
- 多种图例选择，绘制海量点、路线等图层
- 地图各种sdk便捷使用
- 地图图标配置化
- 地图主题切换
- 地图弹框便捷使用，配置主题
- 用户可自定义业务sdk配置

## 后台服务地址
下载地址
```
ssh://git@lab.microvideo.cn:8022/zhdd/xtzhdd-system.git 
```
<a href="http://lab.microvideo.cn/gitlab/zhdd/xtzhdd-system" target="_blank">git地址</a>

---

# 快速开始

## 安装与使用
### 1.安装
```
npm i microvideo-map
```
### 2.使用

**在程序执行入口配置文件 以vue2 main.js为例**

```
// 引入microvideo-map
import MvMap from 'microvideo-map';

// 注册使用
Vue.use(MvMap,{
    initMapConfig: Object,
    fetchConfig: Object,
    mapIconConfig: Array,
    businessSdk:Array
})
```

**在需要加载地图的页面里使用MvMap组件**
```
<template>
  <mv-map>
    <!-- 这里可以放置其他的组件代码 -->
  </mv-map>
</template>
```

## vue3 配置方式
main.js
```
import { createApp } from 'vue'
import App from './App.vue'

import MvMap from 'microvideo-map'

const app = createApp(App)

app.use(MvMap,{
    initMapConfig: Object,
    fetchConfig: Object,
    mapIconConfig: Array,
    businessSdk:Array
})
```
## 配置说明
### 1.initMapConfig 地图初始化配置参数
type:[Object]  非必传

```
initMapConfig:{
    key              地图 AppKey
    v                 地图版本号   默认 - 1.4.15
    uiVersion         地图版本对应的UI组件版本号  默认 - 1.1
    securityJsCode    地图安全密钥(自定义地图样式使用)
}
```
### 2.fetchConfig 地图业务层请求配置
type:[Object] 非必传

```
{
    baseUrl: '', // 请求地址 默认http://jtqg.gandongyun.cn/map
    headers:{},  // 请求头
}
```
### 3.mapIconConfig 地图打点图标配置
type:[Array] 非必传

***例：***
```
mapIconConfig:[
    {
        name: 'icon-zl-sn', // 图标名
        url: require('../assets/images/map/icon/icon-zl-sn.png') // 图标地址
    },
    {
        name: 'icon-zl-sfz',
        url: require('../assets/images/map/icon/icon-zl-sfz.png')
    }
]
```

### 4.businessSdk 全局业务Sdk配置
type:[Array] 非必传

```
// 组件已有mvSdk，可引入
import mvSdk from 'mv-map/lib/sdk/business-sdk/mv-sdk'
// 可自己创建sdk
import DemoSdk from './lib/demo-sdk'

// 业务sdk配置
businessSdk: [{
            sdkName: 'demo',
            sdkClass: DemoSdk
        },
        {
            sdkName: 'mv',
            sdkClass: mvSdk
        }
    ]
```
***例：demo-sdk.js***
```
/**
 * @description demo业务sdk配置
 * @author      朱琦
 * @date        2022/3/2
 */
class DemoSdk {

  init(mapSdk) {
      this.mapSdk = mapSdk;
      return this;
  }

}

const newInstance = () => {
  return new DemoSdk()
} 

export default newInstance
```
---

# MvMap
> MvMap 是mv-map插件最核心的组件，使用该组件可以调用地图相关的Api

## 使用
在需要应用地图的地方引入
```
<template>
  <mv-map 
    ref="mvMap"
    :mapConfig="mapConfig"
    :businessSdkConfig="businessSdkConfig"
    @map-load="mapLoad">
  </mv-map>
</template>
```

## 属性
### props:id   
**type: [String:'mv-map']** 地图唯一标识
> 当页面只有一个地图时，id可不传，默认值为mv-map
> 多个地图时可设置不同的id来区分，以便调用不同地图的sdk

### props:mapConfig
**type:[Object]** 创建地图配置项

mapConfig | 类型 | 说明
---|:---:|---
theme | String | 地图主题配置 dark(默认), light 
zoom | Number |地图显示层级
zooms | Array |地图显示层级范围
center | Array |地图中心点

 <a href="https://lbs.amap.com/api/javascript-api/reference/map" target="_blank">全部参数</a>

### props:businessConfig
**type:[Object]** 地图业务配置项

businessConfig | 类型 | 说明
---|:---:|---
roadType | String | 地图业务路网类型
areaConfig | Object | 地图显示省市县地区配置
sdkConfig | Array | 地图业务sdk配置

**areaConfig 详细配置说明**

areaConfig | 类型 | 说明
---|:---:|---
code | String | 区域code 默认江苏省 320000
depth | Number | 层级类型 0：省级 1：市级 2：县级
fillColor | String | 中国地级市填充色
cityBorderColor | String | 中国地级市边界颜色
countyBorderColor | String | 中国区县边界颜色
outsideFill | Object | 是否需要绘制外界遮罩 有该参数以下参数有效
outsideFill.strokeColor | String | 边界颜色
outsideFill.strokeBorderWidth | Number | 边界宽度
outsideFill.fillColor | String | 图层遮罩颜色
outsideFill.fillOpacity | String | 图层遮罩颜色
outsideFill.fillColor | Number | 图层遮罩透明度
outsideFill.bubble | String | 图层遮罩是否允许点击事件冒泡 默认false

## 事件
### emit:map-load
```
/**
  * 地图初始化完成
  * @param {Object} map 地图实例
  */
mapLoad (map) {
  this.map = map
  // 这里可以开始调用地图初始化后需要执行的方法
},
```
## 方法
### getBusinessSdk(sdkName)
根据业务名获取业务sdk

```
this.mvBusinessSdk = this.$refs.mvMap.getBusinessSdk('mv')
```

### themeChange(theme)
主题切换
目前已有主题 dark，light 默认主题是dark
```
// 切换成light主题
this.$refs.mvMap.themeChange('ligh')
```
### queryParamChange(params)
修改 图例接口传参
```
this.$refs.mvMap.queryParamChange({})
```

# MvMapIcon
> MvMapIcon 是一个可配置的图例按钮组件，可根据不同model来绘制海量点或路线等功能

## 使用
在MvMap组件内引入

***例：***
```
<template>
  <mv-map 
    ref="mvMap">
    <!-- 路况图例 -->
    <mv-map-icon
      iconConfig="lk"
      @layer-click="layerClick"
    ></mv-map-icon>
    <!-- 摄像头图例 -->
    <mv-map-icon
      :iconConfig="{type:'sxt',tooltipPostiton:'bottom'}"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
    ></mv-map-icon>
    <!-- 自定义图例 -->
    <mv-map-icon :iconConfig="iconConfig"></mv-map-icon>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      iconConfig:{
        type:'custom',
        name:'自定义图例',
        img:[require('@/assets/images/mv-map-img/icon-fwq.png'),require('@/assets/images/mv-map-img/icon-ddzx-active.png')]
      }
    }
  }
}
</script>
```

## 业务图例公用配置

name | type | mode
---|---|---
路况 | lk | lk
摄像头 | sxt | point
情报板 |qbb | point
交调点 | jdd | point
道路事件 | dlsj |  point
清障 | qz | point
工区| gq | point
服务区| fwq | point
收费站| sfz | point
汽渡| qd | point
ETC| etc | point
停车区| tcq | point
枢纽| sn | point
桥梁| ql | point
隧道| sd | point
路线| lx | line
桩号| zh | point
救援车辆 | jycl | point
警车 | jc | point
执法车 | zfc | point
雷雨云层| lyyc | point
气象点| qxd | point

## 属性
### props:iconConfig   
**type: [String | Object]** 图例配置

iconConfig 为String 代表图例类型

iconConfig 为Object时参数：

iconConfig | 类型 | 说明
---|:---:|---
type | String | 图例类型
model | String | 图层类型 非必传，可取'point'（海量点），'line'（路线），'lk'（路况）
img | Array | 图例图片配置，默认和选中两个图片
active | Boolean | 图例是否默认选中加载数据 默认false
cache | Boolean | 图例是否缓存数据 默认false
tooltipShow | Boolean | 图例是否显示提示框 默认true
tooltipPostiton | String | 提示框位置 可选 'top'(默认),'bottom'
width | String | 图例宽度 默认'2.5vw'
height | String | 图例高度 默认'2.5vw'
fitView | Boolean | 是否在绘制后自动调整地图视野以适合全部轨迹，默认false。
iconFilter | Array | model为point时图层 打点尺寸 
iconSize | Array 或 Function | model为point时图层 打点尺寸 
queryParam | Object | 图例接口传参
queryData | Promise | 图例获取数据方法

queryData 是一个Promise对象 返回数据格式如下：
```
{
  status:0,
  data:[]
}

// iconConfig.model = 'point',data 的数据格式
[{
  id:'1',
  name:'名称',
  path:[119.206742, 32.464552],
  icon:'icon-gl-qbb'
}]

// iconConfig.model = 'line',data 的数据格式
[{
  id:'1',
  name:'名称',
  path:[[119.206742, 32.464552],[119.206742, 32.464552]],
  config:{
    lineWidth:'6', // 线宽度
    lineColor:'red', // 线颜色
    selectWidth:'red', // 选中线宽度
    selectColor:'red', // 选中线颜色
  }
}]
```
### isChecked
type:[Boolean] 图例是否选中

### data
type:[Array] 图例数据

### layer
type:[Object] 图例图层

## 事件
### emit: layer-click
图例点击事件触发

*参数*
- config:[Object] 图例的iconConfig
- isChecked:[Boolean] 图例是否选中

### emit: load-layer
图例加载数据queryData 回调

*参数*
- status:[String] 'start' 开始加载数据  'error' 数据加载报错 'end' 数据加载结束

### emit: point-click

图例图层点位点击回调

*参数*
- event:{type:String}  事件
- point:{pointIndex:number, pathIndex:number, pathData:* } 节点相关信息
- config:[Object] 图例的iconConfig

### emit: query-callback
model 未定义 （或者不是 'point','line','lk'） 加载数据queryData 回调

*参数*
- res:[Object] 加载数据queryData 返回结果
- config:[Object] 图例的iconConfig

## 方法
### onIconClick
切换图例是否选中状态，图层显示与否

---

# MvMapMenu
> MvMapMenu 是一个可配置的菜单组件，将多个MvMapIcon组合成而成，默认显示所有基础功能图例

## 使用
在MvMap组件内引入

***例：***
```
<template>
  <mv-map 
    ref="mvMap">
    <!-- 默认菜单 -->
    <mv-map-menu
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
      @query-callback="queryCallback"
    ></mv-map-menu>
    <!-- 自定义菜单 -->
    <mv-map-menu
      :menuConfig="menuConfig"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
      @query-callback="queryCallback"
    ></mv-map-menu>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      menuConfig:{
        topConfig: [
          'lk','sxt',
          {
            type:'custom',
            name:'自定义图例',
            img:[require('@/assets/images/mv-map-img/icon-fwq.png'),require('@/assets/images/mv-map-img/icon-ddzx-active.png')]
          }
        ],
        leftConfig: ['gq', 'fwq'],
        bottomConfig: ['sn', 'ql'],
        className: 'demo-menus-box' // 图标菜单组件class
      }
    }
  }
}
</script>

<style scoped>
.demo-menus-box{
  left: 70%;
}
</style>
```

默认菜单配置参数
```
{
  topConfig: ['lk','sxt','qbb','jdd','dlsj','jycl','jc','zfc'],
  leftConfig: ['gq', 'fwq', 'sfz', 'qd', 'etc', 'tcq'],
  bottomConfig: ['sn', 'ql', 'sd', 'lx', 'zh'],
  menuWidth: '2.5vw', // 菜单按钮宽
  menuHeight: '2.5vw', // 菜单按钮高
  className: 'mv-menu-box' // 图标菜单组件class
}
```

## 事件
### emit: layer-click
图例点击事件触发

*参数*
- config:[Object] 图例的iconConfig
- isChecked:[Boolean] 图例是否选中

### emit: load-layer
图例加载数据queryData 回调

*参数*
- status:[String] 'start' 开始加载数据  'end' 数据加载完成

### emit: point-click

图例图层点位点击回调

*参数*
- event:{type:String}  事件
- point:{pointIndex:number, pathIndex:number, pathData:* } 节点相关信息
- config:[Object] 图例的iconConfig

### emit: query-callback
model 未定义 （或者不是 'point','line','lk'） 加载数据queryData 回调
*参数*
- res:[Object] 加载数据queryData 返回结果
- config:[Object] 图例的iconConfig

---

# MvMapDialog
> MvMapDialog 是地图弹框，可传递经纬度在相应的地方打开弹框，已配置两种主题

## 使用
在MvMap组件内引入

***例：***
```
<template>
  <mv-map 
    ref="mvMap">
    <!-- 图例 -->
    <mv-map-icon
      v-for="item in iconConfigArr"
      :key="item.type"
      :iconConfig="item"
      @layer-click="layerClick"
      @point-click="pointClick"
      @load-layer="loadLayer"
    ></mv-map-icon>

    <!-- 弹框 -->
    <mv-map-dialog
      ref="mapDialog"
      v-show="currentType"
      :title="currentData.name"
    >
      <div>{{ currentData.name }}</div>
    </mv-map-dialog>
  </mv-map>
</template>

<script>
export default {
  data () {
    return {
      iconConfigArr: ['sxt', 'qbb'],
      currentType: null,
      currentData: {}
    }
  },
  methods: {
    /**
     * 图例点击事件
     */
    layerClick (config, checked) {
      if (checked) {
        // 打开图例
      } else {
        // 关闭图例
        this.currentType === config.type && (this.currentType = null)
      }
    },

    /**
     * 图例 图层接口调用状态回调
     */
    loadLayer (status) {
      console.log('图层加载数据' + status)
    },

    /**
     * 图例 图层 地图点位 点击事件回调
     */
    pointClick (e, data, config) {
      this.currentType = config.type
      this.currentData = { ...data.data }

      this.$refs.mapDialog.openDialog(['20vw', '20vh'], data.data.path)
    }
  }
}
</script>
```

## 事件
### emit: closeMapDialog
关闭弹框触发

## 方法
### openDialog
显示弹框

*参数* 
- size:[Array] 弹框尺寸 默认['5vw', '10vh']
- lngLat:[Array] 弹框显示经纬度 [lon,lat]
- offset:[Array] 弹框偏移量 [Int,Int] 默认[15, 0]
- className:[String] 弹框class 默认是当前主题class


---
# 基础操作

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 设置地图id -->
    <mv-map ref="demoMap" @map-load="mapLoad" id="demoMap"> </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="mapMove">地图移动(设置中心点)</a-button>
    <a-button type="primary" @click="getMapCenter">获取中心点</a-button>
    <a-button type="primary" @click="setMapZoom">设置层级</a-button>
    <a-button type="primary" @click="setBounds">设置显示范围</a-button>
    <a-button type="primary" @click="setLimitBounds">设置可拖动区域</a-button>
    <a-button type="primary" @click="clearLimitBounds">取消可拖动区域</a-button>
    <a-button type="primary" @click="setMvMapFitView(null)">设置视野范围</a-button>
    <a-button type="primary" @click="setMvMapFitView(markers2)">设置指定视野范围</a-button>
    <a-button type="primary" @click="getMvMap()">获取地图实例</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map:null,
      markers1:null,
      markers2:null
    }
  },
  methods:{
    /**
     * 地图初始化完成
     */
    mapLoad (map) {
      this.createAddMarkers()
    },
    /**
     * 地图移动
     */
    mapMove () {
      let lnglat = [119.378231 + 0.48058 * 1.5 * Math.random(), 32.458852 + 0.60079 * 1.5 * Math.random()]
      this.$mapSdk('demoMap').setMvMapCenterAndZoom(lnglat)
    },
    /**
     * 获取中心点
     */
    getMapCenter () {
      alert('当前地图中心点：' + this.$mapSdk('demoMap').getMvMapCenter())
    },
    /**
     * 设置层级
     */
    setMapZoom () {
      this.$mapSdk('demoMap').setMvMapCenterAndZoom(null, Math.floor(Math.random() * 7) + 5)
    },
    /**
     * 获取层级
     */
    getMapZoom () {
      alert('当前地图层级：' + this.$mapSdk('demoMap').getMvMapZoom())
    },
    /**
     * 设置显示范围
     */
    setBounds () {
      this.$mapSdk('demoMap').setMvMapBounds([118.27467, 32.255442], [119.609509, 31.714976])
    },
    /**
     * 设置可拖动区域
     */
    setLimitBounds () {
      this.$mapSdk('demoMap').setMvMapLimitBounds([118.27467, 32.255442], [119.609509, 31.714976])
    },
    /**
     * 取消可拖动区域
     */
    clearLimitBounds () {
      this.$mapSdk('demoMap').clearMvMapLimitBounds()
    },
    /**
     * 设置视野范围
     */
    setMvMapFitView (layers) {
      this.$mapSdk('demoMap').setMvMapFitView(layers)
    },
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points1 = [
        { icon: 'icon-gs-sxt', path: [118.206742, 32.464552], name: 'test1'},
      ]
      let points2 = [
        { icon: 'icon-gs-qbb', path: [120.396572, 32.391775], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
      ]
      this.markers1 = this.$mapSdk('demoMap').createMvMapMarkerLayer(points1)
      this.markers2 = this.$mapSdk('demoMap').createMvMapMarkerLayer(points2)
    },
    /**
     * 获取地图实例
     */
    getMvMap() {
      this.map = this.$mapSdk('demoMap').getMvMap()
    }
  }
}
</script>
```
## API
### getMvMap() 获取地图实例
***返回***

map 地图实例
### setMvMapCenterAndZoom(center, zoom)  地图中心点移动
***参数***
- center [lng,lat] 中心点坐标
- zoom [Array] 层级 非必传



### getMvMapCenter() 获取地图中心点
***返回***

center:[lng,lat] 地图当前中心点经纬度坐标

### getMvMapZoom() 获取地图层级
***返回***

center:[Number] 地图当前层级

### setMvMapBounds(southWest, northEast) 设置地图显示范围
***参数***
- southWest [lng,lat] 西南角
- northEast [lng,lat] 东北角

### setMvMapLimitBounds(southWest, northEast) 设置地图可拖动区域
***参数***
- southWest [lng,lat] 西南角
- northEast [lng,lat] 东北角

### clearMvMapLimitBounds() 清除地图限制拖动区域

### setMvMapFitView(layers) 设置视野范围
参数
- layers [Array] 图层集合
> 仅支持标记点图层和折线图层

---
 # 点标记
 
## 使用
***例：***
```
<template>
  <div>
    <mv-map 
      ref="mvMap">
    </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="createAddMarkers" >创建标记点</a-button >
    <a-button type="primary" @click="hideMarkers">隐藏标记点</a-button>
    <a-button type="primary" @click="showMarkers">显示标记点</a-button>
    <a-button type="primary" @click="removeMarkers">移除标记点</a-button>
    <a-button type="primary" @click="setMarkerIcon">修改标记点图标</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      markers: null,
    }
  },
  methods:{
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points = [
        { icon: 'icon-gs-sxt', path: [119.206742, 32.464552], name: 'test1', size: [38, 42] },
        { icon: 'icon-gl-sxt', path: [119.349907, 32.388627], name: 'test2' },
        { icon: 'icon-gs-qbb', path: [119.401749, 32.386017], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
        <!-- 自定义内容 标记点 -->
        { content: '<div class="marker-icon">点</div>', path: [119.493416, 32.410657], name: 'test5', offset: [-15, -30] }
      ]
      this.markers && this.removeMarkers()
      this.markers = this.$mapSdk().createMvMapMarkerLayer(points, (e, data) => {
        alert('你点击了' + data.name)
      })
    },
    /**
     * 隐藏标记点
     */
    removeMarkers () {
      this.markers = this.$mapSdk().removeMvMapMarkerLayer(this.markers)
    },
    /**
     * 显示标记点
     */
    showMarkers () {
      this.$mapSdk().showMvMapMarkerLayer(this.markers)
    },
    /**
     * 移除标记点
     */
    hideMarkers () {
      this.$mapSdk().hideMvMapMarkerLayer(this.markers)
    },
    /**
     * 修改标记点图标
     */
    setMarkerIcon() {
      if (!this.markers) return
      this.markers.map(marker => {
        this.$mapSdk().setMvMapMarkerStyle(marker,'icon-gs-fwq')
      })
    }
  }
}
</script>
<style>
.marker-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  color: #4e4e4e;
  border-radius: 50%;
  text-align: center;
}
</style>
```
## API
### createMvMapMarkerLayer(data, callback) 创建标记点
***参数***

1.data:[Array]

data | 类型 | 说明 
---|---|---
name | String | 标记点名称
icon | String | 标记点图标名 
size | String | 标记点图标 尺寸
path | Array | 经纬度 [lng,lat]
offset | Array | 偏移量
callback:[Function] 标记点 click触发

2.callback(e, point)
- event:{type:String,lnglat} 触发事件对象
- point:{name,path...} 标记点相关信息

***返回***

markers [Array] 多个标记点实例

### removeMvMapMarkerLayer(markers) 移除标记点
***参数***

markers:[Array] 多个标记点实例

### showMvMapMarkerLayer(markers) 显示标记点
***参数***

markers:[Array] 多个标记点实例

### hideMvMapMarkerLayer(markers) 隐藏标记点
***参数***

markers:[Array] 多个标记点实例

### setMvMapMarkerStyle(marker, icon) 修改标记点图标
***参数***

- marker:[Object] 标记点实例
- icon:[String | Object] 图标名称，或图标配置

icon | 类型 | 说明 
---|---|---
icon | String | 图标名称
size | Array | 图标尺寸


---

# 文本标记

## 使用
***例：***
```
<template>
  <div>
    <mv-map ref="mvMap" :mapConfig="mapConfig"> </mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="createTextMarker" >创建文本标记</a-button>
    <a-button type="primary" @click="hideTextMarker">隐藏文本标记</a-button>
    <a-button type="primary" @click="showTextMarker">显示文本标记</a-button>
    <a-button type="primary" @click="removeTextMarker">移除文本标记</a-button>
    <a-button type="primary" @click="setTextMarker">设置文本标记</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapConfig: {
        zoom: 11,
        center: [120.235403, 31.420177]
      },
      textMarkers: null
    }
  },
  methods:{
    
    /**
     * 创建文本标记
     */
    createTextMarker () {
      this.textMarkers && this.removeTextMarker()
      const data = [{
        text: '太湖隧道',
        offset: [0, 20],
        path: [120.178245, 31.447435],
        style: {
          width: '100px',
          height: '30px',
          backgroundColor: 'rgba(6,253,201,0.3)',
          border: '1px solid #06fdc9',
          color: '#c3fff2',
          fontSize: '16px',
          borderRadius: 0,
          lineHeight: '28px',
          textAlign: 'center'
        }
      }, {
        text: '邀贤山隧道',
        offset: [0, 30],
        path: [120.054289, 31.517331],
        style: {
          'width': '100px',
          'height': '30px',
          'background-color': 'rgba(225,157,0,0.4)',
          'border': '1px solid rgba(225,157,0,1)',
          'color': '#c3fff2',
          'font-size': '16px',
          'border-radius': 0,
          'line-height': '28px',
          'text-align': 'center'
        }
      },]
      this.textMarkers = this.$mapSdk().createMvMapTextMarker(data, (e, data) => {
        alert('你点击了文本标签：' + data.text)
      })
    },
    /**
     * 移除文本标记
     */
    removeTextMarker () {
      this.$mapSdk().removeMvMapTextMarker(this.textMarkers)
    },
    /**
     * 隐藏文本标记
     */
    hideTextMarker () {
      this.$mapSdk().hideMvMapTextMarker(this.textMarkers)
    },
    /**
     * 显示文本标记
     */
    showTextMarker () {
      this.$mapSdk().showMvMapTextMarker(this.textMarkers)
    },
    /**
     * 设置文本标记
     */
    setTextMarker () {
      if (this.textMarkers) {
        const config = {
          text: '更改文本',
          style: {
            backgroundColor: 'red'
          }
        }
        this.textMarkers.forEach(textMarker => {
          this.$mapSdk().setMvMapTextMarker(textMarker, config)
        })
      }

    },
  }
}
</script>
```
## API
### createMvMapTextMarker(data, callback) 创建文本标记
***参数***

1.data:[Array]

data | 类型 | 说明 
---|---|---
text | String | 文本标记内容
path | Array | 经纬度 [lng,lat]
offset | Array | 偏移量
style | Object | 样式
callback:[Function] 文本标记 click触发

2.callback(e, data)

- event:{type:String,lnglat} 触发事件对象
- data:{text,path...} 文本标记相关信息

***返回***

textMarkers [Array] 多个文本标记实例

### removeMvMapTextMarker(textMarkers) 移除文本标记
***参数***

textMarkers:[Array] 多个文本标记实例

### showMvMapTextMarker(textMarkers) 显示文本标记
***参数***

textMarkers:[Array] 多个文本标记实例

### hideMvMapTextMarker(textMarkers) 隐藏文本标记
***参数***

textMarkers:[Array] 多个文本标记实例

### setMvMapMarkerStyle(textMarker, config) 修改文本标记
***参数***

- textMarker:[String] 文本标记实例

- config:[Object] 文本标记配置

config | 类型 | 说明 
---|---|---
text | String | 文本内容
style | Object | 文本样式


---
# 点聚合

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建点聚合</a-button>
    <a-button type="primary" @click="remove">移除点聚合</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cluster: null,
    }
  },
  methods:{
    /**
     * 创建点聚合
     */
    create () {
      let points = []
      for (let i = 0; i < 100; i++) {
        points.push({
          name: '情报板',
          icon: 'icon-gl-qbb',
          path: [119.206742 + 0.48058 * 0.1 * Math.random(), 32.464552 + 0.60079 * 0.1 * Math.random()],
          size: [20, 20],
          type: 0
        })
      }
      const config = {
        className:'demo-cluster',
        backgroundColor:'green',
        color:'#fff'
      }
      this.cluster = this.$mapSdk().createMvMapMarkerCluster(points, config, (e, data) => {
        alert('你点击了点聚合')
      })
    },
    /**
     * 移除点聚合
     */
    remove () {
      this.cluster && this.$mapSdk().removeMvMapMarkerCluster(this.cluster)
    },
  }
}
</script>

<style>
// 点聚合样式
.demo-cluster{
  border: 1px solid #fff;
}
</style>
```
## API
### createMvMapMarkerCluster(data,config, callback) 创建点聚合
***参数***

1.data [Array] 点数据

data | 类型 | 说明 
---|---|---
name | String | 点标记名称
path | [lng,lat] | 经纬度
icon | String | 图标名称
size | Array | 图标大小

2.config [Object] 点聚合自定义样式

config | 类型 | 说明 
---|---|---
className | String | class名
backgroundColor | String | 背景色
color | String | 字体色

3.callback [Function] 点点聚合击回调

callback(e,data)
-e [Object] 触发事件对象
-data [Array] 点聚合数据

***返回***

cluster [Object] 点聚合实例


### removeMvMapMarkerCluster(cluster) 移除点聚合
***参数***
- cluster 点聚合实例

---

# 折线

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建折线</a-button>
    <a-button type="primary" @click="remove">移除折线</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lineList: null,
    }
  },
  methods:{
    /**
     * 创建折线
     */
    create () {
      let data = [
        {
          name: 'test',
          path: [
            [120.338348, 31.458074],
            [120.332769, 31.453736],
            [120.328542, 31.450551],
            [120.32498, 31.448391],
            [120.317899, 31.444949],
            [120.301848, 31.437736],
            [120.294016, 31.434166],
            [120.286227, 31.430907],
            [120.275048, 31.427264],
            [120.26552, 31.423913],
            [120.257281, 31.42135],
            [120.245779, 31.420086],
            [120.236338, 31.420709],
            [120.234514, 31.421093],
            [120.234514, 31.421093],
          ],
          config: {
            lineWidth: 8,
            lineColor: '#FF0000',
            selectWidth: 10,
            selectColor: '#2eff00',
          }
        }, {
          name: 'test1',
          path: [
            [120.234514, 31.421093],
            [120.217949, 31.426238],
            [120.208078, 31.431603],
            [120.201621, 31.43504],
            [120.155938, 31.459442],
            [120.138493, 31.46885],
            [120.137227, 31.469344],
          ],
          config: {
            lineWidth: 8,
            lineColor: '#00B2D5',
            selectWidth: 10,
            selectColor: '#FFEA00',
            lineStyle: 'dashed'
          }
        }]
      this.lineList = this.$mapSdk().createMvMapLineLayer(data, (e, data) => {
        if (e.type === 'click') {
          alert('你点击了折线：' + data.name)
        }
        if (e.type === 'mouseover') {
          console.log('line mouseover')
        }
        if (e.type === 'mouseout') {
          console.log('line mouseout')
        }
      })
    },
    /**
     * 移除折线
     */
    remove () {
      this.lineList && this.$mapSdk().removeMvMapLineLayer(this.lineList)
    }
  }
}
</script>
```
## API
### createMvMapLineLayer(data, callback) 创建点聚合
***参数***

1.data [Array] 点数据

data | 类型 | 说明 
---|---|---
name | String | 线名称
path | [[lng,lat]] | 线 经纬度 数组过个点组成
lineColor | String | 线条颜色
lineWidth | String | 线条宽度
lineStyle | String | 线条样式 实线:solid，虚线:dashed

2.callback [Function] 线点击 悬浮回调函数
callback(e,data)
-e [Object] 触发事件对象 e.type 是触发事件类型 
-data [Array] 触发折线数据

***返回***

lineList [Array] 折线实例数组


### removeMvMapLineLayer(line) 移除点聚合
***参数***
- line [Object | Array] 折线实例 可以是一条或多条折线

---

# 行政边界区域

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 表单 -->
    <a-form-model>
      <a-form-model-item label="地区code">
        <a-input v-model="areaConfig.code" placeholder="地区code" />
      </a-form-model-item>
      <a-form-model-item label="地区名">
        <a-input v-model="areaConfig.codeName" placeholder="地区名" />
      </a-form-model-item>
      <a-form-model-item label="区域类型">
        <a-radio-group v-model="areaConfig.depth">
          <a-radio :value="1"> 省级 </a-radio>
          <a-radio :value="2"> 市级 </a-radio>
          <a-radio :value="3"> 县级 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="填充色">
        <a-input v-model="areaConfig.fillColor" placeholder="填充色" />
      </a-form-model-item>
      <a-form-model-item label="地级市边界颜色">
        <a-input v-model="areaConfig.cityBorderColor" placeholder="地级市边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="县边界颜色" v-show="areaConfig.depth !== 1">
        <a-input v-model="areaConfig.countyBorderColor" placeholder="县边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="外界遮罩">
        <a-switch v-model="areaConfig.outsideFill" />
      </a-form-model-item>
      <a-form-model-item label="边界颜色" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.countyBorderColor" placeholder="边界颜色" />
      </a-form-model-item>
      <a-form-model-item label="边界宽度" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.strokeBorderWidth" placeholder="边界宽度" />
      </a-form-model-item>
      <a-form-model-item label="图层遮罩颜色" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.fillColor" placeholder="图层遮罩颜色" />
      </a-form-model-item>
      <a-form-model-item label="图层遮罩透明度" v-show="areaConfig.outsideFill">
        <a-input v-model="outsideFill.fillOpacity" placeholder="图层遮罩透明度" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="create">开始绘制</a-button>
        <a-button type="primary" @click="remove">清除</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  data () {
    return {
      areaConfig: {
        codeName: "江苏省",
        code: "320000",
        depth: 1,
        fillColor: 'rgba(255,255,255,0.2)',
        cityBorderColor:'#E9F6FE',
        countyBorderColor:'rgba(255,255,255,0.1)',
        outsideFill:false
      },
      outsideFill:{
        strokeColor:'#fff',
        strokeBorderWidth:2,
        fillColor:'rgba(1,49,133,1)',
        fillOpacity:1,
        bubble:false,
      },
      provinceLayer: null,
    }
  },
  methods:{
    /**
     * 绘制行政边界区域
     */
    async create () {
      this.remove ()
      const config = this.areaConfig.outsideFill ? {...this.areaConfig, ...{ outsideFill:this.outsideFill }} : this.areaConfig
      this.provinceLayer = await this.$mapSdk().createMvMapProvince(config)
    },
    /**
     * 移除行政边界区域
     */
    remove () {
      this.$mapSdk().removeMvMapProvince(this.provinceLayer)
    },
  }
}
</script>
```
## API
### createMvMapProvince(config) 行政边界区域
type:[Promise]
***参数***

- config [Object] 配置

config | 类型 | 说明 
---|---|---
code | String | 区域code 
depth | Number | 区域类型 0：省级 1：市级 2：县级
fillColor | String | 行政区域填充色
fillFunction | Function | 行政区域填充色函数 return color
cityBorderColor | String | 行政区域边界颜色
countyBorderColor | String | 县边界颜色
outsideFill | Object | 绘制外界遮罩 无该参数不绘制外界遮罩
> 默认以code为准，其次是codeName

outsideFill 配置

outsideFill | 类型 | 说明 
---|---|---
strokeColor | String | 边界颜色
strokeBorderWidth | Number | 边界宽度
fillColor | String | 图层遮罩颜色
fillOpacity | Number | 图层遮罩透明度
bubble | Boolean | 图层遮罩是否允许点击事件冒泡 默认false

***返回***

type:[Object] { province, polygon }
- province:[Object] 行政区域图层对象
- polygon:[Object] 外界遮罩图层对象



### removeMvMapProvince(provinceLayer) 移除行政边界区域图层
***参数***
- provinceLayer { province, polygon }


---
# 热力图

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建热力图</a-button>
    <a-button type="primary" @click="hide">隐藏热力图</a-button>
    <a-button type="primary" @click="show">显示热力图</a-button>
    <a-button type="primary" @click="remove">移除热力图</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      heatLayer: null
    }
  },
  methods:{
    /**
     * 创建热力图
     */
    create () {
      const data = [{
        lat: 32.059703,
        lng: 118.795932,
        count: 8
      }, {
        lat: 32.464552,
        lng: 119.206742,
        count: 4
      }, {
        lat: 32.323953,
        lng: 119.393509,
        count: 11
      }]
      const heatConfig = {
        max: 10
      }
      this.remove()
      this.heatLayer = this.$mapSdk().createMvMapHeatMap(data, heatConfig)
    },
    /**
     * 隐藏热力图
     */
    hide () {
      this.heatLayer && this.heatLayer.hide()
    },
    /**
     * 显示热力图
     */
    show () {
      this.heatLayer && this.heatLayer.show()
    },
    /**
     * 移除热力图
     */
    remove () {
      this.$mapSdk().removeHeatMap(this.heatLayer)
    },
  }
}
</script>
```
## API
### createMvMapHeatMap(data, config) 创建热力图
***参数***
- data [Array] 热力图数据

data | 类型 | 说明 
---|---|---
lng | Number | 经度
lat | Number | 纬度
count | Number | 总数
- config [Object] 配置

config | 类型 | 说明 
---|---|---
radius | Number | 热力图中单个点的半径 25
opacity | Array | 热力图透明度区间 [0,1]
zooms | Array | 支持的缩放级别范围 [3,20]
max | Number | 最大权重值
gradient | Object | 热力图的渐变区间
```
gradient: {
  0.5: 'blue',
  0.65: 'rgb(117,211,248)',
  0.7: 'rgb(0, 255, 0)',
  0.9: '#ffea00',
  1.0: 'red'
}
```
***返回***

type:[Object] 热力图 图层



### removeHeatMap(layer) 移除热力图 图层
***参数***
- layer 热力图 图层

---

# 信息窗体

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 信息窗体 -->
    <div class="info-window" ref="windowInfo" v-show="windowInfoVisible">信息窗体</div>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建信息窗体</a-button>
    <a-button type="primary" @click="remove">移除信息窗体</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      windowInfoVisible:false,
      windowInfo:null
    }
  },
  methods:{
    /**
     * 创建信息窗体
     */
    create () {
      this.windowInfoVisible = true
      const path = [119.378231 + 0.48058 * 1.5 * Math.random(), 32.458852 + 0.60079 * 1.5 * Math.random()]
      let data = {
        content: this.$refs.windowInfo,
        path
      }
      
      this.windowInfo = this.$mapSdk().createMvMapWindowInfo(data, false)
    },
    /**
     * 关闭信息窗体
     */
    remove () {
      this.windowInfoVisible = false
      // 关闭
      this.windowInfo.close()
    },
  }
}
</script>
```
## API
### createMvMapWindowInfo(data, isCustom) 创建信息窗体
***参数***
- data [Array] 热力图数据

data | 类型 | 说明 
---|---|---
path | [lng,lat] | 弹框显示位置
content | HTML DOM | 弹框内容
offset | Array | 弹框偏移量

- isCustom  [Boolean]] 是否使用自定义组件

***返回***

type:[Object] 信息窗体实例

>windowInfo.close() 关闭信息窗体

---
# 图片图层

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建图片图层</a-button>
    <a-button type="primary" @click="hide">隐藏图片图层</a-button>
    <a-button type="primary" @click="show">显示图片图层</a-button>
    <a-button type="primary" @click="remove">移除图片图层</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imageLayer:null
    }
  },
  methods:{
    /**
     * 创建图片图层
     */
    create () {
      this.imageLayer = this.$mapSdk().createMvMapImgLayer(
        require('@/assets/images/map.png'),
        [105.054228, 19.197873],
        [130.202934, 42.1416],
        [8, 10], 2
      )
    },
    /**
     * 隐藏图片图层
     */
    hide () {
      this.imageLayer && this.imageLayer.hide()
    },
    /**
     * 显示图片图层
     */
    show () {
      this.imageLayer && this.imageLayer.show()
    },
    /**
     * 移除图片图层
     */
    remove () {
      this.$mapSdk().removeMvMapImgLayer(this.imageLayer)
    },
  }
}
</script>
```
## API
### createMvMapImgLayer(img, southWest, northEast, zooms, zIndex) 创建图片图层
***参数***
- img [String] 图片地址
- southWest [lng,lat] 西南角
- northEast [lng,lat] 东北角
- zooms [Array] 显示层级范围 默认 [8, 18]
- zIndex [Number] 图层叠加的顺序值，0表示最底层。默认zIndex：1

***返回***

type:[Object] 图片 图层


### removeMvMapImgLayer(layer) 移除图片 图层
***参数***
- layer 图片 图层


---

# 海量点

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建海量点</a-button>
    <a-button type="primary" @click="remove">移除海量点</a-button>
    <a-button type="primary" @click="setData">添加海量点数据</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data:[],
      layer:null
    }
  },
  methods:{
    /**
     * 创建海量点
     */
    create () {
      if (this.layer) {
        this.setData()
        return
      }
      businessApi.getSXTMapLayerList().then(res => {
        this.data = res.data.map(item => {
          return {
            ...item,
            icon: 'icon-gl-sxt',
            lnglat:item.path
          }
        })
        const config = {
          iconSize: [32, 30],
          offset: [-16, -15]
        }
        this.$mapSdk().createMvMapMassPoint(this.data, config, this.pointClick).then(res => {
          this.layer = res
        })
      })
    },
    /**
     * 移除海量点
     */
    remove () {
      this.$mapSdk().setMvMapMassPoint(this.layer, null)
    },
    /**
     * 添加海量点数据
     */
    setData () {
      this.$mapSdk().setMvMapMassPoint(this.layer, this.data)
    },
    /**
     * 海量点点击回调
     */
    pointClick (e, data) {
      alert('你点击了海量点：' + data.data.name)
    }
  }
}
</script>
```
## API
### createMvMapMassPoint(data, config, callBack) 创建海量点图层
***参数***
- data [Array] 数据

data | 类型 | 说明
---|:---:|---
id | String | 点id
name | String | 点提示信息
lnglat | Array | 点经纬度
icon | String | 点图标名
zooms | String | 点展示层级范围
zIndex | String | 点与其它图层的叠加顺序

- config 海量点配置

config | 类型 | 说明
---|:---:|---
iconSize | Array 或 Function | 点图标 为函数时要返回一个数组 [width, height]
offset | Array | 偏移量
fitView | Boolean | 是否在绘制后自动调整地图视野以适合全部轨迹，默认false

***返回***

type:[Object] 海量点图层


### setMvMapMassPoint(layer, data) 设置海量点数据
***参数***
- layer 海量点 图层
- data 海量点 数据

---
# 海量线

## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="create">创建海量线</a-button>
    <a-button type="primary" @click="remove">移除海量线</a-button>
    <a-button type="primary" @click="setData">添加海量线数据</a-button>
  </div>
</template>

<script>
import roadJson from '@/assets/json/js-one-road.json'

export default {
  data () {
    return {
      data:[],
      layer:null
    }
  },
  methods:{
    /**
     * 创建海量线
     */
    create () {
      if (this.layer) {
        this.setData()
        return
      }
      this.data = roadJson.features.map((line, index) => {
        return {
          name:index,
          path: line.geometry.coordinates,
          // 路线样式配置
          config: {
            lineWidth: 5,
            lineColor: index % 2 ? 'yellow' : 'green',
            selectWidth: 6,
            selectColor: 'red'
          }
        }
      })
      const config = {
        fitView: true
      }
      this.$mapSdk().createMvMapMassLine(this.data, config, this.pointClick).then(res => {
        this.layer = res
      })
    },
    /**
     * 移除海量线
     */
    remove () {
      this.$mapSdk().setMvMapMassLine(this.layer, null)
    },
    /**
     * 添加海量线数据
     */
    setData () {
      this.$mapSdk().setMvMapMassLine(this.layer, this.data)
    },
    /**
     * 海量线点击回调
     */
    pointClick (e, data) {
      alert('你点击了海量线:' + data.pathData.name)
    }
  }
}
</script>
```
## API
### createMvMapMassLine(data, config, callBack) 创建海量线图层
***参数***
- data [Array] 数据

data | 类型 | 说明
---|:---:|---
id | String | 线id
name | String | 线提示信息
path | Array | 线 经纬度数组 [[lng,lat],[lng,lat],....]
config | Object | 线样式配置

config 线样式配置
config | 类型 | 说明
---|:---:|---
lineWidth | Number | 线宽度
lineColor | String | 线颜色
dirArrowStyle | Boolean | 线是否绘制箭头样式，默认false
selectWidth | Number | 线选中宽度
selectColor | String | 线选中颜色

- config 海量线配置

config | 类型 | 说明
---|:---:|---
fitView | Boolean | 是否在绘制后自动调整地图视野以适合全部轨迹，默认false

***返回***

type:[Object] 海量线图层


### setMvMapMassLine(layer, data) 设置海量线数据
***参数***
- layer 海量线 图层
- data 海量线 数据




# 形状绘制
## 使用
***例：***
```
<template>
  <div>
    <!-- 引入地图 -->
    <mv-map ref="mvMap" :mapConfig="mapConfig"></mv-map>
    <!-- 操作按钮 -->
    <a-button type="primary" @click="drawRegion('rectangle')">绘制矩形</a-button>
    <a-button type="primary" @click="drawRegion('rectangle', true)">绘制可编辑矩形</a-button>
    <a-button type="primary" @click="drawRegion('circle')">绘制圆形</a-button>
    <a-button type="primary" @click="drawRegion('circle', true)">绘制可编辑圆形</a-button>
    <a-button type="primary" @click="drawRegion('polygon')">绘制多边形</a-button>
    <a-button type="primary" @click="drawRegion('polygon', true)">绘制可编辑多边形</a-button>
    <a-button type="primary" @click="removeCurrentId">移除指定id绘制内容</a-button>
    <a-button type="primary" @click="removeCurrentLayer">移除指定layer绘制内容</a-button>
    <a-button type="primary" @click="remove">移除所有绘制内容</a-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mapConfig: {
        zoom: 11,
        center: [119.201111, 32.391081]
      },
      markers: null,
      currentId: null,
      currentLayer: null
    }
  },
  methods:{
    /**
     * 创建标记点
     */
    createAddMarkers () {
      let points = [
        { icon: 'icon-gs-sxt', path: [119.206742, 32.464552], name: 'test1', size: [38, 42] },
        { icon: 'icon-gl-sxt', path: [119.349907, 32.388627], name: 'test2' },
        { icon: 'icon-gs-qbb', path: [119.396572, 32.391775], name: 'test3' },
        { icon: 'icon-gl-qbb', path: [119.393509, 32.323953], name: 'test4' },
      ]
      this.markers = this.$mapSdk().createMvMapMarkerLayer(points, (e, data) => {
        alert('你点击了' + data.name)
      })
    },
    /**
     * 创建形状绘制
     */
    drawRegion (type, edit) {
      const id = new Date().getTime()
      // 形状绘制配置
      const drawConfig = {
        type,
        id,
        edit,
        lineColor: '#ffffff',
        areaColor: edit ? '#ff0000' : '#00b0ff',
      }
      this.$mapSdk().drawMvMapRegion(drawConfig, this.markers, (layer, config, markers) => {
        // 保存当前绘制内容的id和图层
        this.currentId = config.id
        this.currentLayer = layer

        markers.forEach(item => {
          this.$mapSdk().setMvMapMarkerStyle(item, 'icon-gl-sn')
        })
        console.log("区域内点有" + markers.length + '个')
      })
    },
    /**
     * 移除所有绘制内容
     */
    remove () {
      this.$mapSdk().clearMvMapRegion()
    },
    /**
     * 移除指定id绘制内容
     */
    removeCurrentId () {
      this.currentId && this.$mapSdk().clearMvMapRegion(this.currentId)
    },
    /**
     * 移除指定layer绘制内容
     */
    removeCurrentLayer () {
      this.currentLayer && this.$mapSdk().clearMvMapRegion(this.currentLayer)
    }
  }
}
</script>
```
## API
### drawMvMapRegion(config, markers, callback) 绘制区域
***参数***

1.config [Object|String] 绘制配置

config 为string时，默认设置绘类型

config 为Object时：

config | 类型 | 说明
---|:---:|---
type | String | 绘制类型 取值 'rectangle'、'circle'、'polygon'
id | String | id
areaColor | String | 区域颜色
lineColor | String | 边框颜色
edit | Boolean | 是否编辑

2.markers [Array] 标记点点集合

3.callback [Function] 回调函数

callback(layer, config, markers)
- layer [Object] 绘制图层
- config [Object] 绘制配置
- markers [Array] 绘制范围内的点标记数组


### clearMvMapRegion(layer) 清除绘制内容
***参数***
- 不传时清除所有绘制图层
- 传id，移除指定id绘制内容
- 传layer，移除指定layer绘制内容

