mapbox-gl知识点整理

1.mapbox概述：mapbox致力打造全球最漂亮的个性化 地图，样式的设置都支持矢量瓦片。目前mapbox-gl.js的版本是11.0版本，样式版本由7升到8。默认的投影坐标是3857。加载矢量切片服务时需要加载sprite【图标符号】和glyphs【指定矢量图层的字体】。其中sprite用来指定图标资源的url，一般情况下是.json或者.png后缀结尾；glyphs则是以.pdf后缀结尾。矢量切片有加载速度快，样式好看，可扩展的优点，缺点是底图加载不快。2.map的概述：map的组成分成两部分，一部份是数据来源【source】，另外一部分是数据呈现在界面的样子【style】。（1）source包括vector【矢量瓦片】、raster【栅格瓦片】、geojson【各种矢量数据】、image【图片】和video【视屏】等；（2）layer包括background【不需要source】、fill、symbol、raster、circle和line等图层；3.运算符：（1）对于数值执行运算符：【+    -      *     /】如： map.setFilter('symbol', ['==', 'name', 'dangerous']);（2）操作布尔值和条件运算符的逻辑运算符 ：【case 、 let】如：'circle-color': ['case',['<', ['get', 'speed'], 10.8], 'rgba(0,0,0,0)', //<10.8['<', ['get', 'speed'], 17.2], 'rgba(153, 255, 153, .9)', //>=10.8 & <17.2['<', ['get', 'speed'], 24.5], 'rgba(102, 204, 255, .9)',['<', ['get', 'speed'], 32.7], 'rgba(255, 255, 102, .9)',['<=', ['get', 'speed'], 41.5], 'rgba(253, 139, 0, .9)',['<=', ['get', 'speed'], 50.1], 'rgba(255, 51, 0, .9)', //>=41.5 & <50.1'rgba(255, 0, 255, .9)' // 默认值, >=50.1
]（3）操作字符串的字符串运算：【如：string转number】；（4）数据源功能属性的访问：【get】如： "icon-color": ["case",["boolean", ["feature-state", "hover"], false],"#F89806",["boolean", ["==", ["get", "state"], 0], false],"#2363F8",["get", "color"]]；（5）定义当前地图视图的参数访问：【zoom】4.标记介绍：点标记 Marker、灵活点标记 ElasticMarker、圆形标记 CircleMarker和文本标记 Text；5.map常用方法总结：（1）setLayoutProperty：在指定的样式层中设置布局属性的值；map.setLayoutProperty(layer,name,value);map.setLayoutProperty(clickedLayer, 'visibility', 'none');//图层隐藏map.setLayoutProperty(clickedLayer, 'visibility', 'visible');//图层显示（2）setData：修改数据map.getSource('drone').setData(geoJson);//修改数据（3）设置鼠标样式：map.getCanvas().style.cursor = 'pointer';map.setCursor('url(./image/hand.png) 4 12, auto');//自定义图片var canvas = map.getCanvasContainer();canvas.style.cursor = 'move';canvas.style.cursor = 'grab';canvas.style.cursor = 'grabbing';（4）获取图层：map.getStyle().layers;（5）fitBounds：平移和缩放地图到适合的范围.map.fitBounds([[32.958984, -5.353521],[43.50585, 5.615985]]);或者var bound =  {_sw: LngLat {lng: -73.9876, lat: 40.7661}, _ne: LngLat {lng: -73.9397, lat: 40.8002}}；map.fitBounds(bound , {padding: 20});(6)setPaintProperty:在指定的样式层中设置一个绘画属性的值map.setPaintProperty(图层id,'line-color','#555bff');（7）设置语言标识：map.addControl(new MapboxLanguage({defaultLanguage: 'zh'   //中文标识}));（8）设置指定id图层的缩放范围map.setLayerZoomRange(layerId, minzoom, maxzoom);