mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實(shí)現(xiàn)的代碼詳解
Mapbox GL JS是一個(gè)JavaScript庫(kù),使用WebGL渲染交互式矢量瓦片地圖和柵格瓦片地圖。WebGL渲染意味著高性能,MapboxGL能夠渲染大量的地圖要素,擁有流暢的交互以及動(dòng)畫(huà)效果、可以顯示立體地圖并且支持移動(dòng)端,是一款十分優(yōu)秀的WEB GIS開(kāi)發(fā)框架。
常見(jiàn)的 mapbox.js和mapbox-gl.js的異同點(diǎn)?
相同點(diǎn):
1.都是由Mapbox公司推出的免費(fèi)開(kāi)源的JavaScript庫(kù)
2.都可以作為前端渲染矢量瓦片交互地圖的工具
3.它們的樣式設(shè)置都支持Mapbox Style
不同點(diǎn):
1.mapbox.js是Leaflet的一個(gè)插件,使用方式是通過(guò)結(jié)合Leaflet使用
2.mapbox-gl.js是Leaflet的一個(gè)插件,使用方式是通過(guò)結(jié)合Leaflet使用
3.使用mapbox-gl.js的瀏覽器必須支持WebGL渲染,在舊的瀏覽器中是不支持mapbox-gl.js的,而mapbox.js則沒(méi)有 此限制
下面看下mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實(shí)現(xiàn)的代碼。
mapboxgl地圖區(qū)劃標(biāo)簽采用Marker實(shí)現(xiàn)導(dǎo)致密集區(qū)域會(huì)相互遮蓋
new mapboxgl.Marker(el) .setLngLat([dataTemp.lon,dataTemp.lat]) .addTo(map);
經(jīng)過(guò)查閱資料后決定采用Source cluster
方式解決,clusterRadius
可以根據(jù)地圖縮放自動(dòng)聚合檢測(cè),聚合半徑可設(shè)置
1、首先添加一個(gè)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)過(guò)區(qū)劃文字彈出小窗口展示信息,此處采用Popup方便后期擴(kuò)展
map.on('mouseenter', layerId, function(e) { let markerData = e.features[0].properties; _this.clearMarker(map);//先清除上次的彈窗 _this.addMarker(markerData,map);//打開(kāi)本次區(qū)劃彈窗 }); addMarker(){ let className = 'region-selected-marker-box region-selected-marker-box-'; let html = "自定義現(xiàn)實(shí)內(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)簽主動(dòng)避讓就已經(jīng)實(shí)現(xiàn)了,此種方式的優(yōu)勢(shì)是不需要重復(fù)計(jì)算,利用地圖cluster屬性即可實(shí)現(xiàn),clusterRadius
可以設(shè)置聚合半徑
總結(jié)
到此這篇關(guān)于mapboxgl區(qū)劃標(biāo)簽避讓不遮蓋實(shí)現(xiàn)的代碼詳解的文章就介紹到這了,更多相關(guān)mapboxgl區(qū)劃標(biāo)簽不遮蓋內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解TypeScript中type與interface的區(qū)別
在寫(xiě) ts 相關(guān)代碼的過(guò)程中,總能看到 interface 和 type 的身影。它們的作用好像都一樣的,相同的功能用哪一個(gè)都可以實(shí)現(xiàn),也都很好用,所以也很少去真正的理解它們之間到底有啥區(qū)別,因此本文將詳細(xì)講解二者的區(qū)別,需要的可以參考一下2022-04-04javascript網(wǎng)頁(yè)關(guān)閉時(shí)提醒效果腳本
當(dāng)頁(yè)面載入和關(guān)閉時(shí)會(huì)出現(xiàn)一些提示信息的代碼。方便提醒用戶,但不建議多用,讓人感到反感。2008-10-10JavaScript邏輯運(yùn)算符相關(guān)總結(jié)
這篇文章主要介紹了JavaScript邏輯運(yùn)算符的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09JavaScript 組件之旅(一)分析和設(shè)計(jì)
毫無(wú)疑問(wèn),JavaScript 是一種非常靈活的腳本語(yǔ)言,有時(shí)候它像一只難以馴服的野馬——你受益于它的靈活性的同時(shí),也要時(shí)刻提防它變得失去控制2009-10-10自己寫(xiě)一個(gè)uniapp全局彈窗(APP端)
應(yīng)用uni-app跨平臺(tái)框架進(jìn)行項(xiàng)目開(kāi)發(fā)過(guò)程中,需要實(shí)現(xiàn)版本更新時(shí)全頁(yè)面彈窗,底部導(dǎo)航欄無(wú)法點(diǎn)擊的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp全局彈窗(APP端)的相關(guān)資料,需要的朋友可以參考下2022-10-10JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用(3)
這篇文章主要介紹了JavaScript限定范圍拖拽及自定義滾動(dòng)條應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05