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