zh-mapbox

介绍

封装了一些mapbox的常用方法

使用

import { RegisterMapBoxMethod } from 'zh-mapbox'

let mapboxgl = require('mapbox-gl')
require('mapbox-gl/dist/mapbox-gl.css')
//注册常用方法
RegisterMapBoxMethod(mapboxgl)

import { RegisterMapBoxModel } from 'zh-mapbox'

import * as THREE from 'three'
import GLTFLoader from 'three/examples/js/loaders/GLTFLoader'
//注册模型相关方法(前提先注册常用方法)
RegisterMapBoxModel(THREE,GLTFLoader)

方法概览

注册常用方法后 map.on('layerdata') 可监听图层的添加与删除

Map

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------------------------------------- | | RegisterMapBoxMethod(mapboxgl,defaultSource?:string[]) | mapboxgldefaultSource:默认不进行删除或查找的源 | 注册方法 | | removeAllLayerAndSource(defaultSource?:string[]) | defaultSource:默认不进行删除的源 | 删除所有图层和源 | | getAllLayerAndSource（defaultSource？:string[])-（0.0.24） | defaultSource:默认不获取的源 | 获取所有图层和源 | | findCustomLayer(type?:string[]|string,defaultSource?:string[]) | type:查找类型defaultSource:默认不查找的源 | 查找自定义的图层 | | MapTooltip(layerName:string|string[],options:Popup.options) | layerName:图层名称options：继承mapbox Popup的参数 | （实例）地图提示框 | | MapPopup(layerName:string|string[],options:Popup.options) | layerName:图层名称options：继承mapbox Popup的参数 | （实例）地图弹出框 | | MapLine | - | （实例）地图绘制线 | | MapCustom | - | （实例）地图其他绘制（默认symbol） | | MapCircle | - | （实例）地图绘制圆 | | MapEvent-(0.0.24) | layerName？:图层名称 | (实例) 自定义事件 | | MapMarker(options)-(0.0.24) | options:marker参数 | （实例）绘制marker | | MapMoreCustom-（0.0.24） | - | （实例）多图层方法 | | fitBoundsGeoJson（geojson:any,options:Camera.options） | geojsonoptions:相机相关参数 | 聚焦到geojson | | fitBoundsPosition（position:array<array>,options:Camera.options） | position:四至位置options：相机相关参数 | 聚焦到四至位置 | | getInvertMask（geojson:any,options:{id:string,layerConfig:any}）：layer | options.id:遮罩idoptions.layerConfig:图层layer样式配置 | 获取geojson反向区域 | | loadImages（urls:{key:string|{url:string,...args}}）：Promise<{key:value}> | urls:图片对象集合key：图片名称 ->图片地址 | 加载多张图片 | | loadAddImages（url:{key:string|{url:string,...args}}） | urls:图片对象集合key：图片名称 ->图片地址 | 加载多张图片同时加载到地图上 | | removeLayerSource(options:{name:string|array,layers?:array,sources?:array}) -（0.0.24） | name: 图层和源id（图层和源相同）layers？图层idsources？源id | 移除图层和源 | | removeLayerEvent（event:object，clear）-（0.0.24） | event: 移除的事件对象clear：清除对象 true -（0.0.73） | 移除图层定义的事件 | | findCustomIcon-（0.0.24） | - | 查找自定义的图标 | | setStyle(style,option,callback?)-（0.0.24） | styleoptions{save是否保存图片、源、图层source?:['composite']不保存的源和图层}callback？保存操作后回调 | 设置地图样式（同地图原来设置） | | removeEvents（events？：string[]）-（0.0.24） | events:['click', 'mousemove', 'mouseout'] | 删除事件 | | removePopup（type:popup|tooltip）-（0.0.24） | type：弹窗类型 | 移除弹窗 | | getCustomLayer()-（0.0.54） | - | 获取type：custom的图层 | | getLayerIndex(id) -(0.0.66) | 图层id | 根据图层id获取层级 | | getLayerId(index,after)-(0.0.66) | index：图层层级after：之后的层级数 | 根据层级获取图层id | | getMinLayerId()-(0.0.66) | - | 获取最小层级id | | getMaxLayerId()-(0.0.66) | - | 获取最大层级id | | getAllLayerId()-(0.0.71) | - | 获取所有图层id | | getAllLayer()-(0.0.71) | - | 获取所有图层 | | getLineLayer()-(0.0.71) | - | 获取线图层 | | AnimateLine(name,options)-(0.0.73) | name:图层idoptions？：{dash？：变化的数组step？：段数} | 线动画 | | setPaint(id,options)-(0.0.108) | id:图层idoptions:{key:属性名value:属性值} | 修改paint | | setLayout(id，options)-(0.0.108) | id:图层idoptions:{key:属性名value:属性值} | 修改layout | | customStyle(options)-(0.0.108) | options:{key:string,value:[color,opacity]} | 修改地图style | | clearData()-(0.0.108) | - | 清除数据（初始化时调用 0.0.122版本之前） | | initData()-(0.1.0) | - | 初始化数据（必须初始化） | | getTileByPosition(position,zoom?)-(0.0.108) | position:[lng,lat]zoom?:number | 根据经纬度获取瓦片 | | getPositionByTile(range)-(0.0.108) | range:[x,y,z] | 根据瓦片获取经纬度四至 | | getTilesByBounds(zoom,options)-(0.0.114) | zoom:层级options：{expand：number 扩散瓦片数量reversal：boolean 反转排列方式} | 根据层级获取当前视口瓦片 | | loadSpriteGraph(sprite)-(0.0.114) | sprite:{image:string 图片地址json:string|object json数据} | 加载精灵图 | | MapClusterMarker(options)-(0.0.114) | options: marker参数 | 聚合marker | | MapSourceEvent(name,options)-(0.0.114) | name:sourceoptions:{once:true 执行一次sourceLayer: 图层源 vector时必传filter：过滤} | 获取source源信息 | | TileByGeoJson(options)-(0.1.0) | options:{maxZoom:18 最大层级minZoom:0 最小层级expand:0 扩展瓦片数isGCJ:false 是否GCJ坐标replaceUrl：Function 替换urlisJudgement：false 是否判断瓦片judgementBox:Function 四至判断方法judgementPoint:Function 坐标判断方法filter:Function 设置滤镜coordTransform:Function 坐标转换judgeBound:true 是否先判断边界isPrecision:true 是否提升精度minShow:true 小于最小层级是否显示maxShow:true 大于最大层级是否显示textureType:'NEAREST'|'LINEAR'图像混合模式gradualLoad:false 渐进加载图片isThrottle:true 使用节流fetchOptions:fetch配置参数cacheExpire:0 缓存失效分钟(0不失效)useWorker:true 使用webwork} | 裁剪区域 | | MapMenu(options)-(0.1.0) | options:{move:false 菜单是否跟随移动className：string } | 右键菜单 | | MapMeasure(options)-(0.1.1) | options:{...} | 地图测量 | | MapTileClusterCustom(options)-(0.1.6) | options:{} | 切片聚合 | | MapLabelByGeoJson()-(0.0.39) | | 过滤地图标签 | | MapImageByGeoJson(options)-(0.0.39) | options:{sourceConfig:{}} | 图像图层 | | getMapLayer()-(0.1.47) | | 获取所有添加的图层 | | clearMapLayer(names?,clear?)-(0.1.47) | names:string|string[]适用于MapLayer的名称clear:boolean 清除或者保留 | 清除所有添加的图层 | | setLayerOrder(order)-(0.1.49) | order:true （排最后） | zIndex图层排序方式 | | setDefaultLayerIndex(index)-(0.1.49) | index:number | 图层添加默认zIndex | | lazyLoadAddImages(urls)-(0.1.51) | urls:{key:any} | 懒加载图片 | | MapSelectBox(options)-(0.1.60) | options:{} | 地图框选 | | isPointOnEarth(lnglat,strict)-(0.1.60) | lnglat:{lng:number,lat:number}strict:boolean 更严格的判断[false] | 点是否在地图上 | | AnimateMarker()-(0.1.66) | | 图标动画 | | MapMoreLayer()-(0.1.74) | | 绘制图层 | | MapInteraction(options)-(0.1.76-v3) | options:{reset?:Function 重置交互方法} | 地图交互 | | getInteractions()-(0.1.76-v3) | | 获取所有地图交互 | | loadModels(models)-(0.1.76-v3) | models:{key:string} | 添加模型 | | isPaintProperty(id,property)-(0.1.79) | | 是否属于paint | | loadIconset(url,options,callback)-(v3) | | 加载pbf图标 |

Map.Style

| 方法名 | 参数 | 描述 | | ------------------------------ | -------------- | ---------------------------------------------- | | loadSprite(url)-（0.0.24） | url:精灵图地址 | 加载精灵图（ findCustomIcon 可以查询到） |

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | | RegisterMapBoxModel（THREE,GLTFLoader） | THREE:threejsGLTFLoader:模型加载器 | 注册模型 | | initGLTF（id:string，options：{}，callback:function） | id:模型名称options:{lngLat：经纬度height：高度scale：缩放url：地址（绝对地址/网络地址）rotate：旋转 [x,y,z]AmbientLight:环境光 {show：boolean，...args：three.ambient}DirectionalLight :平行光 [ three.directional]PointLight:点光源 [three.PointLight]click：是否开启点击事件properties：属性}callback：点击回调 返回{lngLat,properties} | 加载模型 |

方法

MapTooltip

​

| 方法名 | 参数 | 描述 | | -------------------------------------------------- | ------------------------------------------------------------ | ------------ | | show(callback:function,type?:string) | callback:返回tooltip显示的信息，或者{data:...,show:boolean}（properties）=>{}type:显示类型 默认跟随点位 ‘move’:跟随鼠标 | 显示提示框 | | destroy() | - | 销毁 | | setClassName(className:string，isFull:boolean) | className:类名isFull:false 是否全类名 | 设置类名 | | mouseInOut(callback:function)-（0.1.21） | | 鼠标进入离开 | | showPosition(lnglat,properties)-(0.1.21) | | 指定位置显示 |

MapPopup

options:{
	...,
	destroyComponent=false,//关闭时是否销毁组件
	customClick=false,//是否自定义点击事件
	popupClose=false,//关闭时是否调用组件内popupClose()方法，vue组件
	closeOther=true，//弹窗打开时关闭其他弹窗
	noCloseLayerName:string[],//不关闭的弹窗名称
	closeClick//点击关闭按钮执行的方法
}

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | -------------- | | show(callbackComp:function,callback?:function) | callbackComp:弹出框内显示的组件callback:弹出框打开后回调 | 显示弹出框 | | close() | - | 关闭弹出框 | | closeBack(callback:function) | callback:弹出框关闭的回调 | 弹出框关闭回调 | | destroy() | - | 销毁 | | showPosition(lnglat:LngLatLike,component:vueComponent,options,callback) | lnglat:经纬度位置component：vue组件options:{offset:[]}偏移callback 回调 | 直接显示弹出框 | | setClassName(className:string，isFull:boolean) | className:类名isFull:false 是否全类名 | 设置类名 |

MapLine

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | | draw（geojson：GeoJson,name:string,options）：array（图层名称数组） | geojsonname:图层idoptions：{beforeId：在那个图层之下layerConfig：图层配置lineConfig？：额外高亮线配置sourceConfig?:源配置（0.0.23）} | 绘制线 | | destroy() | - | 销毁 | | visible(show)-（0.0.71） | show:boolean | 显示隐藏 |

MapCustom

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | | draw （geojson：GeoJson,name:string,options）：array（图层名称数组） | geojson name:图层id options：{ beforeId：在那个图层之下 layerConfig：图层配置 type:图层类型 ’symbol‘sliceNum？：数据分割加载数sourceConfig?:源配置（0.0.23） } | 绘制图层 | | destroy() | - | 销毁 | | visible(show)-（0.0.71） | show:boolean | 显示隐藏 |

MapCircle

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------- | | draw （geojson：GeoJson, name:string,options）： array（图层名称数组） | geojson name:图层id options：{ beforeId：在那个图层之下 layerConfig：图层配置 radius：范围（km）steps：圆边数（64）endRadius？：结束范围（km）lingConfig？：边框线配置sourceConfig?:源配置（0.0.23） } | 绘制圆/圆环 | | destroy() | - | 销毁 | | visible(show)-（0.0.71） | show:boolean | 显示隐藏 |

MapEvent

| 方法名 | 参数 | 描述 | | ---------------------------------------- | ---------------------------------------------------------- | -------- | | add（event：{[key]:function}） | event:{'key':事件名称function：事件函数} | 添加事件 | | destroy（array?） | array?:移除的事件名称不传移除全部 | 移除事件 |

MapMoreCustom

layerConfig:{
	id,
	type,
	beforeId,
	...
}

| 方法名 | 参数 | 描述 | | ------------------------------------------------------ | ------------------------------------------------------------ | ---------- | | draw（geojson:GeoJson,options:）:array | geojsonoptions:{sourceConfig:{id,type?,...}layerConfig:[]|{}} | 添加多图层 | | destroy() | - | 销毁 | | visible(show)-（0.0.71） | show:boolean | 显示隐藏 |

MapMarker

| 方法名 | 参数 | 描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | ---------- | | draw(geojson:GeoJson,htmlCallback:function) | geojsonhtmlCallback({lngLat,properties}) | 绘制marker | | addEvent(events:{[key]:function}) | events:{dragstart?:function,drag?:function,dragend?function} | 添加事件 | | destroy() | - | 销毁 | | visible(show)-（0.0.71） | show:boolean | 显示隐藏 |

AnimateLine

| 方法名 | 参数 | 描述 | | ------------- | ---- | -------- | | animate() | - | 开始动画 | | destroy() | - | 销毁动画 |

MapClusterMarker

| 方法名 | 参数 | 描述 | | ----------------------------------------- | --------------------------------------------------------- | ---------- | | draw( sourceName,htmlCallback ) | sourceName:源名称htmlCallback ({lngLat,properties}) | 绘制marker | | destroy() | - | 销毁 | | visible(show) | show:boolean | 显示隐藏 |

MapSourceEvent

| 方法名 | 参数 | 描述 | | -------------------- | --------------------- | -------- | | open（callback） | callback 结果返回方法 | 开启事件 | | destroy（） | - | 销毁事件 |

TileByGeoJson

| 方法名 | 参数 | 描述 | | ------------------------------ | ------------------------------------------------ | -------- | | draw(json,url,id,beforeId) | json:边界jsonurl：地址idbeforeId | 绘制 | | destroy() | | 销毁 | | visible(show) | show:boolean | 显示隐藏 |

MapMenu

| 方法名 | 参数 | 描述 | | ----------------------------- | -------------------------- | ------------ | | init（element，callback） | element：dom元素或者字符串 | 初始化 | | visible（show） | show :boolean | 显示隐藏菜单 | | updateXY（xy） | xy:{x:number,y:number} | 更新坐标 | | destroy() | | 销毁 |

MapMeasure

options:

{ 
  type: 'line' | 'circle' | 'polygon' | 'rect' | 'sector', //测量类型 line
  fixed: number|[number,number], //保留小数位 2
  dash: boolean,//是否启用虚线 true
  units: { //单位 
	line: [string, string],//[km,m]
    circle: [string, string], //[km²,m²]
    polygon: [string, string],//[km²,m²]
    rect: [string, string], //[km²,m²]
    sector: [string, string]//[km²,m²]
   },
   className: string,//元素类名
   point: { //点属性
       color: string, //颜色
       radius: number,//大小
       strokeWidth: number, //描边宽度
       strokeColor: string//描边颜色
   }, 
   line: { //线属性
       color: string, //颜色
       width: number, //宽度
       dasharray: [number, number] //虚线大小
    }, 
    fill: { //填充属性
        color: string //颜色
    } ，
    calcAll:boolean, //鼠标移动计算总距离/与上一点距离
    showLabel:boolean,//是否显示标签
    showArea:boolean,//是否显示面积标签
}

| 方法名 | 参数 | 描述 | | ------------------- | --------------------- | ------------ | | draw(callback?) | callback 绘制完成回调 | 开启绘制 | | off() | | 停止监听 | | remove() | | 清除绘制 | | visible(show) | show:boolean | 显示隐藏 | | destroy() | | 销毁 | | getJson() | | 获取测量结果 |

MapTileClusterCustom

| 方法名 | 参数 | 描述 | | -------------------------------------------------- | ------------------------------------------------------------ | -------- | | draw(json,options,callback?) | json:vector源options：{sourceConfig:{},layerConfig:{}|[]}callback:custom为true 自定义 | 绘制 | | visible(show) | show:boolean | 显示隐藏 | | destroy() | | 销毁 |

MapLabelByGeoJson

| 方法名 | 参数 | 描述 | | --------------------------------------- | --------------------------------------------------- | ---------------- | | draw( json, sourceName,options) | json:遮罩json sourceName:源 options：{sourceLayer?} | 绘制 | | visible(show) | show:boolean | 显示隐藏 | | visibleOrigin(show) | | 原始图层显示隐藏 | | update(json) | | 更新 | | destroy() | | 销毁 |

MapImageByGeoJson

| 方法名 | 参数 | 描述 | | ------------------------------ | ----------------------------------- | -------- | | draw( json, key, callback) | json key:图像字段 callback 绘制参数 | 绘制 | | visible(show) | show:boolean | 显示隐藏 | | destroy() | | 销毁 |

const layer = map.MapImageByGeoJson()
      // url 优先取callback值 没有则取properties.url
      layer.draw(polygonJson, 'url', (e) => {
        return {
          beforeId:null,
          url: e.properties.url,
          distance: 0,//平移距离
          direction: 0,//平移方向 正北
          rotation: 30,//旋转角度
          pivot: null,//旋转中心 [number,number]
          factor: 1.0,//缩放比例
          origin: null,//缩放锚点 [number,number]
          //raster style
          paint: {
            'raster-hue-rotate': 45
          }
        }
      })

MapSelectBox

options:{
 cursor:string,//鼠标样式
 line:{
   color:string,//线颜色
   width:number,//线宽度
   opacity:number,//线透明度
   dash:number[]//虚线样式
 },
 fill:{
   color:string,//填充颜色
   opacity:number,//填充透明度
 }
}

| 方法名 | 参数 | 描述 | | ------------------- | ----------------------- | -------- | | draw( callback) | callback 框选完成的回调 | 开启绘制 | | off() | | 停止监听 | | remove() | | 清除绘制 | | visible(show) | show:boolean | 显示隐藏 | | destroy() | | 销毁 |

AnimateMarker

options:{
	from,//起点
	to,//终点
	duration,//时长
	ease,//缓动函数
	callback//json回调
}

| 方法名 | 参数 | 描述 | | ------------------- | ---- | -------- | | start( options) | | 开启动画 | | update(options) | | 更新动画 | | stop() | | 停止动画 | | destroy() | | 销毁 |

MapMoreLayer

sourceConfig:{
  id,
  ...
}
layerConfig:{
	id,
	beforeId,
	...
}
layerConfig:[
    {},
    {}
]

| 方法名 | 参数 | 描述 | | ----------------------------------- | ------------------------------------------ | -------- | | draw( sourceConfig,layerConfig) | sourceConfig源配置layerConfig 图层配置 | 开启绘制 | | visible(show) | show:boolean | 显示隐藏 | | destroy() | | 销毁 |

MapInteraction

| 方法名 | 参数 | 描述 | | ---------------------- | -------------------------- | -------- | | open(interactions) | interactions:object|array | 开启 | | reset() | | 重置交互 | | destroy() | | 销毁 |

公共方法

| 方法名 | 参数 | 描述 | | -------------------------------- | ---------------------------------------------------- | ------------------------------- | | isValidNumber(number) | number | 判断数字是否为有效数字 | | deepClone(data) | data | 深度克隆 | | hexToRgba(color,pure) | color:十六进制颜色pure：false 是否返回数组格式 | hex颜色转rgba颜色 | | isGeoJSON(data) | data | 浅判断是否为geojson格式 | | isNumber(number) | number | 判断是否为数字 字符串类型也为真 | | judgeSizeLngLat(point,isLng) | point:经纬度数字isLng：true 是否经度在前 | 反转经纬度 | | object2Geojson | | 对象转geojson | | resversalGeojson | | 反转geojson | | reversalGeojson | | 反转geojson | | reversalLngLat | | 反转多维经纬度 | | mergeGeoJson | | 合并geojson | | getPositionType | | 判断多维数组类型 | | getArrayDepth | | 获取多维数组深度 | | latFromMercatorY | | 墨卡托转纬度 | | lngFromMercatorX | | 墨卡托转经度 | | outOfChina | | 判断点是否在国内 | | gcj02ToWgs84 | | gcj02转wgs84 | | wgs84ToGcj02 | | wgs84转gcj02 | | gcj02ToBd09 | | gcj02转bd09 | | wgs84ToBd09 | | wgs84转bd09 | | bd09ToWgs84 | | bd09转wgs84 | | bd09ToGcj02 | | bd09转gcj02 | | getSymbolRipple | | 动态canvas点 | | transformGeojson | | 自定义转换geojson | | transformLngLat | | 自定义转换position | | performChunk | | 分片执行长任务 | | getGifSymbol | | gif图标 | | getAPNGSymbol | | apng图标 | | convertPolygonToLinePolygon | | 面转成线面 | | pointNearOnLine | | 距离目标点最近的线上的点 | | polygonCenter | | 面中心点 | | invertMask | | 反转区域 | | judgePointInPolygon | | 点是否在多边形内 | | isValidLngLat | | 是否是有效经纬度 | | isValidCoordinates | | 是否为有效经纬度数组 | | metersToPixels | | 计算像素宽度 |

使用

import TestPopup from '@/views/TestPopup'

 map.addSource('point', {
      'type': 'geojson',
      'data': {
        'type': 'FeatureCollection',
        'features': [
          {
            'type': 'Feature',
            'properties': {
              name: '123'
            },
            'geometry': {
              'type': 'Point',
              'coordinates': [115, 30]
            }
          }
        ]
      }
    })
    map.addLayer({
      'id': 'point',
      'type': 'circle',
      'source': 'point',
      'paint': {
        'circle-radius': 10,
        'circle-color': '#007cbf'
      }
    })
    const tooltip = map.MapTooltip('point')
    tooltip.show((properties) => {
      return properties.name
    })
	const popup=map.MapPopup('point')
    popup.show(({properties，lngLat})=>{
        //转换vue组件 得到$el以及vue实例
        ...
        return {component:$el,instance:instance}
    },({lnglat,properties})=>{})

beforeDestroy(){
    //销毁
	tooltip.destroy()
	popup.destroy()
}