mapbox-gl自定义图层：画圆

mapbox-gl的自定义图层（Custom Layer），是在地图的基础上，以webgl的形式进行勾画，mapbox-gl本身提供了画圆的接口，且是以像素的单位进行勾画的，参见公众号文章：mapbox-gl开发：画圆的一些问题，下边介绍一种使用自定义图层画圆的形式。

mapbox-gl自定义图层的使用中，需要将经纬度坐标转换成墨卡托的形式进行使用，参见公众号文章：mapbox-gl开发：自定义图层CustomLayer，在实际的开发中，是在地图上画一个正方形，使用webgl的shader进行半径控制，显示指定区域的颜色。
关键代码实现：

//模拟一个中心点、半径等信息，这里固定半径，可根据自己需求修改
      let centerors = mapboxgl.MercatorCoordinate.fromLngLat({
                        lng: 110.004,
                        lat: 21.239
                    }, 0);
                    this.centpoint = [centerors.x + 0.0015, centerors.y + 0.0015];

      //拼接正方形
                    this.buffer = gl.createBuffer();
                    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
                    gl.bufferData(
                        gl.ARRAY_BUFFER,
                        new Float32Array([
                            centerors.x,
                            centerors.y,
                            centerors.z,
                            centerors.x + 0.003,
                            centerors.y,
                            centerors.z,
                            centerors.x + 0.003,
                            centerors.y + 0.003,
                            centerors.z,
                            centerors.x + 0.003,
                            centerors.y + 0.003,
                            centerors.z,
                            centerors.x,
                            centerors.y,
                            centerors.z,
                            centerors.x,
                            centerors.y + 0.003,
                            centerors.z,
                        ]),
                        gl.STATIC_DRAW
                    );

webgl fragmentshader关键代码：

//根据当前绘制坐标的位置，到中心点的距离，在距离以外的颜色透明
float circletest(vec2 uv, vec2 center, float radius)

        {

           float r = length(uv - center);
           if(r<0.0015)
           {
               return 1.0;
           }else
           {
               return 0.0;
           } 
        }

实现效果：