最近遇到一個(gè)新的需求需用用到高德地圖

公司需要只顯示固定區(qū)域范圍的地圖,其余地方的地圖都用透明遮罩覆蓋
完成后如下圖所示:
地圖體驗(yàn)網(wǎng)址

剛開始的時(shí)候研究了半天高德地圖的的JS API中只有一個(gè)區(qū)域遮掩符合條件
但是區(qū)域遮掩這個(gè)代碼有一個(gè)很重要的前提是必須使用3D地圖，
如果不使用3D地圖還是全部顯示，只是在周圍描一圈的邊
然后就卡在這里很久

苦苦查詢了很久突然在 這里設(shè)定樓塊樣式發(fā)現(xiàn)了能夠通過坐標(biāo)點(diǎn)繪制一圈填充內(nèi)部，既然如此我就在想能否和區(qū)域遮掩結(jié)合一下把外部的顏色填充一下就可以實(shí)現(xiàn)只顯示固定范圍的效果

話不多說準(zhǔn)備開寫，在自定義范圍的時(shí)候遇到一個(gè)很麻煩的事情就是如果你要繪制一個(gè)區(qū)域，就得把這個(gè)區(qū)域邊界的點(diǎn)形成一個(gè)圍欄，一個(gè)點(diǎn)一個(gè)點(diǎn)的去獲取的話有時(shí)候還不知道獲取到哪里了，于是我動(dòng)手先寫了一個(gè)繪制邊界獲取坐標(biāo)的demo
網(wǎng)址如下:繪制坐標(biāo)點(diǎn)獲取

首先如果不在你要的區(qū)域范圍內(nèi)的話可以在右上角搜索定位到你要的地址
然后點(diǎn)擊繪制線段

這里利用鼠標(biāo)左鍵繪制形成一個(gè)封閉的區(qū)域，完成后點(diǎn)擊鼠標(biāo)右鍵會(huì)提示繪制完成

提示完成后點(diǎn)擊下方獲取全部坐標(biāo)點(diǎn)，此時(shí)所有坐標(biāo)點(diǎn)的位置就已經(jīng)復(fù)制進(jìn)粘貼板了直接找個(gè)記事本
Ctrl+V就可以得到坐標(biāo)點(diǎn)的數(shù)組了
如果粘貼沒有效果的話可以在網(wǎng)站f12看下控制臺(tái)控制臺(tái)里也會(huì)輸出所有坐標(biāo)點(diǎn)

獲得到坐標(biāo)點(diǎn)集合后我們就可以開始代碼的編寫了

var options = {areas:[{ //圍欄1//visible:false,//是否可見rejectTexture:true,//是否屏蔽自定義地圖的紋理path: [[[116.316092,39.992203],[116.314933,39.999798],[116.31519,40.004598],[116.31562,40.005255],[116.316414,40.00583],[116.318216,40.006258],[116.318967,40.006652],[116.318946,40.008214],[116.3185,40.012725],[116.326804,40.013267],[116.328349,40.013251],[116.328972,40.013152],[116.330903,40.013218],[116.331632,40.012955],[116.335688,40.009356],[116.336675,40.007729],[116.336932,40.00689],[116.336954,40.006841],[116.337126,40.001368],[116.337705,39.992869],[116.325367,39.992409]]]}]};

首先把坐標(biāo)點(diǎn)放進(jìn)數(shù)組里

因?yàn)槲覀兊牡淖鴺?biāo)點(diǎn)直接拿去繪制的話會(huì)填充內(nèi)部所以我們需要結(jié)合3D區(qū)域遮掩的代碼，將內(nèi)部區(qū)域改為外部區(qū)域的反選

var outer = [new AMap.LngLat(-360,90,true),new AMap.LngLat(-360,-90,true),new AMap.LngLat(360,-90,true),new AMap.LngLat(360,90,true),];var pathArray = [outer];pathArray.push.apply(pathArray,options.areas[0].path)

最后只需一句高德地圖的繪制方法就能將外部區(qū)域遮罩顯示出來達(dá)到2D區(qū)域遮掩的效果

new AMap.Polygon({bubble:true,fillOpacity:0.6,strokeWeight:2,strokeColor: '#00eeff',fillColor: '#71B3ff',path:pathArray,map:map})

下載地址

總結(jié)

以上是生活随笔為你收集整理的高德地图-2D地图下区域遮掩(只显示固定区域里的内容)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。