快捷導(dǎo)航

mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實現(xiàn)的代碼詳解

更新時間：2020年07月01日 09:55:04 作者：yuruke

Mapbox是一個可以免費創(chuàng)建并定制個性化地圖的網(wǎng)站。這篇文章主要介紹了mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實現(xiàn)方法，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

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

相同點：

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

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

3.它們的樣式設(shè)置都支持Mapbox Style

不同點：

1.mapbox.js是Leaflet的一個插件，使用方式是通過結(jié)合Leaflet使用

2.mapbox-gl.js是Leaflet的一個插件，使用方式是通過結(jié)合Leaflet使用

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

下面看下mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實現(xiàn)的代碼。

mapboxgl地圖區(qū)劃標(biāo)簽采用Marker實現(xiàn)導(dǎo)致密集區(qū)域會相互遮蓋

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

經(jīng)過查閱資料后決定采用Source cluster方式解決，clusterRadius可以根據(jù)地圖縮放自動聚合檢測，聚合半徑可設(shè)置

1、首先添加一個addSource

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

2、添加區(qū)劃標(biāo)簽圖層

 map.addLayer({//添加區(qū)劃標(biāo)簽圖層
   '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、鼠標(biāo)經(jīng)過區(qū)劃文字彈出小窗口展示信息，此處采用Popup方便后期擴展

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

到此，地區(qū)區(qū)劃標(biāo)簽主動避讓就已經(jīng)實現(xiàn)了，此種方式的優(yōu)勢是不需要重復(fù)計算，利用地圖cluster屬性即可實現(xiàn)，clusterRadius可以設(shè)置聚合半徑

總結(jié)

到此這篇關(guān)于mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實現(xiàn)的代碼詳解的文章就介紹到這了,更多相關(guān)mapboxgl區(qū)劃標(biāo)簽不遮蓋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: