基于MapBox的方法封装及调用

目录

1、初始化地图

2、单独添加瓦片

3、开启绘制方法

4、移除绘制数据

 5、拾取经纬度

6、加点

7、加线

8、加面

9、更改图层顺序

10、更改实体样式

11、移除实体或图层

12、定位某个点

13、定位数组

14、锁定实体跟随视角

15、获取视窗

16、设置俯仰角

17、设置方位角

18、设置地图中心点

19、开启/关闭地图事件监听

20、部分方法调用示例

 加点

 加线

加面

移除实体或图层

更改图层顺序

开启关闭事件监听 

定位某个点

定位数组

开启绘制

移除绘制

锁定实体跟随视角

更改实体样式

设置俯仰角

设置方位角

设置地图中心点

获取视窗

---

注：官网地址：Map | Mapbox GL JS | Mapbox

        mapbox Style规范：整理一份完整的Mapbox Style 规范 - 知乎

1、初始化地图

this.mapboxMap = new mapboxgl.Map({container: "mapBoxMapContainer",//容器zoom: mapOptions.zoom ? mapOptions.zoom : 9,//层级center: mapOptions.centerPoint ? mapOptions.centerPoint : [116.39, 39.91],//中心点//图层（可用mapbox提供的在线图层，举例：mapbox://styles/mapbox/streets-v11）style: mapOptions.mapBoxUrl,//true则多个源的符号会相互碰撞。false则对每个源中的符号分别运行碰撞检测crossSourceCollisions: false
});

2、单独添加瓦片

this.mapboxMap.addLayer({id: 'tilelayer',//取值参考：https://docs.mapbox.com/style-spec/reference/layers/#typetype:"raster",//取值参考：https://docs.mapbox.com/style-spec/reference/sources/source:{"type": "raster","tiles": [mapOptions.mapBoxUrl],}
});

3、开启绘制方法

        引入mapbox-gl-draw.js和mapbox-gl-draw.css

//地图加载完成后 初始化插件
this.mapboxMapDraw = new MapboxDraw({displayControlsDefault: false,//不显示默认的控件按钮
});
this.mapboxMap.addControl(this.mapboxMapDraw);/*** @description 绘制方法* type：String 绘制类型 举例'draw_point'* dataId：String 上层界面使用*/ 
openDraw(drawOption,callback){var that = this;if(drawOption){//取值"draw_point" "draw_line_string" "draw_polygon"that.mapboxMapDraw.changeMode(drawOption?.type);that.mapboxMap.on("draw.create", function (feature) {if(feature?.features.length){that.callbackFunc({code: 1,geometryId: feature.features[0]?.id,point: feature.features[0]?.geometry?.coordinates,dataId: drawOption?.dataId},callback);}else{that.callbackFunc("参数错误");}});that.mapboxMap.on("draw.update", function (feature) {if(feature?.features.length){that.callbackFunc({code: 1,geometryId: feature.features[0]?.id,point: feature.features[0]?.geometry?.coordinates,dataId: drawOption?.dataId},callback);}else{that.callbackFunc("参数错误");}});that.mapboxMap.on("draw.delete", function (feature) {});}else{that.callbackFunc("参数错误");}
},

4、移除绘制数据

/*** @description 删除绘制的点线面 接收格式 String* removeIdArray：Array 唯一标识的集合，在绘制的方法里会返回 必传*/
removeDrawById(removeIdArray,callback){if(removeIdArray?.length){try{removeIdArray.forEach((item,index)=>{if(this.mapboxMapDraw.get(item.geometryId)){this.mapboxMapDraw.delete(item.geometryId);}});}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

 5、拾取经纬度

//开启拾取方法 考虑项目是否在pc端打开 分别判断
pickUpLatLng(callback){if(this.getBrowser() == "pc" || this.getBrowser() == "linux"){this.mapboxMap.on('click',(event) =>{this.pickUpLatLngMonitor(event,callback)});}else{this.mapboxMap.on('touchend',(event) =>                    {this.pickUpLatLngMonitor(event,callback)});}
},
//检测设备
getBrowser(){var sUserAgent = navigator.userAgent.toLocaleLowerCase();var isLinux = (String(navigator.platform).indexOf("linux") > -1);var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsCE = sUserAgent.match(/windows nt/i) == "windows nt";if (isLinux) {return "linux";} else if (bIsIpad || bIsIphoneOs) {return "ios";} else if (bIsWM) {return "wp";} else if (bIsCE) {return "pc";} else if (bIsAndroid) {return "android";}
},
//回调给上层经纬度
pickUpLatLngMonitor(e,callback){this.callbackFunc({code:1,data:e.lngLat,msg:"拾取经纬度信息！"},callback);
},

6、加点

 第一种方式：

/*** @description 添加点 接收格式Array* id：String 唯一标识 必传* paintInfo：Object 图标信息 可选* layoutInfo：Object 图标信息 可选* points：Object 点位数据 举例{ lat: 39,lon: 116} 必传*/
addPoint(pointOption,callback) {if (pointOption?.length) {try{let tempStorageInfo = {};//id为key，经纬度是值pointOption.forEach((item, index) => {if (item.id && item.point?.lat && item.point?.lon) {if(!item.layoutInfo){item.layoutInfo = {};}if(!item?.layoutInfo?.hasOwnProperty("icon-image")){item.layoutInfo["icon-image"] = "default";}//icon-image 需要显示的图标的名字 对应assets下img下的名字this.mapboxMap.loadImage(require("../../../assets/img/" + item.layoutInfo["icon-image"] + ".png"),(error, image) => {if (error) throw error;if(!this.mapboxMap.hasImage(item.layoutInfo["icon-image"])){this.mapboxMap.addImage(item.layoutInfo["icon-image"], image);}let sourceObject = {type: 'geojson',data: {type: 'Feature',geometry: {'type': 'Point','coordinates': [item.point.lon, item.point.lat]}}};//pop弹窗if(item?.layoutInfo?.description){sourceObject["data"]["properties"] = {description:item.layoutInfo.description,icon:'theatre'};}//实体已存在则修改const source = this.mapboxMap.getSource(item.id);const layer = this.mapboxMap.getLayer('layer_'+item.id);if(source){source.setData({type: 'Feature',geometry: {'type': 'Point','coordinates':[item.point.lon, item.point.lat]}});if(layer && (item?.layoutInfo || item?.paintInfo)){if(item?.layoutInfo && Object.keys(item.layoutInfo).length){for(let layoutKey in item.layoutInfo){this.mapboxMap.setLayoutProperty('layer_'+item.id, layoutKey, item.layoutInfo[layoutKey]);}}if(item?.paintInfo && Object.keys(item.paintInfo).length){for(let paintKey in item.paintInfo){this.mapboxMap.setPaintProperty('layer_'+item.id, paintKey, item.paintInfo[paintKey]);}}}}else{this.mapboxMap.addSource(item.id, sourceObject);this.mapboxMap.addLayer({id: 'layer_'+item.id,type: 'symbol',source: item.id,layout: {'icon-image': item?.layoutInfo["icon-image"],//大于等于0的可选数字。单位是原始图标大小的因素。默认为1 支持表达式。'icon-size':item?.layoutInfo?.hasOwnProperty("icon-size") ? item?.layoutInfo["icon-size"] : 1,/** 锚点位置 取值center/left/right/top/bottom* /top-left/top-right/bottom-left/bottom-right*/'icon-anchor':item?.layoutInfo?.hasOwnProperty("icon-anchor") ? item?.layoutInfo["icon-anchor"] : "center",/** 图标与其锚的偏移距离。正值表示向右和向下，而负值表示向左和向上。* 每个组件乘以icon-size的值，以获得以像素为单位的最终偏移量。* 当与图标旋转结合使用时，偏移量将像旋转方向一样向上。*/'icon-offset':item?.layoutInfo?.hasOwnProperty("icon-offset") ? item?.layoutInfo["icon-offset"] : [0,0],//绘制图标时的不透明度。 0 ~ 1之间的可选数字// 'icon-ignore-placement':false,//碰撞后可见先加的'icon-allow-overlap':false,//碰撞后可见后加的// "symbol-z-order": "source",//顺时针旋转图标。单位是度。默认为0 支持表达式'icon-rotate':item?.layoutInfo?.hasOwnProperty("icon-rotate") ? item?.layoutInfo["icon-rotate"] : 0,'text-field':item?.layoutInfo?.hasOwnProperty("text-field") ? item?.layoutInfo["text-field"] : "",/** 文本位置 取值center/left/right/top/bottom* /top-left/top-right/bottom-left/bottom-right*/'text-anchor':item?.layoutInfo?.hasOwnProperty("text-anchor") ? item?.layoutInfo["text-anchor"] : "top",'text-offset':item?.layoutInfo?.hasOwnProperty("text-offset") ? item?.layoutInfo["text-offset"] : [0,0],//大于等于0的可选数字 默认16'text-size':item?.layoutInfo?.hasOwnProperty("text-size") ? item?.layoutInfo["text-size"] : 16,//是否可见  visible/none"visibility":item?.layoutInfo?.hasOwnProperty("visibility") ? item?.layoutInfo.visibility : "visible",// "symbol-sort-key":item?.layoutInfo?.hasOwnProperty("symbol-sort-key") ? item?.layoutInfo["symbol-sort-key"] : 2,},paint:{'icon-opacity':item?.paintInfo?.hasOwnProperty("icon-opacity") ? item?.paintInfo["icon-opacity"] : 1,'text-color':item?.paintInfo?.hasOwnProperty("text-color") ? item?.paintInfo["text-color"] : "#ffffff",}});//pop弹窗if(item?.layoutInfo?.description){this.mapboxMap.on('click','layer_'+item.id,(e)=>{const coordinates = e.features[0].geometry.coordinates;const description = e.features[0].properties.description;new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(this.mapboxMap);})}}tempStorageInfo[item.id] = [item.point.lon, item.point.lat];//如果需要飞行操作 传入fly参数if(item.flyInfo){this.locationPoint(item.flyInfo);}//如果需要跟随操作 传入follow参数if(item.followInfo){this.followLockEntity(item.followInfo);}//如果需要旋转地图操作 传入bearing参数if(item.bearing){this.setBearing(item.bearing);}if(index == pointOption.length-1){this.callbackFunc({code: 1,data:tempStorageInfo,msg: "添加成功！"},callback);}});}});}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

 第二种方式：

if (pointOption && pointOption.length) {pointOption.forEach((item, index) => {if (item.id && item.iconName && item.point.lat && item.point.lon) {let imageStr = require("../../../assets/img/" + item.iconName + ".png");var ele = document.createElement("div");var imgEle = document.createElement("img");imgEle.src = imageStr;ele.appendChild(imgEle);const marker = new mapboxgl.Marker(ele).setLngLat([item.point.lon, item.point.lat]).addTo(this.mapboxMap);}})
}

7、加线

/*** @description 添加线 接收格式Array* id：String 唯一标识 必传* paintInfo：Object 线样式设置 可选* layoutInfo：Object 线样式设置 可选* points：二维Array 点位数据 必传*/
addLine(lineOption,callback) {if(lineOption?.length){try{let tempStorageInfo = {};//id为key，经纬度点集是值lineOption.forEach((item, index) => {if(item.id && item.points){//实体已存在则修改const source = this.mapboxMap.getSource(item.id);const layer = this.mapboxMap.getLayer('layer_'+item.id);if(source){if(source._data && source._data.geometry && source._data.geometry.coordinates){if(item.points.length > 0){let tempData = null;if(item.points.length > 1){tempData= item.points;}else {tempData = JSON.parse(JSON.stringify(source._data.geometry.coordinates));tempData.push(item.points[0]);}source.setData({type: "Feature",properties: {},geometry: {type: "LineString",coordinates: tempData},});}if(layer && (item.layoutInfo || item.paintInfo)){if(item?.layoutInfo && Object.keys(item.layoutInfo).length){for(let layoutKey in item.layoutInfo){this.mapboxMap.setLayoutProperty('layer_'+item.id, layoutKey, item.layoutInfo[layoutKey]);}}if(item?.paintInfo && Object.keys(item.paintInfo).length){for(let paintKey in item.paintInfo){this.mapboxMap.setPaintProperty('layer_'+item.id, paintKey, item.paintInfo[paintKey]);}}}}}else{this.mapboxMap.addSource(item.id, {type: "geojson",data: {type: "Feature",properties: {},geometry: {type: "LineString",coordinates: item.points,},},});this.mapboxMap.addLayer({id: 'layer_' + item.id,type: "line",source: item.id,layout: {//线交叉时的显示样式 bevel(方型交点)/round(圆型交点)/miter(尖型交点)"line-join": item?.layoutInfo?.hasOwnProperty("line-join") ? item?.layoutInfo["line-join"] : "round",//线末端的显示样式 butt(方型末端仅端点)/round/(圆型末端)square(方型末端)"line-cap": item?.layoutInfo?.hasOwnProperty("line-cap") ? item?.layoutInfo["line-cap"] : "round",//是否可见  visible/none"visibility": item?.layoutInfo?.hasOwnProperty("visibility") ? item?.layoutInfo["visibility"] : "visible",// "line-sort-key":item?.layoutInfo?.hasOwnProperty("line-sort-key") ? item?.layoutInfo["line-sort-key"] : 1,},paint: {// 线的颜色（可选，默认值为 #000000。如果设置了 line-pattern，则 line-color 将无效）"line-color": item?.paintInfo?.hasOwnProperty("line-color") ? item.paintInfo["line-color"] : '#888',// 线用的图案（可选，这里填写在 sprite 雪碧图中图标名称。为了图案能无缝填充，图标的高宽需要是 2 的倍数）"line-pattern": item?.paintInfo?.hasOwnProperty("line-pattern") ? item.paintInfo["line-pattern"] : "",//大于等于0的可选数字。单位为像素，默认值为 1。"line-width": item?.paintInfo?.hasOwnProperty("line-width") ? item.paintInfo["line-width"] : 3,// 线的模糊度（可选，值 >= 0，默认值为 0，单位：像素）"line-blur": item?.paintInfo?.hasOwnProperty("line-blur") ? item.paintInfo["line-blur"] : 0,// 线的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）"line-translate": item?.paintInfo?.hasOwnProperty("line-translate") ? item.paintInfo["line-translate"] : [0, 0],// 线的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）"line-translate-anchor": item?.paintInfo?.hasOwnProperty("line-translate-anchor") ? item?.paintInfo["line-translate-anchor"] : "map",//绘制线时的不透明度。 0 ~ 1之间的可选数字 默认值为 1"line-opacity": item?.paintInfo?.hasOwnProperty("line-opacity") ? item?.paintInfo["line-opacity"] : 1,},});//如果需要更改图层顺序if(item?.coverId?.length > 0){item?.coverId.forEach((coverItem)=>{if(this.mapboxMap.getLayer('layer_'+coverItem)){this.changeLayerZIndex('layer_' + item.id,'layer_'+coverItem);}})}//点击高亮操作if(this.getBrowser() == "pc" || this.getBrowser() == "linux"){this.mapboxMap.on('click','layer_' + item.id,(e)=>{this.callbackFunc({code: 1,data:'layer_' + item.id,msg: "获取成功！"},callback);})}else{//点击高亮操作this.mapboxMap.on('touchend','layer_' + item.id,(e)=>{this.callbackFunc({code: 1,data:'layer_' + item.id,msg: "获取成功！"},callback);})}}tempStorageInfo[item.id] = item.points;if(index == lineOption.length-1){this.callbackFunc({code: 1,data:tempStorageInfo,msg: "添加成功！"},callback);}}});}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

8、加面

/*** @author yangjie* @time 2023/10/13 11:24:07* @description 添加面 接收格式Array* id：String 唯一标识 必传* polygonInfo：Object 面样式设置 可选* points：二维Array 点位数据 必传*/
addPolygon(polygonOption,callback) {if(polygonOption?.length) {try{let tempStorageIdArr = [];polygonOption.forEach((item, index) => {if (item.id && item.points) {//实体已存在则删除const source = this.mapboxMap.getSource(item.id);const polygonFillLayerObject = this.mapboxMap.getLayer('layer_fill_'+item.id);const polygonOutlineLayerObject = this.mapboxMap.getLayer('layer_outline_'+item.id);//已存在 修改if(source){source.setData({type: 'Feature',geometry: {type: 'Polygon',coordinates: item.points}});if(polygonFillLayerObject){let layoutInfo = item.fill.layoutInfo;let paintInfo = item.fill.paintInfo;if(layoutInfo && Object.keys(layoutInfo).length){for(let layoutKey in layoutInfo){this.mapboxMap.setLayoutProperty('layer_'+item.id, layoutKey, layoutInfo[layoutKey]);}}if(paintInfo && Object.keys(paintInfo).length){for(let paintKey in paintInfo){this.mapboxMap.setPaintProperty('layer_'+item.id, paintKey, paintInfo[paintKey]);}}}if(polygonOutlineLayerObject){let layoutInfo = item.outLine.layoutInfo;let paintInfo = item.outLine.paintInfo;if(layoutInfo && Object.keys(layoutInfo).length){for(let layoutKey in layoutInfo){this.mapboxMap.setLayoutProperty('layer_'+item.id, layoutKey, layoutInfo[layoutKey]);}}if(paintInfo && Object.keys(paintInfo).length){for(let paintKey in paintInfo){this.mapboxMap.setPaintProperty('layer_'+item.id, paintKey, paintInfo[paintKey]);}}}}else{this.mapboxMap.addSource(item.id, {type: 'geojson',data: {type: 'Feature',geometry: {type: 'Polygon',coordinates: item.points}}});this.mapboxMap.addLayer({id: 'layer_fill_' + item.id,type: 'fill',source: item.id,layout: {"visibility": item.fill?.layoutInfo?.hasOwnProperty("visibility") ? item.fill?.layoutInfo["visibility"] : "visible",},paint: {/** 填充部分的颜色。* 可指定为rgba，如果使用的话，该颜色的不透明度不会影响1px描边的不透明度。*/'fill-color': item.fill?.paintInfo?.hasOwnProperty("fill-color") ? item.fill?.paintInfo["fill-color"] : '#83e5af',/** 整个填充层的不透明度。取值0~1* 与填充颜色相反，如果使用了描边，这个值也会影响填充周围1px的描边。*/'fill-opacity': item.fill?.paintInfo?.hasOwnProperty("fill-opacity") ?item.fill?.paintInfo["fill-opacity"] : 0.5,//填充的轮廓颜色。如果未指定，则匹配fill-color的值。'fill-outline-color': item.fill?.paintInfo?.hasOwnProperty("fill-outline-color") ?item.fill?.paintInfo["fill-outline-color"] : "#83e5af",//几何的偏移量。值为[x, y]，其中负数分别表示向左和向上。'fill-translate': item.fill?.paintInfo?.hasOwnProperty("fill-translate") ?item.fill?.paintInfo["fill-translate"] : [0, 0],//平移的参考对象。取值 map(相对于地图)/viewport(相对于视窗)'fill-translate-anchor': item.fill?.paintInfo?.hasOwnProperty("fill-translate-anchor") ?item.fill?.paintInfo["fill-translate-anchor"] : "map",}});this.mapboxMap.addLayer({id: 'layer_outline_' + item.id,type: 'line',source: item.id,layout: {//是否可见  visible/none"visibility": item.outLine?.layoutInfo?.hasOwnProperty("visibility") ? item.outLine?.layoutInfo["visibility"] : "visible",},paint: {'line-color': item.outLine?.paintInfo?.hasOwnProperty("line-color") ?item.outLine?.paintInfo["line-color"] : '#83e5af','line-width': item.outLine?.paintInfo?.hasOwnProperty("line-width") ?item.outLine?.paintInfo["line-width"] : 3,//绘制线时的不透明度。 0 ~ 1之间的可选数字 默认值为 1"line-opacity": item.outLine?.paintInfo?.hasOwnProperty("line-opacity") ?item.outLine?.paintInfo["line-opacity"] : 1,}});}tempStorageIdArr.push(item.id);if(index == polygonOption.length-1){this.callbackFunc({code: 1,data:tempStorageIdArr,msg: "添加成功！"},callback);}}});}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

9、更改图层顺序

/*** topLayer：String 顶部图层的图层id 必传* bottomLayer：String 底部图层的图层id 必传*/
changeLayerZIndex(bottomLayer,topLayer){this.mapboxMap.moveLayer(bottomLayer,topLayer);
},

10、更改实体样式

/*** @description 更改layer/paint属性* type String 取值layout/paint* id：String layer图层的唯一标识 点线在id前面拼接layer_*            如果修改面的填充属性拼接layer_fill_*            如果修改面的边线属性拼接layer_outline_ 必传* stats：String 属性名 例如'icon-rotate'  必传* value：String 属性值 必传*/
updateLayoutOrPaint(updateOption,callback){try{if(updateOption?.type == "layout"){this.mapboxMap.setLayoutProperty(updateOption?.id, updateOption?.stats, updateOption?.value);}else if(updateOption?.type == "paint"){this.mapboxMap.setPaintProperty(updateOption?.id, updateOption?.stats, updateOption?.value);}this.callbackFunc({code: 1,msg: "更新成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}
},

11、移除实体或图层

/*** @description 移除Source元素和Layer元素 参数接收格式：Array* removeIdArray：Array 举例['polygon'] 需要删除的id集合 必传*/
removeSourceAndLayer(removeIdArray,callback){if(removeIdArray?.length){try{removeIdArray.forEach((item,index)=>{const sourceObject = this.mapboxMap.getSource(item);const layerObject = this.mapboxMap.getLayer('layer_'+item);const polygonFillLayerObject = this.mapboxMap.getLayer('layer_fill_'+item);const polygonOutlineLayerObject = this.mapboxMap.getLayer('layer_outline_'+item);if(layerObject) this.mapboxMap.removeLayer('layer_'+item);if(polygonFillLayerObject) this.mapboxMap.removeLayer('layer_fill_'+item);if(polygonOutlineLayerObject) this.mapboxMap.removeLayer('layer_outline_'+item);if(sourceObject) this.mapboxMap.removeSource(item);if(index == removeIdArray.length-1){this.callbackFunc({code: 1,data:removeIdArray,msg: "删除成功！"},callback);}});}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

12、定位某个点

/*** @description 定位 接收格式Object* center：Array 中心点 举例：[116,39] 必传* zoom：Number 地图层级  可选，默认值9* duration:Number 飞行总时长，单位ms 可选，默认值800*/
locationPoint(locationOption,callback) {if(locationOption?.center){try{this.mapboxMap.flyTo({center: locationOption.center,zoom: locationOption?.zoom ? locationOption?.zoom : 9,duration: locationOption?.duration ? locationOption?.duration : 800});this.callbackFunc({code: 1,msg: "定位成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

13、定位数组

        注：多点，用于定位某条线或某个区域

/*** @description 定位数组 接收格式Array* pointArray：二维Array 举例[[-79, 43], [-73, 45]] 必传*/
locationArray(pointArray,callback){if(pointArray){try{this.mapboxMap.fitBounds(pointArray, {padding: {top: 10, bottom:25, left: 15, right: 5}});this.callbackFunc({code: 1,msg: "定位成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}}else{this.callbackFunc("参数错误");}
},

14、锁定实体跟随视角

        注：用于导航或者需要锁定某个实体

/*** @description 锁定实体，跟随视角* followInfo Object*      latlngArr：Array 举例[116,39] 跟随的经纬度*      altitude:Number 高度 跟随视角的高度*/
followLockEntity(followInfo,callback){try{const camera = this.mapboxMap.getFreeCameraOptions();const position = followInfo?.latlngArr ? followInfo.latlngArr : [116,39];const altitude = followInfo?.altitude ? followInfo.altitude : 3000;camera.position = mapboxgl.MercatorCoordinate.fromLngLat(position, altitude);camera.lookAtPoint(position);this.mapboxMap.setFreeCameraOptions(camera);this.callbackFunc({code: 1,msg: "跟随成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}
},

15、获取视窗

/*** @description 获取视窗* @return*/
getBounds(callback){try{const bounds = this.mapboxMap.getBounds();this.callbackFunc({code: 1,data:bounds,msg: "获取成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}
},

16、设置俯仰角

/*** @description 设置俯仰角* degree：Number 度数0-60 必填*/
setPitch(degree,callback){try{this.mapboxMap.setPitch(degree, {duration: 2000});this.callbackFunc({code: 1,msg: "设置成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}
},

17、设置方位角

/*** @description 设置方位角* degree：Number 相机的方位是地图的视觉旋转，从北方逆时针方向测量，范围在0°到360°之间。*         0°的方位使地图定向，使北方“向上”，90°的方位使地图定向，使东方“向上”，以此类推。 必传*/
setBearing(degree,callback){try{this.mapboxMap.setBearing(degree);this.callbackFunc({code: 1,msg: "设置成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}
},

18、设置地图中心点

/*** @description 设置地图中心点 接收格式Array* pointArray：Array 举例[116, 39] 必传*/
setCenter(pointArray,callback){try{this.mapboxMap.setCenter(pointArray);this.callbackFunc({code: 1,msg: "设置成功！"},callback);}catch(err){this.callbackFunc("未知错误");throw err;}
},

19、开启/关闭地图事件监听

        注：mapbox中关闭监听事件时，必须与开启监听事件的回调函数一致才能成功取消监听

//开启监听地图拖拽（mapbox不支持开启禁止拖拽和禁止平移事件，监听鼠标拖拽后回到原始位置从而实现禁止拖拽的效果）
openListenMapDrag(){mapCenter = this.mapboxMap.getCenter();this.mapboxMap.on('dragend',this.dragBack);
},
//关闭监听地图拖拽
closeListenMapDrag(){this.mapboxMap.off('dragend',this.dragBack);
},
dragBack(){this.setCenter([mapCenter.lng,mapCenter.lat]);
},

20、部分方法调用示例

•  加点

let option = [{id: "ljgh-qd",paintInfo:{'icon-opcity':1,'text-color':"red",},layoutInfo:{'icon-image':"路径规划-引导点",'icon-size':0.4,'icon-anchor':"center",'icon-offset':[0,0],'icon-rotate':0,'text-field':"0",'text-anchor':"top",'text-offset':[0,0],'text-size':18,'description':"<div><div style='font-size: 18px'>我是你好的标题</div><div>我是你好的内容</div></div>",'visibility':"visible",},point: {lat: 39,lon: 116},flyInfo:{center: [116,39],zoom: 11,duration: 800},followInfo:{latlngArr:[116,39],altitude:1000},bearing:90
},{id: "ljgh-qd1",point: {lat: 39,lon: 118},
}];
this.$refs.htMap.MapOption('addPoint', option);

•  加线

let coordinates = [[116.483696, 39.833818],[116.483482, 39.833174],[116.483396, 39.8327]
];
let coordinates1 = [[90.4861, 41.828802],[111.486958, 37.82931],
];
let option = [{id:"nav_route",paintInfo:{"line-color":"black","line-pattern":"","line-width": 3,"line-blur": 0,"line-translate":[0, 0],"line-translate-anchor":"map","line-opacity":1},layoutInfo:{"line-join":"round","line-cap":"round","visibility":"visible",},points:coordinates,coverId:["ljgh-qd"]
},{id:"nav_route1",points:coordinates1
}];
this.$refs.htMap.MapOption('addLine', option);

• 加面

let coordinates = [[[117.13734, 40.13745],[120.03252, 40.13745],[121.03252, 37.5],[120.03252, 37.98],[117.13734, 37.98],]
];
let coordinates1 = [[[116.13734, 40.13745],[98.03252, 40.13745],[98.03252, 37.98],[116.13734, 37.98],]
];
let option = [{id:"polygon",fill:{layoutInfo:{"visibility":"visible",},paintInfo:{'fill-color': "red",'fill-opacity': 0.5,'fill-outline-color': "yellow",'fill-translate': [0,0],'fill-translate-anchor': "map",}},outLine:{layoutInfo:{"visibility":"visible",},paintInfo:{'line-color': "black",'line-width': 6,"line-opacity":0.5}},points:coordinates
},{id:"polygon1",points:coordinates1
}];
this.$refs.htMap.MapOption('addPolygon', option);

• 移除实体或图层

this.$refs.htMap.MapOption('removeSourceAndLayer',["ljgh-qd","ljgh-qd1"]);

• 更改图层顺序

this.$refs.htMap.MapOption('changeLayerZIndex',"layer_1" ,"layer_2");

• 开启关闭事件监听 

this.$refs.htMap.MapOption('openListenMapDrag');
this.$refs.htMap.MapOption('closeListenMapDrag');

• 定位某个点

this.$refs.htMap.MapOption('locationPoint', {'center':[116,39],'zoom':5
});

• 定位数组

this.$refs.htMap.MapOption('locationArray', [[90.4861, 41.828802],[111.486958, 37.82931]]);

• 开启绘制

let data = this.$refs.htMap.MapOption('openDraw',{dataId:1,type:'draw_point'
},(res) => {this.delId = res.geometryId;
});

• 移除绘制

//需要取到回调的ID传入
this.$refs.htMap.MapOption('removeDrawById', [{dataId:null,geometryId:null,
}]);

• 锁定实体跟随视角

this.$refs.htMap.MapOption('followLockEntity', {latlngArr:[138.73036, 35.36197],altitude:3000
});

• 更改实体样式

this.$refs.htMap.MapOption('updateLayoutOrPaint', {type:"layout",id:"layer_ljgh-qd",stats:'icon-rotate',value:90
});

• 设置俯仰角

this.$refs.htMap.MapOption('setPitch',80);

• 设置方位角

this.$refs.htMap.MapOption('setBearing',90);

• 设置地图中心点

this.$refs.htMap.MapOption('setCenter',[118,32]);

• 获取视窗

this.$refs.htMap.MapOption('getBounds');