网站建设服务器的搭建方式,网站建设初期怎么添加内容,南宁网站设计和开发大赛,免费网站技术目录
1、初始化地图
2、单独添加瓦片
3、开启绘制方法
4、移除绘制数据 5、拾取经纬度
6、加点
7、加线
8、加面
9、更改图层顺序
10、更改实体样式
11、移除实体或图层
12、定位某个点
13、定位数组
14、锁定实体跟随视角
15、获取视窗
16、设置俯仰角
17、设…目录
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-v11style: 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 绘制方法* typeString 绘制类型 举例draw_point* dataIdString 上层界面使用*/
openDraw(drawOption,callback){var that this;if(drawOption){//取值draw_point draw_line_string draw_polygonthat.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* removeIdArrayArray 唯一标识的集合在绘制的方法里会返回 必传*/
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* idString 唯一标识 必传* paintInfoObject 图标信息 可选* layoutInfoObject 图标信息 可选* pointsObject 点位数据 举例{ 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的可选数字 默认16text-size:item?.layoutInfo?.hasOwnProperty(text-size) ? item?.layoutInfo[text-size] : 16,//是否可见 visible/nonevisibility: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* idString 唯一标识 必传* paintInfoObject 线样式设置 可选* layoutInfoObject 线样式设置 可选* 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/nonevisibility: 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默认为 mapline-translate-anchor: item?.paintInfo?.hasOwnProperty(line-translate-anchor) ? item?.paintInfo[line-translate-anchor] : map,//绘制线时的不透明度。 0 ~ 1之间的可选数字 默认值为 1line-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* idString 唯一标识 必传* polygonInfoObject 面样式设置 可选* 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/nonevisibility: 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之间的可选数字 默认值为 1line-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、更改图层顺序
/*** topLayerString 顶部图层的图层id 必传* bottomLayerString 底部图层的图层id 必传*/
changeLayerZIndex(bottomLayer,topLayer){this.mapboxMap.moveLayer(bottomLayer,topLayer);
},
10、更改实体样式
/*** description 更改layer/paint属性* type String 取值layout/paint* idString layer图层的唯一标识 点线在id前面拼接layer_* 如果修改面的填充属性拼接layer_fill_* 如果修改面的边线属性拼接layer_outline_ 必传* statsString 属性名 例如icon-rotate 必传* valueString 属性值 必传*/
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* removeIdArrayArray 举例[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* centerArray 中心点 举例[116,39] 必传* zoomNumber 地图层级 可选默认值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* latlngArrArray 举例[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 设置俯仰角* degreeNumber 度数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 设置方位角* degreeNumber 相机的方位是地图的视觉旋转从北方逆时针方向测量范围在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* pointArrayArray 举例[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:divdiv stylefont-size: 18px我是你好的标题/divdiv我是你好的内容/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);
