mapbox开发整体流程大致如下

1.引入mapbox

以简单的一个html为例，首先引入mapbox-gl.js以及css文件，如果是在angular项目中，则需要安装对应的npm包。

2.添加地图

首先需要创建一个id假设为map的div容器，并指定宽高。

这样就通过mapbox的Map类创建了一个基础地图，通常这些配置信息都从后台接口获取。

3.创建图层父类

充分利用面向对象思想，首先封装一个基础父类，由于我们大部分的都是点图层，type为symbol（只需要传入图层id和对应的图标），并可以设置默认值，如果是其他类型的图层，则单独在子类中创建，统一在父类里面添加到地图，此外，还包含诸如初始化过程（增加图层，增加图标），控制图层显示隐藏，创建销毁，图层设置数据源等方法。

如下：

4.创建图层子类

归纳有多少个图层，由于TypeScript不支持多层继承，因此建议每一个图层都独立创造一个类继承父类，根据业务不同重写父类的方法以及增加其他方法。

图层主要分为

- 基础图层，是构成地图基础的图像切片，通常包含大量数据——包括标注、建筑等。

- 叠加图层，例如点、线、面，通常包括GeoJSON之类的矢量数据，包含的信息更少，但通常我们都是与这些图层进行交互，可随意的用js进行更改。

例如创建一个厕所点图层toiletLayer类,

再例如创建一个景区面图层ScenicLayer类，则需要在内部声明layer，type为fill

source数据源和style属性会在后面提到。

5.地图加载完成后加载图层

6.给图层添加数据源

添加新图层时需要添加数据源，图层数据源包括type和url，因此，既支持远程数据源，也支持

从后台获取（通常用这种方式，灵活可拓展），这种方法通常是GeoJSON格式的数据。

标准的geojson数据格式如下：

其中，features里面是我们需要的要素信息，geometry里面是地理信息，properties则是一些名称等基本信息。可以在定义图层的时候，配置source，也可以用如下办法灵活改变数据源，如要设置刚才景点图层的数据源：

可通过getSource(layerId)的方法获得这个layer的source，再重新赋值，但通常只赋值一次，因为这个操作消耗的性能很大，切忌频繁使用，有其他替代办法可以逐步增加或修改。

7.图层的样式设置

主要分为Layout和paint属性设置，用于明确图层如何渲染数据，就相当于css，同样是配置化。Layout属性指渲染位置和可见性，应用于渲染过程的早期阶段。paint指更精细的渲染样式，如不透明度、颜色等。不需要大量处理，在后期阶段进行渲染。例如：

即表示设置图层可见，设置面的填充色为rgba(61,153,80,0.55)。

8.图层的特殊表现形式

    这部分通常是开发过程中最难的地方，拓展要求最多，例如聚合、

聚合列表、特殊的需要结合canvas等实现的功能

9.地图绑定事件

    地图绑定一些鼠标移入、移出、点击、滚动缩放等事件，绑定的对象是map。

一方面可以对整个地图绑定

这样只有在点击这个图层的时候才会触发，如果两者同时设置，则触发的规则和JS原生的冒泡事件一致。

10.创建地图上其他交互组件

如图例，地图上的弹出框，信息框，控制图层的树或者tab，指北针和放大缩小按钮这些基础组件大部分地图引擎自身包含，但需要定制UI，一些特殊的要求也需要重写逻辑，这些都应该单独作为组件。他们之间的交互，以及和地图的交互，我们目前用一套Rxjs的规范去实现组件间的通信。这部分不属于地图部分，先不做详细介绍。