Mapbox GL JS是一個JavaScript庫，使用WebGL渲染互動式向量瓦片地圖和柵格瓦片地圖。WebGL渲染意味著高效能，MapboxGL能夠渲染大量的地圖要素，擁有流暢的互動以及動畫效果、可以顯示立體地圖並且支援移動端，是一款十分優秀的WEB GIS開發框架。

常見的 mapbox.js和mapbox-gl.js的異同點？

相同點：

1.都是由Mapbox公司推出的免費開源的JavaScript庫

2.都可以作為前端渲染向量瓦片互動地圖的工具

3.它們的樣式設定都支援Mapbox Style

不同點：

1.mapbox.js是Leaflet的一個外掛，使用方式是通過結合Leaflet使用

2.mapbox-gl.js是Leaflet的一個外掛，使用方式是通過結合Leaflet使用

3.使用mapbox-gl.js的瀏覽器必須支援WebGL渲染，在舊的瀏覽器中是不支援mapbox-gl.js的，而mapbox.js則沒有 此限制

下面看下mapboxgl區劃標籤避讓不遮蓋實現的程式碼。

mapboxgl地圖區劃標籤採用Marker實現導致密集區域會相互遮蓋

new mapboxgl.Marker(el)
    .setLngLat([dataTemp.lon,dataTemp.lat])
    .addTo(map);

經過查閱資料後決定採用Source cluster

1、首先新增一個addSource

  map.addSource(sourceId,{
   "type": "geojson","data": {
     "type": "FeatureCollection","features": _this.formatData(datas,map) 
   },"cluster": true,"clusterRadius": 35 // 聚合半徑
  });

2、新增區劃標籤圖層

 map.addLayer({//新增區劃標籤圖層
   'id': layerId,'type': 'symbol','source': sourceId,'layout': {
    'visibility': 'visible','text-field': ['get','regionname'],'text-font': ['Helvetica Neue','Arial','Helvetica','sans-serif'],'text-offset': [0,0],'text-anchor': 'top','text-size':14,},'paint':{
    'text-color':'#000000',}
  });

3、滑鼠經過區劃文字彈出小視窗展示資訊，此處採用Popup方便後期擴充套件

map.on('mouseenter',layerId,function(e) {
   let markerData = e.features[0].properties;
   _this.clearMarker(map);//先清除上次的彈窗
   _this.addMarker(markerData,map);//開啟本次區劃彈窗
  });
addMarker(){
  let className = 'region-selected-marker-box region-selected-marker-box-';
  let html = "自定義現實內容"；
  var popup = new mapboxgl.Popup({
   offset: [20,5],className: className,anchor:'left',closeButton:false
  })
   .setLngLat([lon,lat])
   .setHTML(html)
   .setMaxWidth("300px")
   .addTo(map);
 }

到此，地區區劃標籤主動避讓就已經實現了，此種方式的優勢是不需要重複計算，利用地圖cluster屬性即可實現，clusterRadius可以設定聚合半徑

總結

到此這篇關於mapboxgl區劃標籤避讓不遮蓋實現的程式碼詳解的文章就介紹到這了,更多相關mapboxgl區劃標籤不遮蓋內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！