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);