# gykj-map-core

**Repository Path**: diydog/gykj-map-core

## Basic Information

- **Project Name**: gykj-map-core
- **Description**: 地图工机具库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-07-12
- **Last Updated**: 2022-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# gykj-map-core

> 地图核心组件库

[TOC]



## 安装方法

``` bash
# 安装插件
npm install gykj-map-core --save
# 引入样式
import "gykj-map-core/dist/css/gykj-map-core.css"

```

## 地图Vue组件
### 地图容器

> Mapbox地图容器，支持封装展示自动读取token或签名，底部自带区划和经纬度工具条

``` javascript

# 引入插件
import {MapContainer} from "gykj-map-core";

# components中引入
components:{
   MapContainer
},

# 组件使用
       <map-container @load="load" :style-url="style" auth-type="Authorization"></map-container>
```
- 参数

  | 参数名        | 类型   | 说明                                                  | 默认值                             |
  | :------------ | :----- | :---------------------------------------------------- | ---------------------------------- |
  | styleUrl      | text   | 地图style地址                                         | mapbox://styles/mapbox/streets-v11 |
  | authType      | text   | 认证方式， Authorization/Signature/''，空为不需要认证 | 空                                 |
  | defaultLevel  | number | 默认地图等级                                          | 4                                  |
  | defaultCenter | Array  | 默认地图中心                                          | [104.496806,36.104630]             |
  | options       | object | 其他选项                                              | 见后文                             |

- options

  |参数名|类型|说明|默认值|
  | ---- | ---- | ---- | ---- |
  | showBottom | boolean | 是否展示底部经纬度、区划状态栏 | true |

- 事件

  | 参数名 | 参数类型 | 说明           |
  | :----- | :------- | -------------- |
  | load   | object   | 参数为地图实例 |

## 地图工具
#### 编辑工具
``` javascript
//引入
  import {EditArea} from "gykj-map-core";

 let edit=  new EditArea(map,{
        callBack:res=>{
        //双击绘制完成回调
          console.log(res)
        },
        errorCallBack:res=>{
        //发生错误回调
          console.log(res)
        },
        //需要编辑的要素
        feature:{
          "id":"ssssssssssssssssssss",
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Polygon",
            "coordinates": [
              [
                [
                  14.765625,
                  68.13885164925573
                ],
                [
                  -9.140625,
                  -16.63619187839765
                ],
                [
                  152.578125,
                  -15.28418511407642
                ],
                [
                  161.015625,
                  69.90011762668541
                ],
                [
                  14.765625,
                  68.13885164925573
                ]
              ]
            ]
          }
        }
      });
      edit.start()//开始编辑


     // edit.close();关闭编辑
```
#### 地图绘制控件
![效果图](https://img-blog.csdnimg.cn/20210415201020732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dJU3V1c2Vy,size_16,color_FFFFFF,t_70)
1. 多边形绘制
2. 撤销点
3. 重做点
4. 双击地图完成绘制
5. 右键地图完成绘制
``` javascript
//引入
    import {DrawAreaControl} from "gykj-map-core";

        let control=new DrawAreaControl((res)=>{
           console.log(re)//绘制成功回调
         },err=>{
           console.log(err)//绘制失败回调
         });
         map.addControl(control, 'bottom-right');
```
- 参数

|参数名|类型|说明|默认值|
|:-----  |:----- |:----- |-----                           |
|参数1|function |绘制成功回调 |null|
|参数2|function |绘制取消回调 |null|
|参数3|function |绘制失败回调 |null|

## 通用工具

### 地图长按H5

> 支持在H5页面上实现移动端的长按事件

- 使用方法

  ```javascript
  //新增长按监听
  let longTouch=new LongTouch(map,"test",res=>{
         console.log(res);
       })
  longTouch.close();//移除长按监听
  ```

- 参数

  | 参数名    | 类型        | 说明                      | 默认值 |
  | :-------- | :---------- | :------------------------ | ------ |
  | map       | MapBoxGlMap | 地图对象                  | null   |
  | layerId   | text        | 图层id                    | null   |
  | callback  | function    | 回调函数，返回值为Feature | null   |
  | timeValue | number      | 长按时间                  | 1000   |

### 地图点击H5(兼容长按)

> 在H5地图上，同时支持touch和longTouch事件。可有效减少对同一图层的监听数量，避免长按和点击监听的冲突。与前面的LongTouch使用方法一样，只是回调函数返回值不同。

- 使用方法

  ```javascript
  //新增长按监听
  let touch=new Touch(map,"test",res=>{
         console.log(res);
       })
  touch.close();//移除长按监听
  ```

- 参数

  | 参数名    | 类型        | 说明                     | 默认值 |
  | :-------- | :---------- | :----------------------- | ------ |
  | map       | MapBoxGlMap | 地图对象                 | null   |
  | layerId   | text        | 图层id                   | null   |
  | callback  | function    | 回调函数，返回值参考下面 | null   |
  | timeValue | number      | 长按时间                 | 1000   |

- 返回值

  ```json
  {
      "type":"LongTouch",//点击事件返回“Touch”，长按事件返回“LongTouch”
      "data":Fearure  //geojson格式
  }
  ```



# 更新记录

- 1.0.1   新增多边形编辑
- 1.0.4   新增地图容器，支持自动获取tk信息
- 1.0.7   新增长按监听和公共函数
- 1.2.4   地图绘制控件
- 1.2.5   地图绘制控件增加取消回调
- 1.2.8  增加Touch对象，同时支持H5上的点击和长按