Mapbox GL JS 中文文档

1. mapbox GL JS 应用场景

• 可视化，动态展示地理数据！
• 查询，过滤地图中的要素（Featrue）!
• 将数据放置在 Mapbox 风格的图层之间！
• 可以动态展示、定义样式客户端 map 上的数据！
• #D 数据的 可视化与动态展示！
• 在程序中给 map 添加 maeker\popup !

2. 关键概念

1. mapbox GL
   ‘GL’ 意为 Mapbox 是一个图形库（graphic library）, 它可以在任何浏览器端使用 OPENGL 来独立地动态可视化二维和三维的 Mapbox map!

2. Client-side rendering
   Mapbox GL JS依赖于客户端渲染。Mapbox GL JS-地图是通过在浏览器中而不是在服务器上将矢量瓦片与样式规则相结合来动态渲染的，这使得可以根据用户交互来更改地图的样式和显示数据。

3. Map Class
   mapboxgl.Map 类是每个Mapbox GL JS项目的基础。下方示例代码演示了向页面添加地图所需的最低要求：

   mapboxgl.accessToken = '<your access token here>';
   const map = new mapboxgl.Map({
        
     container: 'map', // container ID
     style: 'mapbox://styles/mapbox/streets-v12', // style URL
     center: [-74.5, 40], // starting position [lng, lat]
     zoom: 9 // starting zoom
   });
   

   style:: 地图样式的样式URL，用于确定地图包括哪些平铺集以及它们的样式。上面的示例使用Mapbox Streets v12样式。当没有向Map构造函数提供样式选项时，默认情况下会启用Mapbox标准样式。

4. Layers

• Layer 提供了 renderer 渲染数据到浏览器上的规则！

  • 异步函数
    由于Mapbox GL JS中的层是远程的，所以它们是异步的。因此，连接到Mapbox GL JS的代码通常使用事件绑定来在正确的时间更改映射。例如

    map.on('load', () => {
           
      map.addLayer({
           
        id: 'terrain-data',
        type: 'line',
        source: {
           
          type: 'vector',
          url: 'mapbox://mapbox.mapbox-terrain-v2'
        },
        'source-layer': 'contour'
      });
    });
    

    此示例代码使用map.on（‘load’，function（）｛仅在加载映射的资源（包括样式）后调用map.addLayer。如果立即运行map.addLayer，则会触发错误，因为要添加图层的样式还不存在。

  • Layer source
    mapbox GL 共有六种 layer source 类型，分别为 vector tile,、geojson、raster tile、raster dem、image、video。
    TileSet 可以包含多个名为 source layers 的子集。比如， Mapbox Streets tileset 包含 roads (source-layer)、parks (source-layer)等等。为了确保图层引用正确的源图层，图层对象还需要包括一个源图层（通常是原始文件的名称）。请参见此示例：

      map.on('load', () => {
           
      map.addLayer({
           
        id: 'rpd_parks',
        type: 'fill',
        source: {
           
          type: 'vector',
          url: 'mapbox://mapbox.3o7ubwm8'
        },
        'source-layer': 'RPD_Parks'
      });
    });
    

  • Layout and paint properties
    paint 与 Layout 用于定义 rendered 如何渲染数据到 map上，Layout 属性控制 位置 与 可见性 等其他高等级的属性，并在渲染的早期发生作用！ paint 属性控制 不透明度、颜色和平移 等细粒度的属性。 在渲染过程的后一阶段发挥作用！
    示例代码

      map.on('load', () => {
           
      map.addLayer({
           
        id: 'rpd_parks',
        type: 'fill',
        source: {
           
          type: 'vector',
          url: 'mapbox://mapbox.3o7ubwm8'
        },
        'source-layer': 'RPD_Parks',
        layout: {
           
          visibility: 'visible'
        },
        paint: {
           
          'fill-color': 'rgba(61,153,80,0.55)'
        }
      });
    });
    

5. Camera
   Camera 是地图的视野。Mapbox GL JS提供了以下参数来调整相机的视角：center、zoom、bearing（地图的视觉旋转）和 pitch（地图的可视倾斜）。贴图的初始透视图、jumpTo、easeTo和flyTo都使用常用的 Camera 选项。

3. Use Mapbox GL JS with other tools

Mapbox GL JS可以很好地与许多其他Mapbox工具配合使用。您可以在地图中使用自己的数据，创建自己的自定义地图样式，添加交互性等等。

1. use your own data
   使用Mapbox GL JS，您可以访问提供大量地理数据的 Mapbox tilesets。您也可以使用 Mapbox Studio、Mapbox TilingService 或 Uploads API上传自己的数据，然后访问并在Mapbox GL JS地图中显示。

2. style your map
   您可以使用任何 Mapbox owned style 拥有的样式（如 Mapbox Streets）来设置地图的样式。也可以使用在Mapbox Studio中创建的自定义样式。有关Mapbox GL JS地图中使用的Mapbox设计和自定义地图样式的更多示例，请参阅我们的示例页面。

3. Interactivity
   第三方工具允许您为Mapbox GL JS地图添加额外的交互性。例如，您可以使用Turf.JS在Mapbox GL JS地图中进行空间分析，使用three.JS在地图中添加3D模型，或者使用Web Audio API创建响应用户环境中声音的动画。有关将Mapbox GL JS与各种第三方工具一起使用的更多方法，请参阅我们的示例页面。

4. Mapbox web services APIs
   Mapbox GL JS是使用一个或多个Mapbox web service API的应用程序的绝佳起点。例如，可以使用Director API在地图上显示逐转弯方向，也可以使用Isochrone API显示估计的行程时间。有关将Mapbox web service API 与 Mapbox GL JS 一起使用的更多示例，请参阅我们的教程页面和Mapbox GL JS-示例页面。cs.mapbox.com/api/overview/

5. JavaScript frameworks
   Mapbox GL JS可以与包括React在内的各种JavaScript框架一起使用。要了解有关将Mapbox GL JS与React一起使用的更多信息，请参阅React应用程序教程中的使用Mapbox GL JS。

4. Attribution

当您使用Mapbox GL JS创建地图时，它会自动在地图的右下角包含属性。有关其他显示选项，请参阅 AttributionControl 的API文档。有关Mapbox需要什么类型的归因以及原因的更多详细信息，请参阅归因指南。

5. 安装使用 Mapbox GL

在开始使用Mapbox GL JS之前，您需要有一个Mapbox访问令牌，并使用 CDN 或 Mapbox GL-npmpackage 将 Mapbox GL JS.添加到您的项目中。

• 获取 Token
• CDN

 <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
 <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
 <div id='map' style='width: 400px; height: 300px;'>