mapbox-gl自定義圖層：畫圓
mapbox-gl的自定義圖層（Custom Layer），是在地圖的基礎(chǔ)上，以webgl的形式進(jìn)行勾畫，mapbox-gl本身提供了畫圓的接口，且是以像素的單位進(jìn)行勾畫的，參見?https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485477&idx=1&sn=2685bf0d5bd707c9f7bd95aa180ed705&chksm=fc8ba817cbfc21011904b77fcf9daadb7b5cbef3d1e197f87db6ede573d0816a058049563f38&scene=21#wechat_redirect，下邊介紹一種使用自定義圖層畫圓的形式。??
mapbox-gl自定義圖層的使用中，需要將經(jīng)緯度坐標(biāo)轉(zhuǎn)換成墨卡托的形式進(jìn)行使用，
在實(shí)際的開發(fā)中，是在地圖上畫一個(gè)正方形，使用webgl的shader進(jìn)行半徑控制，顯示指定區(qū)域的顏色。關(guān)鍵代碼實(shí)現(xiàn)：
//模擬一個(gè)中心點(diǎn)、半徑等信息，這里固定半徑，可根據(jù)自己需求修改
? ? ? 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關(guān)鍵代碼：//根據(jù)當(dāng)前繪制坐標(biāo)的位置，到中心點(diǎn)的距離，在距離以外的顏色透明
float?circletest(vec2?uv,?vec2?center,?float?radius)
????????{
???????????float?r?=?length(uv?-?center);
???????????if(r<0.0015)
???????????{
???????????????return?1.0;
???????????}else
???????????{
???????????????return?0.0;
???????????}?
????????}? ?
