mapbox加载turf.js创建的格网

turf.js是mapbox官方推荐的进行空间分析的包，其优点在于强大且全面的空间分析功能，且支持geojson格式的输入，因此与Mapbox GL JS集成效果很好。

我们此处介绍Mapbox GL JS加载turf.js实时创建格网（渔网）的方法。

其效果如下：

turf.js能够指定格网大小、坐标等信息实时生成，其效率非常高，也可以在前端根据用户需求实时的生成格网了。生成结果为GeoJson格式，Mapbox根据其生成的结果直接加载。步骤如下：

1、turf.js生成格网（渔网）

turf.js使用turf.squareGrid(bbox, cellSide, options); 方法生成格网，返回格式为Geojson的featureCollection

    var bbox = [112, 22, 114, 23];  //格网坐标 minX,minY,maxX,maxY. modify here.
    var cellSide = 5;  //格网长度 
    var options = {units:'kilometers'};  //长度单位
    var squareGrid = turf.squareGrid(bbox, cellSide, options);  //生成格网

 2、MapBox加载格网

使用常规的addSource及addLayer即可加载，指定source的类型为geojson即可。

    map.addSource('gridsource', {
        type: 'geojson',
        data:squareGr