map-integration/README.md

vue集成地图第三方插件

# 基础

## 说明

---

组件集成 Leaflet，高德地图 API 将地图操作封装为统一出入口，方便程序快速切换地图模式。

## 安装

---

### npm 安装

> 目前只支持 npm 安装方式

```sh
npm i map-integration
```

### 1. 采用 leaflet 模式

> 安装 leaflet

```sh
npm install --save leaflet esri-leaflet proj4leaflet
```

> 配置全局 leaflet 变量

```sh
// 全局引入leaflet
import L from 'leaflet'
import 'proj4leaflet'
require('esri-leaflet')
require('leaflet/dist/leaflet.css')
Vue.prototype.$L = L
```

### 2. 采用高德地图模式

> 安装高德地图

```sh
npm i @amap/amap-jsapi-loader --save
```

> 配置全局高德地图变量

```sh
//  全局引入amap
import AMapLoader from '@amap/amap-jsapi-loader'
Vue.prototype.$AMapLoader = AMapLoader
```

## 使用教程

### 快速上手

```vue
<!--
 * @Descripttion: 使用示例
 * @Author: xuyanqi
 * @Date: 2022-06-01 17:30:58
-->
<template>
  <div class="index">
    <map-integration type="leaflet" :options="options" @initMap="initMap"></map-integration>
    <div class="btn-group">
      <button @click="clearLayers">清除图层</button>
      <button @click="removeLayer">清除点</button>
    </div>
  </div>
</template>

<script>
import mapIntegration from 'map-integration'
export default {
  components: {
    mapIntegration,
  },
  data() {
    return {
      mapData: null,
      marker: null,
      options: {},
    }
  },
  mounted() {},
  methods: {
    initMap(data) {
      this.mapData = data
      // 打点
      this.marker = data.addMarker({
        extData: '点',
      })
      // 画线
      data.addPolyline({
        path: [
          [117.127328, 36.673561],
          [117.130263, 36.674951],
          [117.131277, 36.673591],
          [117.131443, 36.672989],
          [117.131384, 36.672705],
          [117.131282, 36.67233],
          [117.131325, 36.671608],
          [117.131325, 36.671556],
          [117.130048, 36.671741],
          [117.128691, 36.672274],
          [117.127908, 36.672834],
          [117.127908, 36.672834],
        ],
        extData: '线',
      })
      // 图层点击
      data.clickLayer((e) => {
        console.log(e)
      })
      // 地图点击
      data.clickMap((e) => {
        console.log(e)
      })
    },
    // 清除地图上所有图层
    clearLayers() {
      this.mapData.clearLayers()
    },
    // 删除指定图层
    removeLayer() {
      this.mapData.removeLayer(this.marker)
    },
  },
}
</script>

<style scoped>
.index {
  height: 100%;
}
.btn-group {
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 999;
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 0 4px #b9b9b9;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
button {
  margin: 5px;
}
</style>
```

### props

| 属性名  | 是否必填 | 默认值 |    可选值    |   说明   |
| :-----: | :------: | :----: | :----------: | :------: |
|  type   |    否    |  amap  | leaflet,amap | 地图类型 |
| options |    否    |   -    |      -       | 配置参数 |

#### options 参数

> 该工具目前只实现了以下通用属性，如果需要其他属性可根据官网 map 对象属性自定义填写，只是在切换地图模式时无法同步使用。

| 属性名  | 是否必填 |        默认值         | 可选值 |        说明        |
| :-----: | :------: | :-------------------: | :----: | :----------------: |
| center  |    否    | [116.75199, 36.55358] |        |  地图中心点坐标值  |
|  zoom   |    否    |           8           |        | 地图显示的缩放级别 |
| minZoom |    否    |           1           |        |   地图缩放最小值   |
| maxZoom |    否    |          16           |        |   地图缩放最大值   |
|   ...   |   ...    |          ...          |  ...   |        ...         |

### events

|  事件   | 回调值  |         说明         |
| :-----: | :-----: | :------------------: |
| initMap | mapData | 地图初始化完成后触发 |

#### mapData Attribute

| 属性 | 返回类型 |   说明   |
| :--: | :------: | :------: |
| map  | Map 对象 | map 对象 |

#### mapData Methods

|             方法名             |                  返回值                  |   传参   |     说明     |
| :----------------------------: | :--------------------------------------: | :------: | :----------: |
|   addMarker(marker: Object)    |                  Layer                   |  Marker  |  添加点坐标  |
| addPolyline(polyline: Object)  |                  Layer                   | Polyline |  添加线绘制  |
| clickLayer(callback: Function) |        callback(Polyline\|Marker)        |          |   图层点击   |
|  clickMap(callback: Function)  | callback({lng: 117.22323,lat: 38.23423}) |          |   地图点击   |
|         clearLayers()          |                                          |          | 清除所有图层 |
|    removeLayer(layer: any)     |                                          |  Layer   | 删除指定图层 |

#### Polyline

|     属性     |        类型         |    说明    |
| :----------: | :-----------------: | :--------: |
|     path     | number[][] 二维数组 | 经纬度数据 |
| borderWeight |       number        |  线的粗细  |
| strokeColor  |       string        |  线的颜色  |
|   extData    |       object        | 自定义数据 |

#### Marker

|  属性   |  类型  |           说明           |
| :-----: | :----: | :----------------------: |
|   lng   | number |           精度           |
|   lat   | number |           纬度           |
|  icon   | string | 图标地址，可以是网络地址 |
|  size   | number |         图标大小         |
|  title  | string |     鼠标划过文字提示     |
| extData | object |        自定义数据        |

- 博客地址 1：https://www.biyiniaolove.work/blogDesc?id=5
- 博客地址 2：https://www.cnblogs.com/xyqbk/p/16360783.html
- NPM： https://www.npmjs.com/package/map-integration