基于MapBox的方法封装及调用

meetAlice2023-12-11 2:38

目录

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、初始化地图

javascript 复制代码 
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、单独添加瓦片

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

3、开启绘制方法

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

javascript 复制代码 
//地图加载完成后 初始化插件
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、移除绘制数据

javascript 复制代码 
/**
 * @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、拾取经纬度

javascript 复制代码 
//开启拾取方法 考虑项目是否在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、加点

第一种方式：

javascript 复制代码 
/**
 * @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("参数错误");
	}
},

第二种方式：

javascript 复制代码 
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、加线

javascript 复制代码 
/**
 * @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、加面

javascript 复制代码 
/**
 * @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、更改图层顺序

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

10、更改实体样式

javascript 复制代码 
/**
 * @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、移除实体或图层

javascript 复制代码 
/**
 * @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、定位某个点

javascript 复制代码 
/**
 * @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、定位数组

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

javascript 复制代码 
/**
 * @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、锁定实体跟随视角

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

javascript 复制代码 
/**
 * @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、获取视窗

javascript 复制代码 
/**
 * @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、设置俯仰角

javascript 复制代码 
/**
 * @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、设置方位角

javascript 复制代码 
/**
 * @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、设置地图中心点

javascript 复制代码 
/**
 * @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中关闭监听事件时，必须与开启监听事件的回调函数一致才能成功取消监听

javascript 复制代码 
//开启监听地图拖拽（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、部分方法调用示例

加点
javascript 复制代码 
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);
加线
javascript 复制代码 
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);
加面
javascript 复制代码 
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);
移除实体或图层
javascript 复制代码 
this.$refs.htMap.MapOption('removeSourceAndLayer',["ljgh-qd","ljgh-qd1"]);
更改图层顺序
javascript 复制代码 
this.$refs.htMap.MapOption('changeLayerZIndex',"layer_1" ,"layer_2");
开启关闭事件监听
javascript 复制代码 
this.$refs.htMap.MapOption('openListenMapDrag');
this.$refs.htMap.MapOption('closeListenMapDrag');
定位某个点
javascript 复制代码 
this.$refs.htMap.MapOption('locationPoint', {
    'center':[116,39],
    'zoom':5
});
定位数组
javascript 复制代码 
this.$refs.htMap.MapOption('locationArray', [[90.4861, 41.828802],[111.486958, 37.82931]]);
开启绘制
javascript 复制代码 
let data = this.$refs.htMap.MapOption('openDraw',{
    dataId:1,
    type:'draw_point'
},(res) => {
    this.delId = res.geometryId;
});
移除绘制
javascript 复制代码 
//需要取到回调的ID传入
this.$refs.htMap.MapOption('removeDrawById', [{
	dataId:null,
	geometryId:null,
}]);
锁定实体跟随视角
javascript 复制代码 
this.$refs.htMap.MapOption('followLockEntity', {
	latlngArr:[138.73036, 35.36197],
	altitude:3000
});
更改实体样式
javascript 复制代码 
this.$refs.htMap.MapOption('updateLayoutOrPaint', {
	type:"layout",
	id:"layer_ljgh-qd",
	stats:'icon-rotate',
	value:90
});
设置俯仰角
javascript 复制代码 
this.$refs.htMap.MapOption('setPitch',80);
设置方位角
javascript 复制代码 
this.$refs.htMap.MapOption('setBearing',90);
设置地图中心点
javascript 复制代码 
this.$refs.htMap.MapOption('setCenter',[118,32]);
获取视窗
javascript 复制代码 
this.$refs.htMap.MapOption('getBounds');
相关推荐
程序猿阿伟6 分钟前
《智能指针频繁创建销毁：程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒8 分钟前
对 TypeScript 中函数如何更好的理解及使用？与 JavaScript 函数有哪些区别？
前端·javascript·typescript
瑞雨溪17 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背20 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M30 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc31 分钟前
学习electron
javascript·学习·electron
盛夏绽放39 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络2 小时前
webp 网页如何录屏？
开发语言·前端·javascript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿