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();关闭编辑
地图绘制控件
- 多边形绘制
- 撤销点
- 重做点
- 双击地图完成绘制
- 右键地图完成绘制
//引入
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上的点击和长按