mymapbox
v2.13.9
Published
自定义地图组件
Downloads
504
Readme
map组件需要传 mapLoadFun mapInfo
//地图回调函数
mapLoadFun(that) 返回地图组件对象 以下地图方法使用 that.```
//地图信息
mapInfo
mapInfo:
{
noImmediately:fasle,是否立即加载，
noBounds:false, // 是否默认放大地图
noAnimate:false, // 定位效果隐藏动画
noDrage:false,// 地图是否禁止拖动
mapID: 'map',//地图组件ID
baseUrl: baseUrl, //矢量切片根路径
baseUrlMVT: baseUrl+tilesUrlMVT+'/', //矢量切片路径
tilesUrlDC: tilesUrlMVT,//矢量切片文件夹名称
fontInfo: 'Microsoft YaHei',//矢量切片默认字体
antialias:false, //是否平滑处理
maxZoomSource:15, //矢量切片源最大切片级别
minZoomSource:0,//矢量切片源最小切片级别
mapBound:mapConfig.mapBound,//默认地图显示范围
maxBounds:mapConfig.maxBounds,//最大地图显示范围，设置后超出不在访问矢量切片避免大量404
is3857: true,//是否3857
maxZoom: mapConfig.maxZoom,//是否3857
minZoom: mapConfig.minZoom,//是否3857
mapCrs: 'EPSG:3837', //超图多投影设置
mapboxgl:mapboxgl, // 是否传递mapbox组件
warnPop: warnPop //构造气泡字符串回调函数
}以下地图方法使用 that.```
map组件提供方法 以下地图方法使用 that.```
1、添加底图方法
addBaseMapByUrl(id,url,isTms,zoomOffset,minzoom,maxzoom)
id 图层编码
url 服务地址
isTms 是否tms编码
zoomOffset 是否zoomOffset偏移
minzoom 最大显示级别
maxzoom 最小显示级别2、添加专题图方法
addZtMap(id,url,show,layerName,callback,offFun)
id 图层id
url 图层地址
show 是否显示 ture和false ture显示 false 隐藏
layerName 查询服务的图层名称
callback(info,evt,offFun) 回调函数 返回点击要素的基本信息 返回内容 info 基础信息 evt 单击事件 offFun 绑定的地图单击事件，返回是为了隐藏图层时解除事件
offFun 需要解除绑定的函数，由回调函数给出3、添加点图层方法 （图层存在的话会更新图层）
addPointLayer(info) （适用于雨量站、河道站等复杂需求点）
info：{
id:'', // 图层id
icon:{ // 符号
id:"", //符号id
url:"", //符号地址
size:1 //符号大小 这个为原始符号大小的缩放倍数
},
popup:{ //气泡配置
type:'', // 类型 popup组件的 name true zoom大于minZoom小于maxZoom时显示，其他时候隐藏 false 一直隐藏，鼠标进入的时候显示
isZoom:true, // 气泡是否根据地图缩放自动显示
maxZoom:10, //显示的最大级别 超出隐藏
minZoom:1 //显示的最小级别 小于隐藏
},
data:[], //点信息数组 信息中必须包含 lgtd 和 lttd
zoom:{ // 图层自动显示配置
isZoom:true, // 图层是否根据地图缩放自动显示 true zoom大于minZoom小于maxZoom时显示，其他时候隐藏 false 一直显示
maxZoom:10, //显示的最大级别 超出隐藏
minZoom:1, //显示的最小级别 小于隐藏
},
color:"", 点要素颜色 非必传项
clickFunction:getMoreInfo 点单击需要调用方法
isCZ:false, // 是否村庄类图层，气泡中有按钮的选择此类
}4、图层显示隐藏控制
showLayer(id,type)
id 图层id
type 是否显示 ture和false ture显示 false 隐藏5、添加图片图层 （图层存在的话会更新图片）
addImgLayer(id,url,bound)
id 图层id
url 图片地址
bound 图片坐标范围 [[x0,y1],[x1,y1],[x1,y0],[x0,y0]] x0 经度最小值 x1 经度最大值 y0 纬度最小值 y1 纬度最大值6、添加线图层 （图层存在的话会更新图层）
addLineLayerZoomByFeature(id,datas,lineCode,lineColor,lineWidth,jsonCode,jsonData,returnFun,maxZoom,minZoom)
id 图层id
datas 线数据
lineCode 线数据的编码字段名称
lineColor 线的颜色
lineWidth 线宽度
jsonCode json数据编码字段名称 河段是 RVCD
jsonData 要素的json数据 固定数据的传null，非固定的传相应数据
returnFun 气泡内容构造回调函数 {isHtml:false,data:info} isHtml返回是html字符串，还是组件 data返回的内容
maxZoom:10, //显示的最大级别 超出隐藏
minZoom:1, 显示的最小级别 小于隐藏7、添加面图层 （图层存在的话会更新图层）
addPolygonLayerZoomByFeature(id,datas,polygonCode,polygonColor,jsonCode,jsonData,returnFun,maxZoom,minZoom,opacity)
id 图层id
datas 面数据 [{'code':'220101'},]
polygonCode 面数据的编码字段名称
polygonColor 面的颜色
jsonCode json数据编码字段名称
jsonData json数据
returnFun 气泡内容构造回调函数 {isHtml:false,data:info} isHtml返回是html字符串，还是组件 data返回的内容
maxZoom:10, //显示的最大级别 超出隐藏
minZoom:1, 显示的最小级别 小于隐藏
opacity: 1 默认值为1
8、点定位方法
mapLocationLeftTopPadding(lttd,lgtd,zoom,leftWidth,rightWidth,topHeight,bottomHeight)
lttd 纬度
lgtd 经度
zoom 缩放级别 默认 14
leftWidth 左侧面板宽度 隐藏时 按 0 处理
rightWidth 右侧面板宽度 隐藏时 按 0 处理
topHeight 顶部空间高度
bottomHeight 底部空间高度9、线和面定位
locationAreaLineLeftTop(serviceResult,isShowLine,lineColor,lineWidth,lineColor2,lineWidth2,leftWidth,rightWidth,topHeight,bottomHeight,login)
serviceResult 要选择的要素
isShowLine 是否显示边线
lineColor 边线颜色
lineWidth 边线宽度 使用数字格式
lineColor2
lineWidth2
leftWidth 左侧面板宽度 隐藏时 按 0 处理
rightWidth 右侧面板宽度 隐藏时 按 0 处理
topHeight 顶部空间高度
bottomHeight 底部空间高度
login 是否登陆调用
10、恢复全部功能
setMapBoundsLeftTop(leftWidth,rightWidth,topHeight,bottomHeight,bound)
leftWidth 左侧面板宽度 隐藏时 按 0 处理
rightWidth 右侧面板宽度 隐藏时 按 0
topHeight 上侧面板宽度 隐藏时 按 0 处理
bottomHeight 下侧面板宽度 隐藏时 按 0 处理
bound [[x0,y0],[x1,y1]]11、绘制点、线、面
dramMapfn(type)
type 类型 circle 点 polyline 线 polygon 面 不传的话清空地图绘制12、测量距离
distanceFn()13、测量面积
measureFn()13、移除图层
removeLayers(data)
data 字符串数组 ['layer1','layer2'……]14、添加聚合图层
addClustersLayer(data，id，type,iconId,iconUrl,iconSize,clickFunction)
data 图像站数组
id 聚合图层id
type 气泡类型 '图像站'
iconId 符号id
iconUrl 符号地址
iconSize 符号大小
clickFunction:getMoreInfo 点单击需要调用方法15、移除聚合图层
clearClustersLayer(id)
id 聚合图层id 'clusters'16、添加geojson图层
addSHPPolygonLayer(id,dataTYpe,Type,Color,popupType,isZoom,maxZoom,minZoom,opacity,Width,lineColor)
id '' 图层id
dataTYpe line和fill
Type 增加mx
Color 面或者的颜色
popupType 气泡的类型 popup组件的 name "模型"
isZoom:true, // 图层是否根据地图缩放自动显示
maxZoom:10, //显示的最大级别 超出隐藏
minZoom:1, 显示的最小级别 小于隐藏
opacity: 1 默认值为1 仅在fill 类型下生效
Width: 2 线的宽度 仅在line 类型下生效
lineColor 面外边线颜色
## 17、区县账号登陆定位
``` bash
loginArea(adcd,lev,isShowLine,lineColor,lineWidth,leftWidth,rightWidth)
adcd 政区编码
lev 政区级别
isShowLine 是否显示边线
lineColor 边线颜色
lineWidth 边线宽度
leftWidth 左侧面板宽度 隐藏时 按 0 处理
rightWidth 右侧面板宽度 隐藏时 按 0 处理
loginAreaLeftTop(adcd,lev,isShowLine,lineColor,lineWidth,leftWidth,rightWidth,topHeight,bottomHeight)
adcd 政区编码
lev 政区级别
isShowLine 是否显示边线
lineColor 边线颜色
lineWidth 边线宽度
leftWidth 左侧面板宽度 隐藏时 按 0 处理
rightWidth 右侧面板宽度 隐藏时 按 0 处理
topHeight 顶部空间高度
bottomHeight 底部空间高度
## 18、图层显示隐藏控制
``` bash
showLayers(datas,type)
datas 图层id数组
type 是否显示 ture和false ture显示 false 隐藏19、关联线加载
addRelationLine(id,item,data,lineWidth,lineColor,moveColor)
id 图层编码
item 站点 {lgtd:'',lttd:''}
data 关联点[ {lgtd:'',lttd:''} ]
lineWidth 线宽
lineColor 底线颜色
moveColor 移动块颜色
示例 addRelationLine('test',{lgtd:110.11,lttd:40},[{lgtd:112.11,lttd:39}],6,'#ff0','#ff0')20、显示气泡
showPop(info,type)
info 详细信息 {lgtd:'',lttd:'',……} 经纬度必须有，做好是数值格式
type 气泡类型 '危险区'21、隐藏气泡
hidePop()22、添加气泡
addPop(option)
option mapbox气泡样式
{
maxWidth:'600px', 最大宽度
closeOnClick:false, 单击关闭气泡
closeButton:false, 是否显示关闭按钮
// anchor: po.position, 气泡位置 top ,left,rightbottom……
// offset: [0, 210] 气泡偏移
}23、添加规则网格
loadGrid(datas,labelDI,gridID,strValue,numX,numY,loc)
datas:网格数组必须包含lgtd和lttd,
labelDI:标注图层ID
gridID:网格图层ID
strValue:标注在数组中的字段名
numX 网格宽度
numX 网格高度
loc 起点位置23、添加普通点
addNormalPoint(data,id,iconId,iconUrl,iconSize,minZoom,maxZoom,popupType,clickFunction)
data 数组 必须包含lgtd和lttd
id 点图层id
iconId 符号id
iconUrl 符号地址
iconSize 符号大小
minZoom 最小显示级别
maxZoom 最大显示级别
popupType 气泡类型
clickFunction: 点单击需要调用方法 如果没有 可以为空23、非立即加载模式下初始化地图
使用refs方式调用地图组件的initMap方法 initMap(info) info:
mapInfo:
{
noBounds:false, // 是否默认放大地图
noAnimate:false, // 定位效果隐藏动画
noDrage:false,// 地图是否禁止拖动
mapID: 'map',//地图组件ID
baseUrl: baseUrl, //矢量切片根路径
baseUrlMVT: baseUrl+tilesUrlMVT+'/', //矢量切片路径
tilesUrlDC: tilesUrlMVT,//矢量切片文件夹名称
fontInfo: 'Microsoft YaHei',//矢量切片默认字体
antialias:false, //是否平滑处理
maxZoomSource:15, //矢量切片源最大切片级别
minZoomSource:0,//矢量切片源最小切片级别
mapBound:mapConfig.mapBound,//默认地图显示范围
maxBounds:mapConfig.maxBounds,//最大地图显示范围，设置后超出不在访问矢量切片避免大量404
is3857: true,//是否3857
maxZoom: mapConfig.maxZoom,//是否3857
minZoom: mapConfig.minZoom,//是否3857
mapCrs: 'EPSG:3837', //超图多投影设置
mapboxgl:mapboxgl, // 是否传递mapbox组件
warnPop: warnPop //构造气泡字符串回调函数
}