基于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/#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
//地图加载完成后 初始化插件
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':"我是你好的标题我是你好的内容",
'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');