本文主要是介绍关于mapbox的一些学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、常用概念
1.0 常用地图框架 & 优劣势比较
https://juejin.cn/post/7250876388013211685?searchId=202406141628234ADB265CF050EC91CCCE
1.1 瓦片图
瓦片地图_百度百科
1.2 天地图
“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。
天地图API
1.3 geojson
GeoJson_百度百科
GeoJSON是一种对各种地理数据结构进行编码的格式。
type类型：
"Point" ： 点
"MultiPoint" ： 多点
"LineString"： 线
"MultiLineString"： 多线
"Polygon"：面
"MultiPolygon"：多面
"GeometryCollection"：几何集合
"Feature"：特征
"FeatureCollection"：特征集合
{"type": "FeatureCollection","features": [{"type": "Feature","geometry": {"type": "Point","coordinates": [102.0, 0.5]},"properties": {"prop0": "value0"}}, {"type": "Feature","geometry": {"type": "LineString","coordinates": [[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]]},"properties": {"prop0": "value0","prop1": 0.0}}, {"type": "Feature","geometry": {"type": "Polygon","coordinates": [[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0]]},"properties": {"prop0": "value0","prop1": {"this": "that"}}}]
}1.4 bbox
2、常用学习网址
2.1 mapbox官网（全英文，暂未找到中文网）
API Reference | Mapbox GL JS | Mapbox
2.2 turf文档 处理各种地图算法
GET START | Turf.js中文网
3、常用api
3.1 地图初始化
import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'your TOKEN';
const map = new mapboxgl.Map({container: document.getElementById('map'), // container IDstyle: '',center: [0,0],zoom: 14,language: 'zh-Hans',
});
// 添加导航控件（放大缩小控件）
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'bottom-right');
// 添加全屏控件
const fullscreen = new mapboxgl.FullscreenControl();
map.addControl(fullscreen, 'bottom-right');
3.2 常用操作
添加图层/删除图层/添加图片/删除图片/修改图层层级/图层显隐
map.addLayer({id: 'line',type: 'line',source: {type: 'geojson',data: line,},layout: {'line-miter-limit': 2,'line-join': 'miter',},paint: {'line-color': '#AF5','line-width': 1,},
});
map.addLayer({id: 'point',source: {type: 'geojson',data: point,},type: 'symbol',layout: {'icon-image': 'car','icon-size': 0.2,'icon-rotate': ['get', 'bearing'],'icon-rotation-alignment': 'map','icon-allow-overlap': true,'icon-ignore-placement': true,},
});
map.loadImage(`***.png`,(error, image) => {if (error) throw error;if (!map.hasImage('car')) {map.addImage('car', image);}
})
if (map.getLayer('line')) map.removeLayer('line');
if (map.getSource('line')) map.removeSource('line');
if (map.getLayer('point')) map.removeLayer('point');
if (map.getSource('point')) map.removeSource('point');
if (map.hasImage('car')) map.removeImage('car');if (map.getLayer('layer1') && map.getLayer('layer2')) {map.moveLayer('layer1', 'layer2'); //layer2在上方
}if (map.getLayer('layer')) {map?.setLayoutProperty('layer', 'visibility', visible ? 'none' : 'visible');
}3.3 事件
map.on('click', handleClick);
map.on('load', handleLoad);3.4 添加弹框/删除弹框
const pop = new mapboxgl.Popup({ closeOnClick: false, closeButton: true }).setLngLat(lngLat).setHTML(<div>abc</div>).addTo(map);
pop?.remove();3.5 source 和 layer 的关系
3.6 常用插件
import syncMaps from '@mapbox/mapbox-gl-sync-move';
多地图同步插件import * as turf from '@turf/turf';
地图计算插件import MapboxDraw from '@mapbox/mapbox-gl-draw';
绘制地图插件3.7 地图绘制操作
if (!map.getSource('mapbox-gl-draw-cold')) {const drawPluginsFn = new MapboxDraw({userProperties: true, // 允许用户在要素上添加任意属性displayControlsDefault: false, // 隐藏默认工具栏controls: {polygon: true,trash: true,combine_features: true,uncombine_features: true,},});map.addControl(drawPluginsFn);
}map.on('draw.create', function (e) {})
map.on('draw.delete', function (e) {})
map.on('draw.uncombine', function (e) {})
map.on('draw.selectionchange', function (e) {})
map.on('draw.update', function (e) {})
这篇关于关于mapbox的一些学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
