mapbox-gl開發(fā)中如何畫圓

發(fā)布時間：2022-01-13 16:30:40 來源：億速云閱讀：297 作者：小新欄目：大數(shù)據(jù)

這篇文章主要介紹mapbox-gl開發(fā)中如何畫圓，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

mapbox-gl提供了一個畫圓的圖層方式，圖層的類型設(shè)置成circle，通過設(shè)置circle-radius，實現(xiàn)圓的大小設(shè)置，不過這個參數(shù)的單位是像素，在地圖縮放的時候，圓的大小并不變，根據(jù)地圖上一定距離的效果，這個并不滿足要求。

所以，在實現(xiàn)地圖上按照一定距離（米）的圓范圍，需要進行一定的變換，在mapbox-gl的討論話題中，找到一種按照地理距離實現(xiàn)畫圓的方式，同時，能夠在地圖縮放時，隨著地圖變化。

根據(jù)下列函數(shù)，傳入圓的地理距離和圓中心點所在的緯度坐標，計算地圖縮放到20級時，圓在屏幕上的像素尺寸：

function metersToPixelsAtMaxZoom(meters, latitude) {

return meters / 0.075 / Math.cos(latitude * Math.PI / 180)

}

在地圖上添加圓的時候，根據(jù)計算的像素尺寸，通過mapbox-gl的expression表達式設(shè)置，實現(xiàn)隨著地圖縮放，圓的尺寸變化：

//添加數(shù)據(jù)源

map.addSource("circle_source", {

"type": "geojson",

"data": {

"type": "FeatureCollection",

"features": [{

"type": "Feature",

"geometry": {

"type": "Point",

"coordinates": [110.132, 21.768]

}

}]

}

});

//添加圓的圖層

map.addLayer({

"id": "circle_layer",

//類型設(shè)置

"type": "circle",

//數(shù)據(jù)源id設(shè)置

"source": "circle_source",

"paint": {

//關(guān)鍵處，設(shè)置圓的半徑隨地圖縮放而變化

"circle-radius": {

stops: [

[0, 0],

[20, _pixelRadius]],

base: 2

//設(shè)置圓的其他屬性

"circle-opacity": 0.5,

"circle-stroke-width": 1,

"circle-color": "#00f",

"circle-pitch-alignment": "map"

}

});

添加的圓圖層就能根據(jù)地圖縮放而變化：

mapbox-gl開發(fā)中如何畫圓

以上是“mapbox-gl開發(fā)中如何畫圓”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

mapbox-gl開發(fā)中如何畫圓

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽