gykj-map-core

地图核心组件库

[TOC]

安装方法

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

地图Vue组件

地图容器

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

# 引入插件
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 | 参数为地图实例 |

地图工具

编辑工具

//引入
  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();关闭编辑

地图绘制控件

1. 多边形绘制
2. 撤销点
3. 重做点
4. 双击地图完成绘制
5. 右键地图完成绘制

//引入
    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页面上实现移动端的长按事件

• 使用方法

  //新增长按监听
  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使用方法一样，只是回调函数返回值不同。

• 使用方法

  //新增长按监听
  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 |

• 返回值

  {
      "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上的点击和长按